-
Created by
Erica McConnaughey, last updated on Apr 22, 2026
3 minute read
Design
Component Library
Screenshot
Use Cases
Use this block when you have a large image next to some text.
33/66 layout (use sparingly)
Only use this layout when you have a small amount of copy (< 250 characters total). Too much copy will break the layout (the card will extend above and below the image), so test the block with the content in it at every breakpoint (screen size).
You can also use this layout when the image is not as important or does not have small details that are important to see.
To create this layout, open the card configuration accordion and select 33/66 under Image Width.
50/50 layout (default)
This layout can be used anytime you need an image next to copy. This is the default layout of the block.
50/50 layout with overlap (use sometimes)
This layout can be used anytime you need an image next to short or medium length copy.
To use this layout, toggle the Overlap Text field ON in the block configuration.
The text box should never extend above and below the image next to it; if it does, use the 50/50 layout with no overlap instead.
- Here is an example when to not use overlap for this card:
Card-level Fields
Populate from post
Use this to dynamically pull in an existing blog, news, or spotlight post to fill the block. You won't be able to fill out the other fields once you select a post in this field.
Populate from spotlight
Use this to dynamically pull in an existing spotlight post to fill the block. You won't be able to fill out the other fields once you select a post in this field.
You will need to update the excerpt in the spotlight to have the person's name (degree 'year) in bold (use <b> tags).
You will need to add the link to the spotlight and the text read "Read person's first name's story".
Title
The card title. You can select the heading size in the card configuration.
Heading Size
You can select H2 - H4 heading sizes.
Subtitle
The card subtitle.
Image
Use large, high-quality images that are 2400 x 1600 or smaller.
Image Alignment
The image can be on the left or right side of the page.
Micro title
The card micro title.
Content
The supporting copy. This should not be more than 1 paragraph or 400 characters. Make sure the amount of copy in the card looks good. If not, cut some of it or ask a writer to cut some of it.
Link
The URL.
CTA Styles
You can pick text link or different CTA styles for the link.
Block-level Fields
Stretch Link
The text will become stretched and has the raised hover effect. In addition, the title will become the link location with an outline effect when tabbed.
- This should only be used when the card is displaying an outline and shadow (i.e. 33/66 layout or 50/50 layout with Overlap Text ON).
- For right now, this field is to be used for Update Magazine.
Overlap Text
The text will have a shadow and overlap the image. NOTE: Only use with the 50/50 layout.
Image Width
You can select the following sizes.
33/66
50/50
Enable Swiper
If you have multiple cards in one block, you can choose between using a swiper or stacking the cards on the page.