Base Card Section

[slowbot]

A collection of cards of a specific topic or type organized in a grid.

When to use the card section component

• When you have a collection of cards under a similar topic or theme.

When to consider something else

• When you have only one item consider using an aside or section.
• When you have a collection of buttons or links consider using a button group or navigation.
• When you have sequential or continuous text, consider using a section with body and headings.

Usability guidance

• Consider the content type and location when determining the proper number of columns to use.

Accessibility

• Use unordered lists and list items. Use a ul for a card group and an li for each card. This allows screen readers to enumerate the items in the card group and allows shortcuts between list items.

Implementation

Field	Value	Name
Header Group: Brow	category for the section
Header Group: Title	title of the section
Header Group: Lead	brief subtitle or lead in description for the section
Header Group: Layout	Center or Left (default)
Cards	collection of nested cards with fields for each card

Variants	Values	Name
Layout	(Specified at the card component level)
Background	light (default), or dark. Effects: text color, background color, action color

Nested Components

• Header Group
• Card
• Section (shared styles inc light/dark options)

Related USWDS Components

• Card
• usa-card-group - The usa-card-group block is functionally a wrap-able grid-row and each individual usa-card is a grid-col.

Theme

Element	Effects	Global/Component
$theme-font-role-heading	Title	Global
$theme-lead-font-family	Lead	Global
$theme-jcc-section-background	Background color	Global/Custom
$theme-jcc-reverse-background-color	Background color	Global/Custom
$theme-link-reverse-color	Link color	Global
$theme-link-reverse-hover-color	Link color	Global
$theme-link-reverse-active-color	Link color	Global
$theme-jcc-dash-color	Dash	Global/Custom
$theme-jcc-reverse-dash-color	Dash	Global/Custom
$theme-jcc-dash-position	Dash	Global/Custom

Questions:

• Knowing that the collection component is coming, are we clear on when to use card section and when to use a collection?

Figma:

https://www.figma.com/file/UW0WNmfKZOmAOE5zsSYEx5/JCC-Base?node-id=189%3A354
https://www.figma.com/file/UW0WNmfKZOmAOE5zsSYEx5/JCC-Base?node-id=189%3A355