/

<Card> Component

A component used to promote and link to marketing pages, always using a descriptive heading but optionally other elements as needed.

Share
Code Editor


<>

  <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '32px'}}>

    <Card

      link="https://hashicorp.com"

      thumbnail={{

        src: "https://www.datocms-assets.com/19447/1648680074-screenshot-2022-03-31-at-00-40-47.png",

        alt: "HashiConf Europe 2022 Recap"

      }}

      meta={[

        'August 15, 2022',

        'Category'

      ]}

      heading="Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…"

      description="Body small - 4 lines with character limit of 170. Leo mauris fermentum pharetra blandit tellus euismod pharetra. Duis egestas volutpat dolor…"

    />

    <Card

      appearance="dark"

      link="https://hashicorp.com"

      thumbnail={{

        src: "https://www.datocms-assets.com/19447/1648680074-screenshot-2022-03-31-at-00-40-47.png",

        alt: "HashiConf Europe 2022 Recap"

      }}

      meta={[

        'August 15, 2022',

        'Category'

      ]}

      heading="Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…"

      description="Body small - 4 lines with character limit of 170. Leo mauris fermentum pharetra blandit tellus euismod pharetra. Duis egestas volutpat dolor…"

    />

    <Card

      link="https://hashicorp.com"

      heading="Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…"

    />

  </div>

</>

Examples

Light theme

Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…

  • Category

Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…

Body small - 4 lines with character limit of 170. Leo mauris fermentum pharetra blandit tellus euismod pharetra. Duis egestas volutpat dolor…

  • August 15, 2022
  • Category

Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…

Dark theme

Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…

  • Category

Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…

Body small - 4 lines with character limit of 170. Leo mauris fermentum pharetra blandit tellus euismod pharetra. Duis egestas volutpat dolor…

  • August 15, 2022
  • Category

Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…

Using composable children

HashiConf Europe 2022 Recap

Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…

  • August 15, 2022
  • Category

Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…

Body small - 4 lines with character limit of 170. Leo mauris fermentum pharetra blandit tellus euismod pharetra. Duis egestas volutpat dolor…

Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…

Example arbitrary content

Using different heading elements

Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…

Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…

Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…

Base Props

NameDescription
children*
function
Children to render into the Card.
thumbnail
object
An image showcasing the card's destination.
Object contains nested props, see below:
thumbnail.src*
string
URL for the image
thumbnail.alt
string
Alternative text for the image
meta
array
Content shown above the card heading.
appearance
string
Styles the card with either a light or dark theme.
Options: "light", "dark"
heading
string
A bold headline describing the card's destination.
description
string
Text describing the card's destination.
link*
string
A link followed when the card is clicked.

Sub-component-specific Props

<Thumbnail />

NameDescription
src*
string
URL for the image
alt
string
Alternative text for the image

<Meta />

NameDescription
items
array
Content shown above the card heading.

<Heading />

NameDescription
as
string
Changes the HTML element used to wrap the heading text.
Options: "h2", "h3", "h4"
children*
string
Text to render into the component.

<Description />

NameDescription
children*
string
Text to render into the component.