Web Component Usage
Bolt Text is a web component, you can simply use
<bolt-card-replacement>
in the markup to make it render. Its inner content is comprised of
<bolt-card-replacement-media>,
<bolt-card-replacement-body>, and
<bolt-card-replacement-actions>.
This is an eyebrow
This is a headline
This is a paragraph.
Internal link
External link
<bolt-card-replacement>
<bolt-card-replacement-media>
<bolt-image src="/images/placeholders/landscape-16x9-mountains.jpg" alt="card-replacement media."></bolt-image>
</bolt-card-replacement-media>
<bolt-card-replacement-body>
<bolt-text eyebrow>This is an eyebrow</bolt-text>
<bolt-text headline>This is a headline</bolt-text>
<bolt-text>This is a paragraph.</bolt-text>
</bolt-card-replacement-body>
<bolt-card-replacement-actions>
<bolt-card-replacement-action url="https://pega.com">
Internal link
</bolt-card-replacement-action>
<bolt-card-replacement-action url="https://yahoo.com" external>
External link
</bolt-card-replacement-action>
</bolt-card-replacement-actions>
</bolt-card-replacement>
Simple Link Usage
The simplest way to make the whole card-replacement clickable is by passing a link address to the
url
prop on the main
<bolt-card-replacement>
component itself. Also include the
url-text
prop for accessibility.
This is a card-replacement with an overall link that makes the whole card-replacement clickable.
<bolt-card-replacement url="https://google.com" url-text="Go to google.com">
<bolt-card-replacement-media>
<bolt-image src="/images/placeholders/landscape-16x9-mountains.jpg" alt="card-replacement media."></bolt-image>
</bolt-card-replacement-media>
<bolt-card-replacement-body>This is a card-replacement with an overall link that makes the whole card-replacement clickable.</bolt-card-replacement-body>
</bolt-card-replacement>
Advanced Link Usage
Insert a
<bolt-card-replacement-link>
inside
<bolt-card-replacement>
and you can pass more than just
url.
<bolt-card-replacement-link>
is similar to
<bolt-link>. You can add custom attributes to
<bolt-card-replacement-link>
and insert a semantic
<a>
or
<button>
element inside.
Go to google.com
This is a card-replacement with an overall link that makes the whole card-replacement clickable.
<bolt-card-replacement>
<bolt-card-replacement-link custom-attribute="foo" html-attribute="bar">
<a href="http://google.com" target="_blank">Go to google.com</a>
</bolt-card-replacement-link>
<bolt-card-replacement-media>
<bolt-image src="/images/placeholders/landscape-16x9-mountains.jpg" alt="card-replacement media."></bolt-image>
</bolt-card-replacement-media>
<bolt-card-replacement-body>This is a card-replacement with an overall link that makes the whole card-replacement clickable.</bolt-card-replacement-body>
</bolt-card-replacement>
Nested Links
While making the whole card-replacement clickable, you are still able to insert nested links as needed. Any
<bolt-link>,
<bolt-card-replacement-link>, and
<bolt-card-replacement-action>
will work as expected.
This is a card-replacement with an overall link that makes the whole card-replacement clickable, while the body can still have text links that would go somewhere else.
Internal link
External link
<bolt-card-replacement url="https://google.com">
<bolt-card-replacement-media>
<bolt-ratio aspect-ratio-height="9" aspect-ratio-width="16">
<bolt-video data-setup='{"techOrder": ["Html5"], "resizeManager": false}' video-id="3861325118001" account-id="1900410236" show-meta show-meta-title player-id="r1CAdLzTW" controls></bolt-video>
</bolt-ratio>
</bolt-card-replacement-media>
<bolt-card-replacement-body>
This is a card-replacement with an overall link that makes the whole card-replacement clickable, while the body can still have <bolt-link target="_blank" url="https://boltdesignsystem.com/docs">text links</bolt-link> that would go somewhere else.
</bolt-card-replacement-body>
<bolt-card-replacement-actions>
<bolt-card-replacement-action url="https://pega.com">
Internal link
</bolt-card-replacement-action>
<bolt-card-replacement-action url="https://yahoo.com" external>
External link
</bolt-card-replacement-action>
</bolt-card-replacement-actions>
</bolt-card-replacement>