With Sidebar

Card Groups

Component Tip

Use a card group when you have multiple pieces of related content that can stand on their own.

With Sidebar Components
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

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

All card groups have the option to have a section description to contextualize the cards in the group. This example card group uses a divider background.

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

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.

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 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

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 Card Group with Icons

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

Example Button 1
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

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 Card Group with Icons

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

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

Section Style

This example card group uses the default section style.

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 icons 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 7

Bold Card Group with Images

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

Example Button 1
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

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 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

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.

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.

Button 1Button 2

Section Style

This example card group uses the bold section style.

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.