...
- link to component mockup in Figma
Design +
...
Images
Card photo (required)
- Circle crop headshot
- Square photo with face centered
- 500x500px or 1000x1000px
- Full-width photo
- Standard photo size - 2400x1600px
- Face should be in top 1/3 of image so it doesn't get covered by text at the bottom
- We can add vertical images to make the cards taller, if desired. But all photos for cards in the same row/block should have the same dimensions.
...
Logo displayed next to name, title, and company
- Logo specs: 512px wide, height will vary
Layout created for T2L4
| Code Block | language | html|||
|---|---|---|---|---|
| Expand | ||||
| ||||
Where it says <img />, just use the Add Media button and add whatever photo you like. You do not need to edit the default classes WordPress adds. Don't skip the divider element! If you forget it, the image won't appear. |
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<div class="name-title-company">
<div class="text-wrapper">
<p>
<span class="name">Name</span>
Title/Company
Location
</p>
</div>
<div class="divider"></div>
<div class="image-wrapper">
<img />
</div>
</div> |
Image beside text
- Image can be on right or left side
- Text can be styled as a quote or not
- Text can include multiple paragraphs next to a larger image
...