tabweb

Cards

Cards are flexible and extensible content containers with multiple variants and options.

Headers & body styles

Combine a header, a tinted background, or drop the border for a simpler look.

Card title

Simple card

Card title

Card with header background

Card title

Card without border

Card title

Subtitle

Card with title and subtitle

Link hover effects

Add motion cues when the whole card acts as a link.
Default hover effect
Rotate hover effect
Pop hover effect

Rotation & state

Tilt a card slightly, or mark it as active or inactive.
Card rotate end
Card rotate start

This is a card with active state.

This is some text inactive state.

Icon & background accents

Draw attention with a stamp icon or a tinted background.

Card with icon bg

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.

Card with primary light background

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.

Card with large stamp

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.

Status indicators

Mark a card's state with a colored edge on any side.

Card with top status

This card shows a top edge indicator.

Card with bottom status

This card shows a bottom edge indicator.

Card with side status

This card shows a left side edge indicator.

Ribbons & progress

Flag content with a ribbon, or track progress right inside the card.

Card with top ribbon

This card displays a bookmark ribbon on top.

NEW

Card with text ribbon

This card displays a text badge ribbon.

Card with progress bar

This card tracks completion at the top edge.

Stacked card

This card renders a layered stack appearance.

Card images

Pair a card with an image on the left, right, top, or bottom.
Start Image

Card with left side image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.

Card with right side image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.

Card with top image

Card with top image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.

Card with bottom image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.

Footers

Add a footer for metadata, a single action, or a group of buttons.

Card with footer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt.

This is standard card footer

Card with transparent footer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt.

This is transparent card footer

Card with footer button

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Card with footer buttons

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Nested & grouped cards

Combine cards inside a card, a full-bleed group, or a matched-height deck.

Cards inside card

First card

Nested card content for First.

Second card

Nested card content for Second.

Third card

Nested card content for Third.

First card

Grouped seamless card content.

Second card

Grouped seamless card content.

Third card

Grouped seamless card content.

Deck card 1

This is a wider card with supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago

Deck card 2

This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago

Deck card 3

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content to demonstrate equal height action.
Last updated 3 mins ago