Cards

Overview of Component Group

Cards are a major component type across the whole site. Cards may be displayed as an individual object or as part of a group. Cards are a responsive element and are meant to fit to 100% of their container.

Cards are made up of primary pieces which may be omitted depending on the context of use. But at a minimum each card is required to have a title and a url target.

• title
• body
• thumbnail
• alt text (thumbnail/image)
• date
• source
• link bar

Cards are meant to be actionable, not just decorative.

Design

There are eight different card designs available for use

• Card
• Card with Button
• Card with Media
• Card with Media and Button
• Left Flag
• Right Flag
• Left Flag with Button
• Right Flag with Button
• Get Help Card
• Hover States

Card

Fields in use:

• Title: character limit 50
• Body: character limit 120
• Url (whole card is link)

Design Example

Code

HTML

SCSS

Card with Button

Fields in use:

• Title: character limit 50
• Body: character limit 120
• Button URL (whole card is link)

Design Example

Code

HTML

SCSS

Card with Media

Fields in use:

• Title: character limit 50
• Body: character limit 120
• Image
• URL (whole card is link)

Design Example

Code

HTML

SCSS

Card with Media and Button

Fields in use:

• Title: character limit 50
• Body: character limit 120
• Image
• Button URL (whole card is link)

Design Example

Code

HTML

SCSS

Left Flag

Fields in use:

• Title: character limit 50
• Body: character limit 120
• Image
• URL (whole card is link)

Design Example

Code

HTML

SCSS

Right Flag

Fields in use:

• Title: character limit 50
• Body: character limit 120
• Image
• URL (whole card is link)

Design Example

Code

HTML

SCSS

Left Flag with Button

Fields in use:

• Title: character limit 50
• Body: character limit 120
• Image
• URL (whole card is link)

Design Example

Code

HTML

SCSS

Right Flag with Button

Fields in use:

• Title: character limit 50
• Body: character limit 120
• Image
• URL (whole card is link)

Design Example

Code

HTML

SCSS

Get Help

Fields in use:

• Title: character limit 50
• Body: character limit 120
• URL: who card links to webpage or phone number dial/prompt

Functionality The Get Help cards are seen on the homepage, and may be used in other sections to draw attention to Find Treatment page, locators or helplines. The entire card may be clicked/tapped - the biggest difference is, the card would either bring a user to webpage or have the users browser prompt to call the number associated with the card. So the code needs to reflect the ability to dial the phone number displayed.

Design Example

Code

HTML

SCSS

Hover States

Design Example

Functionality

• The entire card is the link. Although only the card title displays as a link and shows the hover state.
• The thumbnail is decorative and has its altext set to null
• OnHover - titles underline, buttons change color states and the shadow drop appears around entire card. See design examples above
• OnClick/OnTap system displays target page - for Get Help, it may dial a phone number or prompt the user to dial the number depending on the browser and device.

Accessbility

The USWDS recommends using list Functionality for coding cards so that they are accessible.