Component

Card List

SCSS Location: /styles/scss/partial/_card-list.scss
  • Status: Design
  • Status: Development
  • Status: Documentation

Description

A Card List is an unordered list containing cards wrapped in list item tags.

Guidelines

The inclusion of a 2-col, 2-3-col, 2-3-4-col, or 2-4-col modifier class determines how many columns the list items are displayed in.

The column layout adapts responsively to allow the optimal card width, based on screen width and number of columns.

The number of columns should be specified based on context, and can be adjusted to serve the style and content of the cards.

Usage

Card Lists are used in various sections throughout the site, and are available on most content types.

Card Lists are un-opinionated about the type of card within its list items. The only time a Card List should need a modifier beyond number of columns is for complex functionality like expandable cards.

Two Column Card List (with left decoration)

  • Lorem Ipsum Dolor Sit Amet

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet.

  • Lorem Ipsum Dolor Sit Amet

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet.

Two | Three Column Card List (with right decoration)

  • Lorem Ipsum Dolor Sit Amet

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet.

  • Lorem Ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet.

Two | Three Column Card List (no decoration)

  • Lorem Ipsum Dolor Sit Amet

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet.

  • Lorem Ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet.

  • Lorem Ipsum Dolor Sit Amet

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet.

  • Lorem Ipsum Dolor Sit Amet

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet.

  • Lorem

    Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet.

  • Lorem Ipsum Dolor Sit Amet

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus leo sit amet diam dapibus facilisis. Aliquam blandit venenatis quam sit amet aliquet.

Two | Three | Four Column Card List (no decoration)

Two | Four Column Card List (no decoration)

Two Column "Button Card" List