Card | Components

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.

ReactVanilla

<>
  <Card>Card</Card>
</>

<>
  <Card>Card</Card>
</>

<div class="swan-card">Card</div>

<div class="swan-card">Card</div>

Bordered

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

ReactVanilla

<>
  <Card bordered>Card with border</Card>
</>

<>
  <Card bordered>Card with border</Card>
</>

<div class="swan-card swan-card-bordered">Card with border</div>

<div class="swan-card swan-card-bordered">Card with border</div>

Full Bleed

Use fullBleed to remove the padding.

ReactVanilla

<>
  <Card fullBleed>Card with full bleed</Card>
</>

<>
  <Card fullBleed>Card with full bleed</Card>
</>

<div class="swan-card swan-card-full-bleed">Card with full bleed</div>

<div class="swan-card swan-card-full-bleed">Card with full bleed</div>

Even Height

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

ReactVanilla

<GridContainer>
  <Row>
    <Column span={4}>
      <Card evenHeight>
        Even Height Card. The amount of content in this card makes it the
        tallest in the row.
      </Card>
    </Column>
    <Column span={4}>
      <Card evenHeight>Even Height Card.</Card>
    </Column>
    <Column span={4}>
      <Card>Default Card.</Card>
    </Column>
  </Row>
</GridContainer>

<GridContainer>
  <Row>
    <Column span={4}>
      <Card evenHeight>
        Even Height Card. The amount of content in this card makes it the
        tallest in the row.
      </Card>
    </Column>
    <Column span={4}>
      <Card evenHeight>Even Height Card.</Card>
    </Column>
    <Column span={4}>
      <Card>Default Card.</Card>
    </Column>
  </Row>
</GridContainer>

<div>
  <div class="swan-grid-container">
    <div class="swan-row">
      <div class="swan-col-4">
        <div class="swan-card swan-card-even-height">
          Even Height Card. The amount of content in this card makes it the
          tallest in the row.
        </div>
      </div>
      <div class="swan-col-4">
        <div class="swan-card swan-card-even-height">Even Height Card.</div>
      </div>
      <div class="swan-col-4">
        <div class="swan-card">Default Card.</div>
      </div>
    </div>
  </div>
</div>

<div>
  <div class="swan-grid-container">
    <div class="swan-row">
      <div class="swan-col-4">
        <div class="swan-card swan-card-even-height">
          Even Height Card. The amount of content in this card makes it the
          tallest in the row.
        </div>
      </div>
      <div class="swan-col-4">
        <div class="swan-card swan-card-even-height">Even Height Card.</div>
      </div>
      <div class="swan-col-4">
        <div class="swan-card">Default Card.</div>
      </div>
    </div>
  </div>
</div>

As a link

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

Only wrap the Link around the content that should be included in the accessible name, which is usually the title or call-to-action.

ReactVanilla

<Card skin="link">
  Card.{' '}
  <Link covering href="#">
    Link
  </Link>
</Card>

<Card skin="link">
  Card.{' '}
  <Link covering href="#">
    Link
  </Link>
</Card>

<div class="swan-card">
  Card. <a href="#" class="swan-link swan-link-covering">Link</a>
</div>

<div class="swan-card">
  Card. <a href="#" class="swan-link swan-link-covering">Link</a>
</div>

Use skin="unstyled" on the Link to remove the normal link styling.

ReactVanilla

<Card skin="link">
  Card.{' '}
  <Link covering href="#" skin="unstyled">
    Link
  </Link>
</Card>

<Card skin="link">
  Card.{' '}
  <Link covering href="#" skin="unstyled">
    Link
  </Link>
</Card>

<div class="swan-card">
  Card.
  <a href="#" class="swan-link swan-link-covering swan-link-skin-unstyled"
    >Link</a
  >
</div>

<div class="swan-card">
  Card.
  <a href="#" class="swan-link swan-link-covering swan-link-skin-unstyled"
    >Link</a
  >
</div>

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

This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.

See core props for additional props that can be applied to this component.

prop	type	required	description	default
skin	`"link" \| null`	false	Use "link" if you want to render card as a link or <Link> as a Card covering	null
fullBleed	`boolean \| null`	false	Whether or not the content should expand to the edges of the Card	false
bordered	`boolean \| null`	false	Whether or not the card should have a border	false
evenHeight	`boolean \| null`	false	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	false