Skip to main content

Card

A content surface with multiple configurations.

Polymorphic Component

By default, content is rendered inside a <div>, but this can be overriden by passing any valid tag name or component with the as prop.

Examples​

Basic Card​

Just a white box!
<Card>
  Just a white box!
</Card>

With Content and Footer​

Now we're talkin'!
Pretty cool that the footer of the other card sticks to the bottom even though it's shorter...
<Card>
  <CardContent
    image={<CardImage label={<Label ... />} ... />}
  >
    ...
  </CardContent>
  <CardFooter>
    <Button ... />
    <Button ... />
  </CardFooter>
</Card>

With Landscape Orientation​

Now we're talkin'!
<Card
  orientation="landscape"
>
  ...
</Card>

With Surface Colors​

Sint eiusmod amet et irure aute consequat voluptate do. Ullamco irure dolor in anim commodo anim minim commodo consectetur eu sint eiusmod nostrud fugiat.
Tempor pariatur ut minim nulla proident dolor proident quis magna est deserunt dolore. Eu nulla dolor labore quis mollit fugiat cillum ullamco deserunt ea anim ex cupidatat.
In in magna aliquip aute. Officia sunt eu ut ex laboris cillum ea Lorem dolor mollit nostrud ipsum ut.
Eiusmod laboris qui Lorem minim cillum aliquip do aliquip nulla incididunt et quis. Ullamco adipisicing aliqua ullamco minim esse culpa et veniam quis. Laboris ad laborum ut est eu cupidatat est eu eu incididunt.
Irure amet enim sit sint. Enim ipsum incididunt id aliqua laboris ea Lorem adipisicing elit.
Ullamco adipisicing nisi proident qui nisi Lorem ex sit commodo nisi enim. Occaecat eu culpa elit laboris proident irure ullamco.
<Card
  surface="..."
>
  ...
</Card>

With No Frame​

Sint eiusmod amet et irure aute consequat voluptate do. Ullamco irure dolor in anim commodo anim minim commodo consectetur eu sint eiusmod nostrud fugiat.
Tempor pariatur ut minim nulla proident dolor proident quis magna est deserunt dolore.
In in magna aliquip aute. Officia sunt eu ut ex laboris cillum ea Lorem dolor mollit nostrud ipsum ut.
Eiusmod laboris qui Lorem minim cillum aliquip do aliquip nulla incididunt et quis. Ullamco adipisicing aliqua ullamco minim esse culpa et veniam quis.
Irure amet enim sit sint. Enim ipsum incididunt id aliqua laboris ea Lorem adipisicing elit.
Ullamco adipisicing nisi proident qui nisi Lorem ex sit commodo nisi enim. Occaecat eu culpa elit laboris proident irure ullamco.
<Card
  ...
  frameless
>
  ...
</Card>

Media Card​

Title goes here

5 min read
Reprehenderit in labore id in ad ullamco nisi reprehenderit ex voluptate tempor.
Tags

Title goes here

5 min read

Adipisicing esse velit pariatur commodo exercitation do esse laboris consequat anim in ea. Consequat velit tempor fugiat dolor excepteur id dolore sunt commodo dolore mollit do laborum. Lorem laborum excepteur duis quis minim qui tempor velit id id.

Dolore est excepteur qui dolor ipsum occaecat officia anim Lorem pariatur et et mollit ad. Incididunt nostrud excepteur eiusmod excepteur esse. Velit sint nulla proident occaecat est consequat reprehenderit Lorem enim aliquip.

Tags

Title goes here

5 min read
Reprehenderit in labore id in ad ullamco nisi reprehenderit ex voluptate tempor.
Tags

Title goes here

5 min read

Adipisicing esse velit pariatur commodo exercitation do esse laboris consequat anim in ea.

Tags
<MediaCard
  orientation="portrait(default)|landscape"
>
  <MediaCardContent
    image={<CardImage aspectRatio="..." ... />}
    label={<Label ... />}
    title="Title goes here"
    tags={<CardTags ... />}
    meta={<CardMeta ... />}
  >
    Body copy goes here
  </MediaCardContent>
</MediaCard>

Before & After Card​

Title goes here

Some meta
(12345)
Reprehenderit in labore id in ad ullamco nisi reprehenderit ex voluptate tempor.
Tags

Title goes here

Some meta
(12345)

Adipisicing esse velit pariatur commodo exercitation do esse laboris consequat anim in ea. Consequat velit tempor fugiat dolor excepteur id dolore sunt commodo dolore mollit do laborum. Lorem laborum excepteur duis quis minim qui tempor velit id id.

Tags
<BeforeAfterCard
  orientation="portrait(default)|landscape"
>
  <BeforeAfterCardContent
    images={<BeforeAfterCardImages 
      aspectRatio="..." 
      beforeProps={{
        src: '',
        label: ''
      }}
      afterProps={{
        src: '',
        label: ''
      }}
      ... 
    />}
    label={<Label ... />}
    title="Title goes here"
    rating={<CardRating readOnly ... />}
    tags={<CardTags ... />}
    meta={<CardMeta ... />}
  >
    Body copy goes here
  </BeforeAfterCardContent>
</BeforeAfterCard>

Props​

NameTypeDefault ValueRequiredDescription
framelessbooleanfalseNoShould the card have no frame?
orientationCardOrientation | "portrait" | "landscape"CardOrientation.PortraitNoShould the card be tall or wide?
surface"dark" | CardSurface | "white" | "light" | "brand-bold" | "brand-light" | "brand-lightest"CardSurface.WhiteNoThe surface color