// Standard card-replacement
{% include "@bolt-components-card-replacement/card-replacement.twig" with {
media: {
image: {
src: "/images/placeholders/landscape-16x9-mountains.jpg",
alt: "Image alt.",
},
},
body: {
eyebrow: "This is an eyebrow",
headline: "This is a headline",
paragraph: "This is a paragraph.",
},
actions: [
{
text: "This is a button",
url: "https://pega.com",
},
],
} only %}
// Custom section content
{% include "@bolt-components-card-replacement/card-replacement.twig" with {
media: {
content: "Pass custom content to the card-replacement media.",
},
body: {
content: "Pass custom content to the card-replacement body.",
},
} only %}
// Custom overall content
{% include "@bolt-components-card-replacement/card-replacement.twig" with {
content: "Pass completely custom content to the card-replacement, without the styles of the card-replacement body.",
} only %}
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
|
attributes
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
|
tag
|
HTML tag that contains the card-replacement content. |
string
|
article
|
|
|
horizontal
|
Displays the card media + body horizontally. |
boolean
| — |
|
|
height
|
Controls the height of the card-replacement to auto fit to content or the full height of the column in a grid. |
string
|
full
|
|
|
border_radius
|
Controls the border-radius of the card-replacement. |
string
|
small
|
|
|
spacing
|
Controls the spacing of the card-replacement. |
string
|
medium
|
|
|
theme
|
Controls the theme of the individual card-replacement. |
string
|
none
|
|
|
link
|
Providing a link will make the whole card-replacement clickable. |
object
| — |
|
|
media
|
Media section of the card-replacement, accepts either image and video, or custom content. |
object
| — |
|
|
body
|
Body section of the card-replacement, accepts pre-configured eyebrow, headline, and paragraph or custom content. |
object
| — |
|
|
actions
|
Actions section of the card-replacement, accepts buttons. |
array
| — |
|
|
content
|
Content will override media, body, and actions props. Use this to build a completely cuztomized card-replacement. |
string
, array
, object
|
— |
|
items
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
|
text
|
Action link text. |
string
| — |
|
|
url
|
Action link url. |
string
| — |
|
|
external
|
Indicate if this is an external link. If true, the link will open in a new tab. |
boolean
| — |
|
|
icon
|
Allows user to specify the icon showed on the action button. If no icon is provided in this prop, the default behavior will take place and the icon shown will depend on if the URL is internal or external. Alternatively, providing "none" as the value can show no icon. |
string
| — |
|
|
attributes
|
A Drupal-style attributes object with extra attributes to append to this component. Attributes are added to the bolt-button element inside the action item. |
object
| — |
|
|
raised
|
Manually switch on / off the raised (shadow + animation effect) treament. By default this config option is applied if the card-replacement contains a bolt-card-replacement-link OR includes the |
boolean
| — |
|
npm install @bolt/components-card-replacement