Bolt Design System

This is an eyebrow

This is a headline

This is a paragraph.

Internal link

External link

Download 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>.

<bolt-card-replacement>
  <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>
    <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="!#">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"><g fill="#151619" fill-rule="evenodd" clip-rule="evenodd"><path d="M28.1 28.6H3.9c-.9 0-1.7.8-1.7 1.7S3 32 3.9 32h24.3c.9 0 1.7-.8 1.7-1.7-.1-.9-.8-1.7-1.8-1.7M15 25.5c.2.3.6.5 1 .5s.8-.2 1-.5l9.1-10.9c.3-.4.4-.9.1-1.3-.2-.4-.7-.7-1.2-.7h-4.4V0h-9.1v12.7H6.9c-.5 0-.9.3-1.2.7-.1.2-.1.3-.1.5 0 .3.1.5.3.7z"/></g></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>

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"><g fill="#151619" fill-rule="evenodd" clip-rule="evenodd"><path d="M28.1 28.6H3.9c-.9 0-1.7.8-1.7 1.7S3 32 3.9 32h24.3c.9 0 1.7-.8 1.7-1.7-.1-.9-.8-1.7-1.8-1.7M15 25.5c.2.3.6.5 1 .5s.8-.2 1-.5l9.1-10.9c.3-.4.4-.9.1-1.3-.2-.4-.7-.7-1.2-.7h-4.4V0h-9.1v12.7H6.9c-.5 0-.9.3-1.2.7-.1.2-.1.3-.1.5 0 .3.1.5.3.7z"/></g></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>