Image Cards
The image cards component is a highly versatile component that pairs an image with text in a way that creates discreet, linkable cards. These cards can be used to direct attention to other pages, or to feature images and provide context. The image cards component includes color options, number of cards per row options and image shape options for maximum flexibility. In addition, most items within each image card are optional.
Header Title
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis tenetur vero aut sit ducimus nulla perferendis!
When To Use This Component
The image cards component has many uses. Its core purpose is to link to other pages in a way that has some visual presence. However, as a fully-manually component, the sky is the limit on how you decide to display your content. For example, you could use the 2-up option if you have really nice images and want to use them in a larger format to draw attention to other pages. Alternatively, you could use the circle option as a way to feature people, other images, in a stylized way.
Component Dos & Don’ts
DO
Explore the versatility of the image cards component and think creatively about displaying your content.
Use roughly the same amount of text within items in a row.
DON’T
Don’t use unbalanced amounts of text between items in a row.
Component Design Options
Below you will find examples of the Image Cards component and its various design options.
Image Cards – Rectangle (Grid)
EDITABLE PARTS
- Section Title (optional)
- Description (optional)
- Button Text and Link (optional)
- Each Image Card includes:
- Image Upload
- Title
- Description
- Link and Text
Columns: 2, 3, 4 (4 max)
Color Combo: Gray/White, Black/White, White/Black
Button Color: Green, Gold
Header Title
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis tenetur vero aut sit ducimus nulla perferendis!
Image Cards – Circle
- Section Title (optional)
- Description (optional)
- Button Text and Link (optional)
- Each Image Card includes:
- Image Upload
- Title
- Description
- Link and Text
EDITABLE PARTS
Columns: 2, 3, 4 (4 max)
Color Combo: Gray/White, Black/White, White/Black
Button Color: Green, Gold
REMINDER: BLOCK NEEDS TO BE UPDATED. COLORS DO NOT CHANGE WHEN SWITCHING TO CIRCLE OPTION
Header Title
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis tenetur vero aut sit ducimus nulla perferendis!