Open UIOpen UI GitHub

Card

Anatomy

None of the Card JSON /resources define an anatomy.

Concepts

meta
image caps
image overlay
illustration
media
image
preview
An image of the media concept on a Card component in Ant Design.
meta
An image of the media concept on a Card component in Bootstrap.
image caps
An image of the media concept on a Card component in Bootstrap.
image overlay
An image of the media concept on a Card component in Lightning Design System.
illustration
An image of the media concept on a Card component in Material Components Web.
An image of the media concept on a Card component in Semantic UI.
image
An image of the media concept on a Card component in Stardust UI.
preview

An image of the basic concept on a Card component in Ant Design.
An image of the basic concept on a Card component in Bootstrap.
An image of the basic concept on a Card component in Lightning Design System.
An image of the basic concept on a Card component in Material Components Web.
An image of the basic concept on a Card component in Semantic UI.
An image of the basic concept on a Card component in Stardust UI.

title
header
An image of the header concept on a Card component in Ant Design.
title
An image of the header concept on a Card component in Bootstrap.
An image of the header concept on a Card component in Lightning Design System.
An image of the header concept on a Card component in Semantic UI.
An image of the header concept on a Card component in Stardust UI.

default
small
medium
large
An image of the size concept on a Card component in Ant Design.
default
An image of the size concept on a Card component in Ant Design.
small
An image of the size concept on a Card component in Stardust UI.
small
An image of the size concept on a Card component in Stardust UI.
medium
An image of the size concept on a Card component in Stardust UI.
large

extra
multiple actions
single action
top controls
An image of the top-right actions concept on a Card component in Ant Design.
extra
An image of the top-right actions concept on a Card component in Lightning Design System.
multiple actions
An image of the top-right actions concept on a Card component in Lightning Design System.
single action
An image of the top-right actions concept on a Card component in Stardust UI.
top controls

inner
nested
wrapped
An image of the nested concept on a Card component in Ant Design.
inner
An image of the nested concept on a Card component in Lightning Design System.
An image of the nested concept on a Card component in Lightning Design System.
wrapped

tabs
pills
An image of the navigation concept on a Card component in Ant Design.
tabs
An image of the navigation concept on a Card component in Bootstrap.
pills
An image of the navigation concept on a Card component in Bootstrap.
tabs

An image of the footer concept on a Card component in Bootstrap.
An image of the footer concept on a Card component in Lightning Design System.
An image of the footer concept on a Card component in Stardust UI.

borderless
quiet
An image of the borderless concept on a Card component in Ant Design.
An image of the borderless concept on a Card component in Stardust UI.
quiet

An image of the loading concept on a Card component in Ant Design.
An image of the loading concept on a Card component in Lightning Design System.

An image of the group concept on a Card component in Bootstrap.
An image of the group concept on a Card component in Semantic UI.

An image of the horizontal concept on a Card component in Bootstrap.
An image of the horizontal concept on a Card component in Stardust UI.

raised
elevated
An image of the elevation concept on a Card component in Semantic UI.
raised
An image of the elevation concept on a Card component in Stardust UI.
elevated

An image of the fluid concept on a Card component in Semantic UI.
An image of the fluid concept on a Card component in Stardust UI.

An image of the grid concept on a Card component in Ant Design.

An image of the hoverable concept on a Card component in Ant Design.

An image of the deck concept on a Card component in Bootstrap.

An image of the outlined concept on a Card component in Material Components Web.

An image of the link concept on a Card component in Semantic UI.

An image of the metadata concept on a Card component in Semantic UI.

An image of the centered concept on a Card component in Stardust UI.

An image of the disabled concept on a Card component in Stardust UI.

An image of the expandable concept on a Card component in Stardust UI.

An image of the focusable concept on a Card component in Stardust UI.

An image of the inverted concept on a Card component in Stardust UI.

An image of the selected concept on a Card component in Stardust UI.

Notes