This is an eyebrowThis is a headlineThis is a paragraph.Internal linkExternal linkDownload Icon No Icon
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>.
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.
<bolt-card-replacement url="https://google.com" url-text="Go to google.com">
<bolt-card-replacement-media>
<img src="/images/placeholders/16x9.jpg" alt="card-replacement-media." class="e-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.
<bolt-card-replacement>
<bolt-card-replacement-link custom-attribute="foo" html-attribute="bar">
<a href="https://google.com" target="_blank" rel="noopener">Go to google.com</a>
</bolt-card-replacement-link>
<bolt-card-replacement-media>
<img src="/images/placeholders/16x9.jpg" alt="card-replacement-media." class="e-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.
<bolt-card-replacement url="https://google.com">
<bolt-card-replacement-media>
<div class="e-bolt-ratio e-bolt-ratio--wide">
<video-js data-account="1900410236" data-player="O3FkeBiaDz" data-embed="default" data-video-id="3974147489001" controls class="c-base-video"></video-js>
</div>
</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 <a target="_blank" href="https://boltdesignsystem.com/docs" rel="noopener" class="e-bolt-text-link">text links</a> that would go somewhere else.
</bolt-card-replacement-body>
<bolt-card-replacement-actions>
<bolt-card-replacement-action url="!#">Internal link</bolt-card-replacement-action>
<bolt-card-replacement-action url="https://yahoo.com" external>External link</bolt-card-replacement-action>
<bolt-card-replacement-action url="https://yahoo.com">Download Icon <span slot="icon"><svg class="e-bolt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true"><path fill="#001F5F" fill-rule="evenodd" d="M16 25.72c-.36 0-.71-.12-.99-.37l-7.63-6.68c-.41-.36-.45-.99-.09-1.41.36-.41.99-.45 1.41-.09l6.3 5.51V1c0-.55.45-1 1-1s1 .45 1 1v21.68l6.3-5.51a.99.99 0 011.41.09c.37.41.33 1.05-.09 1.41l-7.63 6.68c-.29.25-.63.37-.99.37zm14-.97c0-.55.45-1 1-1s1 .45 1 1V30c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2v-5.25c0-.55.45-1 1-1s1 .45 1 1V30h28v-5.25z" clip-rule="evenodd"/></svg></span></bolt-card-replacement-action>
<bolt-card-replacement-action url="https://yahoo.com" icon="none">No Icon</bolt-card-replacement-action>
</bolt-card-replacement-actions>
</bolt-card-replacement>