Overview
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",
contentItems: [
{
pattern: "image",
src: "/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
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
|
|
Html tag immediately within the |
string
| — |
|
|
|
Html tag immediately within the |
string
| — |
|
|
|
Bolt theme. |
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. |
string
| — |
|