Selecting an image
Do's:
- Use photos in which the subject is clear and easy to understand.
- Use photos that have good natural lighting.
- Use a variety of subjects and locations, especially if using multiple images.
- Try and include more diversity and more candid, organic, and natural portraits.
- Include a description of the information in a graphic with text (i.e. a graph or chart communicating complex content) below the image for legibility and accessibility. We recommend limiting the use of graphics with text; they should be used only when necessary.
- Use landscapes for homepage banner photo; these provide users with a sense of geography and natural beauty.
Dont's:
- Don’t use graphics or event posters as images.
- Don’t include text or use photos with text on an image. This is inaccessible to screen reader technology.
- Don’t stack logos over an image to communicate the brand. Logos over an image might reduce legibility of the logo and image, or reduce the impact of the main logo within the website header.
- Don’t use imagery with people that are displaying exaggerated emotions.
- Don’t use photos with too many focal points.
- Don’t use photos taken exclusively at a single location or public event.
- Don’t use stock photos with white backgrounds or abstract image concepts (i.e. synergy, a picture of a puzzle, or an object cutout).
We want to hear from you!
Our team at Upanup is always striving to make this guide better and more accessible for our clients. We’d love to hear from you, so we can continue to improve this guide.
Accordions
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer laoreet vestibulum mollis. Sed vitae urna sollicitudin, pulvinar diam vel, facilisis libero. Pellentesque at posuere metus, in aliquam mi. Duis neque libero, pulvinar vitae imperdiet a, tempor non sapien. Cras ex felis, tempus non mi at, consequat ultricies velit. Aenean sed ante id ante eleifend tincidunt. Aenean lobortis rutrum semper. Donec rutrum orci vitae ante cursus aliquet. Nullam et odio eu eros congue commodo eget vitae ex. Integer fringilla lacinia tortor, quis gravida ante tristique at. In hac habitasse platea dictumst. Suspendisse nec tortor et turpis pretium viverra. Phasellus ultrices augue eu risus lacinia, et malesuada urna iaculis. Sed viverra urna nulla, a mollis massa tincidunt non. Praesent molestie ex sit amet magna faucibus imperdiet. Ut congue velit justo, sed aliquam dolor aliquam sit amet.
Cards
Card title
Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer laoreet vestibulum mollis. Sed vitae urna sollicitudin, pulvinar diam vel, facilisis libero. Pellentesque at posuere metus, in aliquam mi. Duis neque libero, pulvinar vitae imperdiet a, tempor non sapien. Cras ex felis, tempus non mi at, consequat ultricies velit. Aenean sed ante id ante eleifend tincidunt. Aenean lobortis rutrum semper. Donec rutrum orci vitae ante cursus aliquet. Nullam et odio eu eros congue commodo eget vitae ex. Integer fringilla lacinia tortor, quis gravida ante tristique at. In hac habitasse platea dictumst. Suspendisse nec tortor et turpis pretium viverra. Phasellus ultrices augue eu risus lacinia, et malesuada urna iaculis. Sed viverra urna nulla, a mollis massa tincidunt non. Praesent molestie ex sit amet magna faucibus imperdiet. Ut congue velit justo, sed aliquam dolor aliquam sit amet.
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer laoreet vestibulum mollis. Sed vitae urna sollicitudin, pulvinar diam vel, facilisis libero. Pellentesque at posuere metus, in aliquam mi. Duis neque libero, pulvinar vitae imperdiet a, tempor non sapien. Cras ex felis, tempus non mi at, consequat ultricies velit. Aenean sed ante id ante eleifend tincidunt. Aenean lobortis rutrum semper. Donec rutrum orci vitae ante cursus aliquet. Nullam et odio eu eros congue commodo eget vitae ex. Integer fringilla lacinia tortor, quis gravida ante tristique at. In hac habitasse platea dictumst. Suspendisse nec tortor et turpis pretium viverra. Phasellus ultrices augue eu risus lacinia, et malesuada urna iaculis. Sed viverra urna nulla, a mollis massa tincidunt non. Praesent molestie ex sit amet magna faucibus imperdiet. Ut congue velit justo, sed aliquam dolor aliquam sit amet.
- List item
- List item
- Indented list item
- List item
- Ordered list item
- Ordered list item
- Indented ordered list item
- Ordered list item
| First cell | Second cell |
|---|---|
| Content | Content |
| Content | Content |
Blockquote example - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer laoreet vestibulum mollis. Sed vitae urna sollicitudin, pulvinar diam vel, facilisis libero. Pellentesque at posuere metus, in aliquam mi. Duis neque libero, pulvinar vitae imperdiet a, tempor non sapien. Cras ex felis, tempus non mi at, consequat ultricies velit. Aenean sed ante id ante eleifend tincidunt. Aenean lobortis rutrum semper. Donec rutrum orci vitae ante cursus aliquet. Nullam et odio eu eros congue commodo eget vitae ex. Integer fringilla lacinia tortor, quis gravida ante tristique at. In hac habitasse platea dictumst. Suspendisse nec tortor et turpis pretium viverra. Phasellus ultrices augue eu risus lacinia, et malesuada urna iaculis. Sed viverra urna nulla, a mollis massa tincidunt non. Praesent molestie ex sit amet magna faucibus imperdiet. Ut congue velit justo, sed aliquam dolor aliquam sit amet.
Emphasis
This is the content of the emphasis blockquote
Image and text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer laoreet vestibulum mollis. Sed vitae urna sollicitudin, pulvinar diam vel, facilisis libero. Pellentesque at posuere metus, in aliquam mi. Duis neque libero, pulvinar vitae imperdiet a, tempor non sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer laoreet vestibulum mollis. Sed vitae urna sollicitudin, pulvinar diam vel, facilisis libero. Pellentesque at posuere metus, in aliquam mi. Duis neque libero, pulvinar vitae imperdiet a, tempor non sapien. Cras ex felis, tempus non mi at, consequat ultricies velit. Aenean sed ante id ante eleifend tincidunt. Aenean lobortis rutrum semper. Donec rutrum orci vitae ante cursus aliquet. Nullam et odio eu eros congue commodo eget vitae ex. Integer fringilla lacinia tortor, quis gravida ante tristique at. In hac habitasse platea dictumst. Suspendisse nec tortor et turpis pretium viverra. Phasellus ultrices augue eu risus lacinia, et malesuada urna iaculis. Sed viverra urna nulla, a mollis massa tincidunt non. Praesent molestie ex sit amet magna faucibus imperdiet. Ut congue velit justo, sed aliquam dolor aliquam sit amet.
Images
Links block
Links block intro content
List view
Grid view
Horizontal cards
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel finibus quam. Ut diam dui, sodales non nisi nec, viverra tincidunt nisl. Donec non vehicula urna. Nulla dolor augue, molestie ut rhoncus eget, suscipit at felis. Suspendisse et ipsum id odio mattis finibus id nec lectus. Fusce commodo scelerisque arcu a aliquet. Nunc sit amet purus dictum, placerat nisi quis, sodales velit. Nam pulvinar lobortis sapien, ac lacinia enim molestie eleifend. Nullam aliquam consectetur magna in lobortis. Sed quis justo erat. Phasellus rhoncus aliquam nulla. Ut dolor eros, semper ut diam eget, vulputate tincidunt ex.
Horizontal card title
Our team at Upanup is always striving to make this guide better and more accessible for our clients. We'd love to hear from you, so we can continue to improve this guide.