<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…

Use Case Cards with Product Badges

HashiConf Europe 2022 Recap
  • USE CASE

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…

waypoint

consul

HashiConf Europe 2022 Recap
  • USE CASE

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…

terraform

consul

HashiConf Europe 2022 Recap
  • USE CASE

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…

nomad

vault

terraform

Card variants

<PersonCard />

HashiConf Europe 2022 Recap

Firstname Lastname

City, Country

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

boundary

HashiConf Europe 2022 Recap

Firstname Lastname

City, Country

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

boundary

<EventCard />

  • August 15, 2022
  • Webinar

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

nomad

Register for webinar
  • August 15, 2022
  • Webinar

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

nomad

Register for webinar

<CareerCard />

  • Remote

City, Country

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

nomad

  • Onsite

City, Country

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

nomad

<PartnerCard />

Partner
  • Technology Partner

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

waypoint

consul

Partner
  • Technology Partner

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

waypoint

consul

<ResourceCard />

HashiConf Europe 2022 Recap
  • August 15, 2022
  • Category

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

waypoint

consul

HashiConf Europe 2022 Recap
  • August 15, 2022
  • Category

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

waypoint

consul

<CustomerStoryCard />

Customer Story
  • Case Study

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

nomad

Customer Story
  • Case Study

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

nomad

<NewsroomCard />

Newsroom
  • August 15, 2022

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

Newsroom
  • August 15, 2022

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

<BlogCard />

  • August 15, 2022
  • Category

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

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

nomad

  • August 15, 2022
  • Category

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

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

nomad

Base Props

NameDescription
withArrow
boolean
Allows the arrow at the bottom of the card to render. Defaults to true.
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.
productBadges
object
A list of ProductBadges.
Object contains nested props, see below:
productBadges.appearance
string
Styles the ProductBadges with either a light or dark theme.
Options: "light", "dark"
productBadges.badges
array
A list of ProductBadges. See props for the ProductBadges component here
description
string
Text describing the card's destination.
link*
string
A link followed when the card is clicked.