Video
2.12.1Card
Card Component in Bolt
Published
- History
-
View changes - Install
-
yarn add @bolt/components-card - Source code
-
View on Github - Dependencies
-
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
| — |
|
Video
Anthem: Service Desktop
Video
Video Meta Title Goes Here.
Cards in a band
Eyebrow
Headline
Remove Eyebrow and Button
Remove Image, Eyebrow, and Button
Individual themed cards in a band
Video
Anthem: Service Desktop
Video
Anthem: Service Desktop
Video
Anthem: Service Desktop
Individual themed cards in a band w/ background image
Video
Anthem: Service Desktop
Video
Anthem: Service Desktop
Video
Anthem: Service Desktop
Non-themed cards in a band w/ background image
Video
Anthem: Service Desktop
Video
Anthem: Service Desktop
Video
Anthem: Service Desktop
Personalized card test, client-rendered, with a large delay
Before:
Video
Personalized card, client-rendered, with a large delay (before)
After:
Video
Personalized card, client-rendered, with a large delay (after)
Personalized card test, client-rendered, with a small delay
Before:
Video
Personalized card, client-rendered, with a small delay (before)
After:
Video
Personalized card, client-rendered, with a small delay (after)
Personalized card test, client-rendered, without a delay
Before:
Video
Personalized card, client-rendered, without a delay (before)
After:
Video
Personalized card, client-rendered, without a delay (after)
Personalized card test, server-rendered, with a large delay
Before:
Video
Personalized card, server-rendered, w/ a large delay (before)
After:
Video
Personalized card, server-rendered, w/ a large delay (after)
Personalized card test, server-rendered, with a small delay
Before:
Video
Personalized card, server-rendered, w/ a small delay (before)
After:
Video
Personalized card, server-rendered, w/ a small delay (after)
Personalized card test, server-rendered, without delay
Before:
Video
Personalized card, server-rendered, without a delay (before)
After:
Video