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

2 Column List - Centered

4 Column List

3 Column List With Decorative Graphics

  • 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
  • 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