Basic Card Component

Synopsis: The basic card component is a standard card that can be included in the navigation or may live with a group of related cards within the page. It has 3 layout variations: Standard, Side-by-Side and Wide. It’s a simple container which can house a title, description text, icon, and a link. 

To make the card static with no link or hover-state, simply leave the link field blank. The card will then become a simple icon and text block.

Content Fields: 

Icon, Title, Description, Link

Options:

Layout Variation: Standard, Side-by-Side, Wide

Border: On/Off

Usage: All pages. The basic card can be used in the navigation as well as on all pages.

Note: This should be used as an example only. There will be additional requirements related to each individual component usage and page design, such as font treatments, padding and margin requirements, ADA compliance etc, so please use the below examples for reference only to demonstrate core function.

Scenario 1

Standard Variation

Ingredients: 1 Basic Card

This scenario consists of 1 basic card by itself setup in the standard layout, contained within a 1440px max-width container. The standard layout consists of the logo, title and description in a vertical layout while the entire card is clickable.

To have multiple basic cards in a row, see the next scenario to see how to configure the basic cards within a column control.

Scenario 2

Standard Variation in 3 Columns

Ingredients: Column Control, 3 Basic Cards

This scenario consists of 3 basic cards setup in the standard layout within a column control with 3 columns.

Scenario 3

Standard Variation in 4 Columns

Ingredients: Column Control, 4 Basic Cards

This scenario consists of 4 basic cards setup in the standard layout within a column control with 4 columns.

Scenario 4

Side-by-Side Variation in 3 Columns

Ingredients: Column Control, 3 Basic Cards

This scenario consists of 3 basic cards setup in the side-by-side layout within a column control with 3 columns.

Scenario 5

Wide Variation

Ingredients: Column Control, 2 Basic Cards

This scenario consists of two basic cards setup in the wide layout, within a 2 column control.

Scenario 6

Standard Variation in 3 Columns

Ingredients: Column Control, 3 Basic Cards

This scenario consists of 3 basic cards setup in the standard layout within a column control with 3 columns without CTA.