Cards
Cards are user interface content containers that can display various elements, including image, title, description, call to action, and sometimes subheadings or icons.
Cards are united by the same concept where each card represents one idea, item, or piece of content.
Below are examples of our current card components.
Card Grid
This grid offers several layout options to display image, icon, heading, description, call to action.
Title 1
Lorem ipsum dolor sit amet consectetur adipiscing elit sodales congue.
Title 2
Parturient justo dui neque posuere nunc, proin imperdiet sociosqu nulla, tristique molestie magnis hac.
Title 3
Lorem ipsum dolor sit amet consectetur adipiscing elit sodales congue, mattis mus suspendisse risus laoreet placerat commodo facilisis cursus, fusce sagittis malesuada montes semper felis augue ridiculus.
Title 4
Elementum pellentesque interdum mattis eleifend aptent quam blandit tempor integer suscipit fringilla etiam, per cursus aenean faucibus hendrerit ac consequat.
Flex Card
The flex card component provides a less-structured component to build cards. You can mix and match background colors and media types, including icon or image.
Card with Icon
Lorem ipsum dolor sit amet consectetur adipiscing elit sodales congue, mattis mus suspendisse risus laoreet placerat commodo facilisis cursus, fusce sagittis.
Card with no image or icon
Lorem ipsum dolor sit amet consectetur adipiscing elit sodales congue, mattis mus suspendisse risus laoreet placerat commodo facilisis cursus, fusce sagittis malesuada montes semper felis augue ridiculus.
|
Column 1 Heading
|
Column 2 Heading
|
Column 3 Heading
|
|---|---|---|
| Jan 27, 2025 | Deadline Title 1 |
Additional Content Link Sample |
| Mar 11, 2025 | Deadline Title 2 |
Additional Content External Link |
| May 11, 2025 | Deadline Title 3 |
Additional Content |
| May 17, 2025 | Deadline Title |
Additional Content |
| May 17, 2025 | Deadline Title |
Additional Content |
| May 19, 2025 | Deadline Title |
Additional Content |
| May 27, 2025 | Deadline Title |
Additional Content |
| May 28, 2025 | Deadline Title |
Additional Content |
| May 29, 2025 | Deadline Title |
Additional Content |
Fast Facts Heading
Optional Intro Copy: Lorem ipsum dolor sit amet consectetur adipiscing elit netus suspendisse laoreet at luctus donec, leo montes justo egestas nullam pulvinar neque ultricies nibh vulputate fames.
Text Required: Lorem ipsum dolor sit amet consectetur adipiscing elit porta, quam.
Text Required: Lorem ipsum dolor sit amet consectetur adipiscing elit porta, quam.
Optional Sub Content: Lorem ipsum dolor sit amet consectetur adipiscing elit, faucibus sapien massa luctus vel dis, pretium sed non egestas habitant nibh.
Directory Listing
Event List
An event list can be displayed as either one (1), two (2), three (3), or four (4) columns depending on how many events are displayed. If four (4) or more events then it will display four (4) columns. An event list can also be displayed with optional 1 - 2 featured events and an optional button link under the list.
