Cards

Cards are uses when displaying content that are a collection or contain multiple data types (images, movies, text) that do not require direct comparison. They suport content of highly variable length (captions, comments).

Note: Please read all the way down to see the Content Card as well.

A heading with emphasis

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.

Click me

A heading with emphasis

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.

Click me

A heading with emphasis

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.

Click me

A heading with emphasis

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Click me

A heading with emphasis

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

Click me

The card as an arbitary container

It is important to note, cards can have any arbitary content within them, not necessarily follow the pattern of title, image, description and link. A card is made up of a Card, Card Body, and a Card Link. The card contains the design pattern of the border and the rounded corner, the Card Body contains the rest. The Card link contains the link and lives inside the card body.

A card grows to the size of its container.


A longer heading with emphasis for impact

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.

Click me

A longer heading with emphasis for impact

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.

Click me

Content Cards

Content cards unlike the default card, are opinionated. These must be used when displaying a collection or data source that contains an image, heading, description (optional) and a list of links.

here is the image caption.

Some text
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis

Quote Cards

Before Boys Town, I had no thought of graduating from high school…now I have a whole plan for my future!
Ryan, Boys Town Graduate
Boys Town changed who I wanted to be as a person.
Preview Mode - Content Is Not Live
guid: 0e77e56d-u
env: production