-
Created by
Erica McConnaughey, last updated on Aug 03, 2021
2 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 (use often)
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 often)
This layout can be used anytime you need an image next to short or medium length copy. Ideally, the text box should not extend above and below the image next to it.
To use this layout, toggle the Overlap Text field in the block configuration.
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.
Title
The card title. You can select the heading size in the card configuration.
Subtitle
The card subtitle.
Image
Use large, high-quality images.
Micro title
The card micro title.
Content
The supporting copy. This should not be more than 1 paragraph or 4 sentences. 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.
Additional Class Names
(If applicable, describe any class names that must be added (like display-5 on h2s) or can be optionally added (like btn-jump on buttons).
Class name 1
Description of what it does