<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Card

A simple container for grouping related content.

Use Card...

  • To bring hierarchy to content by grouping related things together.
  • To segment a section of content apart from the rest visually.

Don't use Card...

  • To frame an entire page section. Instead, frame groups within a given page section.
  • To group items related to a product, such as an image product, name, and actions related to that product. Use a Standard Tile instead.

The preview has been updated.

Bordered

Use bordered to add a border, making it more visible against white backgrounds.

The preview has been updated.

Full Bleed

Use fullBleed to remove the padding.

The preview has been updated.

Even Height

Use evenHeight to make Cards within the same Grid row grow vertically to match the height of the largest card.

The preview has been updated.

As a link

Use skin="link" and Link with covering to make the card behave as a Link. Refer to covering guidelines.

The preview has been updated.

Layout

Cards are containers, flexible enough to handle a wide array of layouts.

We recommend not combining Card with another SWAN component, as you may get unexpected layout and/or behavior. Treat it simply as a container into which you put other components. In particular, don't combine a Card Container with a grid element.

Hierarchy

Cards can be used to highlight content apart from the rest on a page.

Visual design

Use bgc to apply a background color to a Card.

Props

Card
See core props for additional props that can be applied to this component.
proptyperequireddefault
bordered
Whether or not the card should have a border
booleannull
false
false
evenHeight
Whether or not this Card should stretch its height to fill its parent GridContainer Row This is useful if you have a Row of Cards and you want them to all be the same height
booleannull
false
false
fullBleed
Whether or not the content should expand to the edges of the Card
booleannull
false
false
skin
Use "link" if you want to render card as a link or <Link> as a Card covering
"link"null
false
null