Cards

Cards are links on steroids. Cards must link to something.

Sometimes a few words in link text isn’t enough to communicate the idea, that’s where cards come in. Cards use images and additional text to more thoroughly describe the content that it links to. You can include an image, eyebrow headings, a summary and even button text. Use these elements to help your reader understand what they’ll find when they click, and empower readers to be more confident when navigating the site.

Cards come in two styles, the default stacked style, and an overlay style. Except the link, other content with cards is optional.

Usually cards are presented in groups to indicate different options a visitor might take, but you can display a single card to promote one idea.

You might want to use a card to promote a major or student opportunity along side the main content of a page.

You can also use one card in the main content column, and if you do, it’ll display differently and fill the available width. It ends up looking similar to a panel block, but the entire card is still a single link. You can force a card to render horizontally by using the special class, horizontal.