Without Sidebar

Card Group

A card group is a collection of modular cards. Cards can be contextualized with an optional overarching heading and description in a section intro.

Without SidebarWith Sidebar
Component Tip

Use card groups to display similar, related content. Don't use card groups to display standalone content or sequential, continuous text. Each card should be made of self-contained content that stands on its own without the other cards in the group, but that also is on equal footing as the other cards.

Without Sidebar
Example 1

Default Standard Card Group

Jack K Williams Administration Building with pink flowers in the foreground

Section Style

This example card group uses the default section style.

 

Jack K Williams Administration Building with pink flowers in the foreground

Background Option

This example card group has no background.

 

Jack K Williams Administration Building with pink flowers in the foreground

Layout Option

This example card group uses the standard card layout, where cards are vertically oriented.

 

Jack K Williams Administration Building with pink flowers in the foreground

Media Option

The cards in this example card group don’t have media. All cards in a card group must have the same media option.

 

Jack K Williams Administration Building with pink flowers in the foreground

CTA Option

This example card group doesn’t have a CTA. All cards in a card group must have the same CTA option.

 

Example 2

Default Inline Card Group

Jack K Williams Administration Building with pink flowers in the foreground

Section Style

This example card group uses the default section style.

 

Jack K Williams Administration Building with pink flowers in the foreground

Background Option

This example card group uses the divider background option.

 

Jack K Williams Administration Building with pink flowers in the foreground

Layout Option

This example card group uses the inline card layout, where cards are horizontally oriented.

 

Jack K Williams Administration Building with pink flowers in the foreground

Media Option

The cards in this example card group don’t have media. All cards in a card group must have the same media option.

 

Jack K Williams Administration Building with pink flowers in the foreground

CTA Option

The cards in this example card group uses linked headings as their CTA option. All cards in a card group must have the same CTA option.

 

Example 3

Default Linked Card Group

Section Style

This example card group uses the default section style.

 

Background Option

This example card group uses the grey background option.

 

Layout Option

This example card group uses the linked card layout, where cards are vertically oriented.

 

Media Option

The cards in this example card group don’t have media. All cards in a card group must have the same media option.

 

CTA Option

This example card group uses linked cards. Because the whole card is linked, there is no additional CTA option. All cards in a card group must have the same CTA option.

 

Example 4

Bold Standard Card Group

With Icons

All card groups have the option to have a section description to contextualize the cards in the group.

Jack K Williams Administration Building with pink flowers in the foreground

Section Style

This example card group uses the bold section style.

Jack K Williams Administration Building with pink flowers in the foreground

Background Option

This example card group uses the maroon background option.

Jack K Williams Administration Building with pink flowers in the foreground

Layout Option

This example card group uses the standard card layout, where cards are vertically oriented.

Jack K Williams Administration Building with pink flowers in the foreground

Media Option

The cards in this example card group use icons as their media option. All cards in a card group must have the same media option.

Jack K Williams Administration Building with pink flowers in the foreground

CTA Option

The cards in this example card group uses linked headings as their CTA option. All cards in a card group must have the same CTA option.

Example 5

Elegant Inline Card Group

With Icons

All card groups have the option to have a section description to contextualize the cards in the group.

Example Button
Jack K Williams Administration Building with pink flowers in the foreground

Section Style

This example card group uses the elegant section style.

 

Jack K Williams Administration Building with pink flowers in the foreground

Background Option

This example card group has no background.

 

Jack K Williams Administration Building with pink flowers in the foreground

Layout Option

This example card group uses the inline card layout, where cards are horizontally oriented.

 

Jack K Williams Administration Building with pink flowers in the foreground

Media Option

The cards in this example card group use icons as their media option. All cards in a card group must have the same media option.

 

Jack K Williams Administration Building with pink flowers in the foreground

CTA Option

The cards in this example card group uses links as their CTA option; each card can have 1-3 links. All cards in a card group must have the same CTA option.

 

Example 6

Default Standard Card Group

With Icons

All card groups have the option to have a section description to contextualize the cards in the group.

Example ButtonExample Button 2
Jack K Williams Administration Building with pink flowers in the foreground

Section Style

This example card group uses the default section style.

Without Sidebar
Jack K Williams Administration Building with pink flowers in the foreground

Background Option

This example card group uses the charcoal background option.

Without Sidebar
Jack K Williams Administration Building with pink flowers in the foreground

Layout Option

This example card group uses the standard card layout, where cards are vertically oriented.

Without Sidebar
Jack K Williams Administration Building with pink flowers in the foreground

Media Option

The cards in this example card group use icons as their media option. All cards in a card group must have the same media option.

Without Sidebar
Jack K Williams Administration Building with pink flowers in the foreground

CTA Option

The cards in this example card group uses buttons as their CTA option. All cards in a card group must have the same CTA option.

Without Sidebar
Example 7

Bold Inline Card Group

With Images

All card groups have the option to have a section description to contextualize the cards in the group.

Example Button
Jack K Williams Administration Building with pink flowers in the foreground

Section Style

This example card group uses the bold section style.

Button
Jack K Williams Administration Building with pink flowers in the foreground

Background Option

This example card group has no background.

Button
Jack K Williams Administration Building with pink flowers in the foreground

Layout Option

This example card group uses the inline card layout, where cards are horizontally oriented.

Button
Jack K Williams Administration Building with pink flowers in the foreground

Media Option

The cards in this example card group use images as their media option. All cards in a card group must have the same media option.

Button
Jack K Williams Administration Building with pink flowers in the foreground

CTA Option

The cards in this example card group uses buttons as their CTA option. All cards in a card group must have the same CTA option.

Button
Example 8

Elegant Standard Card Group

With Images

All card groups have the option to have a section description to contextualize the cards in the group.

Jack K Williams Administration Building with pink flowers in the foreground

Section Style

This example card group uses the elegant section style.

Button
Jack K Williams Administration Building with pink flowers in the foreground

Background Option

This example card group uses gray background option.

Button
Jack K Williams Administration Building with pink flowers in the foreground

Layout Option

This example card group uses the standard card layout, where cards are vertically oriented.

Button
Jack K Williams Administration Building with pink flowers in the foreground

Media Option

The cards in this example card group use images as their media option. All cards in a card group must have the same media option.

Button
Jack K Williams Administration Building with pink flowers in the foreground

CTA Option

The cards in this example card group uses buttons as their CTA option. All cards in a card group must have the same CTA option.

Button
Example 9

Elegant Linked Card Group

With Images

All card groups have the option to have a section description to contextualize the cards in the group.

Section Style

This example card group uses the elegant section style.

Background Option

This example card group uses maroon background option.

Layout Option

This example card group uses the linked card layout, where cards are vertically oriented.

Media Option

The cards in this example card group use images as their media option. All cards in a card group must have the same media option.

CTA Option

This example card group uses linked cards. Because the whole card is linked, there is no additional CTA option. All cards in a card group must have the same CTA option.

Example 10

Bold Linked Card Group

With Icons

All card groups have the option to have a section description to contextualize the cards in the group.

Without SidebarWith Sidebar

Section Style

This example card group uses the bold section style.

Background Option

This example card group has no background.

Layout Option

This example card group uses the linked card layout, where cards are vertically oriented.

Media Option

The cards in this example card group use icons as their media option. All cards in a card group must have the same media option.

CTA Option

This example card group uses linked cards. Because the whole card is linked, there is no additional CTA option. All cards in a card group must have the same CTA option.