Layout
Cards
Surface treatments — headers, footers, images, stats, tabs, and lists composed inside a Card.
Looking for every Card prop? See Components › Cards.
Simple
Bare card surface with content only.
Open
With header
Card with a divided header.
Open
With header and footer
Card with header, content, and a footer action bar.
Open
With image
Card with a top media block.
Open
With image overlay
Hero card with text overlaid on the image.
Open
With actions
Header with a trailing menu action.
Open
With stats
Card with an inline stats grid.
Open
With list
Card containing a divided list of items.
Open
With grid
Card containing a media thumbnail grid.
Open
With tabs
Card with section tabs in the header.
Open