Card
Getting Started
Install via NPM
npm install @bolt/components-card
Description
The preview card presents users as a way of taking action to discover more information. They commonly exist as links to more detailed long-form content, links off-site, and occasionally inline videos.
Best Practices
- Placement should be in a manner where it is easily scannable
- The headline should call out what the benefit is of clicking through
- Avoid cluttering a card with too many calls to action
- If the headline can work as link affordance without a button, don't have a button
- If the headline does not clearly invoke action, use a CTA at the bottom of the card to entice the user
Usage
{% include "@bolt-components-card/card.twig" with {
tag: "article",
contentTag: "div",
contentItems: [
{
pattern: "image",
src: "/pattern-lab/images/sample/anthem-video.jpg",
alt: "Anthem Video"
},
{
pattern: "eyebrow",
text: "Video"
},
{
pattern: "headline",
tag: "h3",
size: "large",
text: "Anthem: Service Desktop"
},
{
pattern: "text",
text: "Anthem debuts its next-generation service desktop, driving frictionless customer experiences."
},
{
pattern: "button",
width: "full",
text: "Get the report"
}
]
} only %}Schema
| Name | Type | Value(s) | Description | Default |
|---|---|---|---|---|
| tag | string
|
|
Html tag immediately within the |
N/A |
| contentTag | string
|
|
Html tag immediately within the |
N/A |
| theme | string
|
|
Bolt theme. |
N/A |
| url | string
| |
Providing a URL will make the entire card link to another resource. This is a future prop and does not do anything right now. |
N/A |
