Without Sidebar

Card Slab

A card slab features two cards, no more and no less, with an overarching heading and optional description and button. The cards can either be featured cards or linked cards.

Without SidebarWith Sidebar
Component Tip

Use card slabs to display two pieces of similar, related content. Don't use card slabs 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 card in the slab.

Without Sidebar
Example 1

Default Example

This example card slab uses the default section style and has no background.

Jack K Williams Administration Building with pink flowers in the foreground

Media Option

This example shows a featured card with no media. Both cards in a card slab must have matching media options.

Jack K Williams Administration Building with pink flowers in the foreground

CTA Option

This example shows a featured card with no CTA. Both cards in a card slab must have matching CTA options.

Example 2

Bold Example

This example card slab uses the bold section style. It also has an optional CTA button and a gray background.

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

Media Option

This example shows a featured card with no media. Both cards in a card slab must have matching media options.

Jack K Williams Administration Building with pink flowers in the foreground

CTA Option

This example shows a featured card with a linked heading for its CTA. Both cards in a card slab must have matching CTA options.

Example 3

Elegant Example

This example card slab uses the elegant section style. It also includes an optional section icon and a maroon background.

Media Option

This example shows a featured card with no media. Both cards in a card slab must have matching media options.

CTA Option

This example shows a linked card. Because the whole card is linked, there is no additional CTA option. Both cards in a card slab must have matching CTA options.

Example 4

Bold Example

This example card slab uses the bold section style. It also includes an optional section icon, optional CTA button and no background.

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

Media Option

This example shows a featured card with an image. Both cards in a card slab must have matching media options.

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

CTA Option

This example shows a featured card with a link for its CTA. Both cards in a card slab must have matching CTA options.

Link
Example 5

Default Example

This example card slab uses the default section style. It also has an optional CTA button and a charcoal background.

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

Media Option

This example shows a featured card with an icon. Both cards in a card slab must have matching media options.

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

CTA Option

This example shows a featured card with a button for its CTA. Both cards in a card slab must have matching CTA options.

Button
Example 6

Elegant Example

This example card slab uses the elegant section style. It also includes an optional section icon and a gray background.

Media Option

This example shows a linked card with an image. Both cards in a card slab must have matching media options.

CTA Option

This example shows a linked card. Because the whole card is linked, there is no additional CTA option. Both cards in a card slab must have matching CTA options.

Example 7

Bold Example

This example card slab uses the bold section style. It also includes an optional CTA button and no background.

Button

Media Option

This example shows a linked card with an icon. Both cards in a card slab must have matching media options.

CTA Option

This example shows a linked card. Because the whole card is linked, there is no additional CTA option. Both cards in a card slab must have matching CTA options.