# Card

# Cards organize information into chunks of easy to digest content.

# Usage

The container is the only required piece of the card. Other elements are optional.
A card will most often be used as a way to get to a more detailed view of a subject.

# Essential Elements:

Container: Holds all the card elements. The size is determined by the space the elements occupy, height is determinded by the elements and the height of the tallest card in a row.
Interactivity Cues are expressed by the container, includes a 4px border radius, box shadow animations and a title with the primary color on it (unless the card doesn't link anywhere).
Hover state: Box shadow expands and lightens to simulate being picked up and background color changes to a light gray.
Active State: the border changes color to $primary-light and the box shadow recedes and changes to $darkest.

# Common Elements:

Header Text: In most cases this is a component name. The color of the title will typically be $primary to show it's a link, otherwise it's $dark-text. May also contan badges, icons and counts, these are usually on the right side of the container.
Sub Head: Sub heads are used to empasize pieces of meta data about components.
Body: The main content, important values and meta data about the component. Title of the value on the left with a small class applied to deemphasize, with the value on the right side.
Footer: Space at the bottom separated from the body by a <hr>. Typically includes a date (DD-Mon-YYYY) such as Last Data Update or Install Date.

# Other Elements

Progress bars: Can be used when a card needs to indicate values such as counts or failure rates in a visual way.

# Dividers

Dividers can be used to separate related content.

To separate content use inset dividers <hr> that do not run the full width of the card.

Full width dividers should be used for cards that can be expanded or to fully divided a cards footer.

# Behavior

# Responsiveness

Cards should be 100% width by default. Once the screen size reaches $md-min the width should be 45% and at xxl-min the width is adjusted to 22%.

The display: flex property should be applied to the outer container so they can form rows.

# Interaction

The primary action area of a card is the card itself. Cards are most often used as a way to get to a more detailed screen.

# Variation Examples

# Card with Sub Head

Used to display a piece of meta information more prominently

# Card with Footer

Used to display dates. Separated from the rest of content by a full width divider

# Card with Progress Bar

Used when a card needs to indicate values such as counts or failure rates in a visual way.