<Card> Component
A component used to promote and link to marketing pages, always using a descriptive heading but optionally other elements as needed.
Code Editor
<><div style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '32px'}}><Cardlink="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…"isExternal/><Cardappearance="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…"/><Cardlink="https://hashicorp.com"heading="Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…"/></div></>
Examples
Light theme
Dark theme
Use Case Cards with Product Badges
Card variants
<PersonCard />
<EventCard />
<CareerCard />
<PartnerCard />
<ResourceCard />
<CustomerStoryCard />
<NewsroomCard />
<BlogCard />
Base Props
| Name | Description |
|---|---|
withArrowboolean | Allows the arrow at the bottom of the card to render. Defaults to true. |
thumbnailobject | An image showcasing the card's destination. Object contains nested props, see below: |
thumbnail.src*string | URL for the image |
thumbnail.altstring | Alternative text for the image |
metaarray | Content shown above the card heading. |
appearancestring | Styles the card with either a light or dark theme. |
headingstring | A bold headline describing the card's destination. |
productBadgesobject | A list of ProductBadges. Object contains nested props, see below: |
productBadges.appearancestring | Styles the ProductBadges with either a light or dark theme. |
productBadges.badgesarray | A list of ProductBadges. See props for the ProductBadges component here |
descriptionstring | Text describing the card's destination. |
link*string | A link followed when the card is clicked. |
isExternalboolean | If true, card link opens in new tab |