Lorem Ipsum Dolor Sit Amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem Ipsum
Component
Card List
SCSS Location: /styles/scss/partial/_cards.scss- Status: Design
- Status: Development
- Status: Documentation
Description
There is a base card treatment that can be evolved to have different types of content within it. All cards have the same hover/focus interactions, except for Contact Cards and the Alert/Announcement Card.
Guidelines
Item Design Guidelines Not Provided
Usage
Card Lists
Cards can be added as a 2-, 3-, or 4-column list in different sections and on various content types.
The first row of .card-list__items in any card list will have the top padding removed.
If there are multiple rows of cards, orphaned cards will be left-aligned, except in a centered 2-col-list employing the class, .card-list--2-col--centered, where any orphaned cards will be centered.
Use the class deco-graphic plus deco-graphic--left and/or deco-graphic--right on the card-list container to add the decorative SVGs to the left top or right bottom of the card list.
Card List Types
2 Column List - Base
-
Basic Card in 2-col layout
This is short supporting copy that describes the CTA.
-
Basic Card in 2-col layout, no link.
This is short supporting copy that describes the CTA.
-
Basic Card in 2-col layout
This is short supporting copy that describes the CTA.
2 Column List - Centered
2 Column List - Full Width
-
Basic Card in 2-col layout
This is short supporting copy that describes the CTA.
-
Basic Card in 2-col layout
This is short supporting copy that describes the CTA.
-
Basic Card in 2-col layout
This is short supporting copy that describes the CTA.
-
Basic Card in 2-col layout
This is short supporting copy that describes the CTA.
3 Column List
4 Column List
3 Column List With Decorative Graphics
-
-
Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consectetur adipiscing elit.
Lorem Ipsum -
Lorem Ipsum Dolor Sit Amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Lorem Ipsum -
Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consectetur adipiscing elit.
Lorem Ipsum -
Lorem Ipsum Dolor Sit Amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem Ipsum -
Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consectetur adipiscing elit.
Lorem Ipsum
