Headline Links

Link styles for headline, subheadline, and eyebrow.

Important Notes:

Turn headline, subheadline, and eyebrow into links by passing proper HTML attributes via link_attributes. Same as Text Link element, depending on if the <a> or the <button> HTML element is being used, the proper HTML attributes should be passed.

Headline, subheadline, and eyebrow links created this way will utilize the reversed underline style from the Text Link element, icon is recommended to be used as a visual cue while underline is not visible. The twig template has reversed underline on by default, however, when writing plain HTML, this style needs to be written out manually using appropriate Text Link modifier classes.

link_attributes will turn the entire paragraph of text into a link, so it is not recommended for body text links. Instead, use the Text Link element or <a> HTML element for inline links within a paragraph of text.

Demo

Block Link

Eyebrow link

Headline link

Subheadline link

Inline Link

This is a paragraph of text. In the middle of it, it has an inline link. This inline link can be a Text Link element or an HTML anchor element.

Twig

{% set icon_chevron_right %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'chevron-right',
  } only %}
{% endset %}

{# Block Link #}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Eyebrow link',
  hierarchy: 'eyebrow',
  icon_after: icon_chevron_right,
  link_attributes: {
    href: '#!',
  },
} only %}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Headline link',
  hierarchy: 'headline',
  tag: 'h1',
  size: 'xxxlarge',
  icon_after: icon_chevron_right,
  link_attributes: {
    href: '#!',
  },
} only %}
{% include '@bolt-elements-type/type.twig' with {
  content: 'Subheadline link',
  hierarchy: 'subheadline',
  tag: 'h2',
  size: 'xlarge',
  icon_after: icon_chevron_right,
  link_attributes: {
    href: '#!',
  },
} only %}

{# Inline Link #}
{% include '@bolt-elements-type/type.twig' with {
  content: 'This is a paragraph of text. In the middle of it, it has <a href="#!">an inline link</a>. This inline link can be a Text Link element or an HTML anchor element.',
} only %}

HTML

<!-- Block Link -->
<h1 class="e-bolt-type e-bolt-type--size-xxxlarge e-bolt-type--headline"><a href="#!" class="e-bolt-text-link e-bolt-text-link--reversed-underline">Headline link<span class="e-bolt-text-link__icon-after"><!-- Icon or image markup --></span></a></h1>

<!-- Inline Link -->
<p class="e-bolt-type">This is a paragraph of text. In the middle of it, it has <a href="#!">an inline link</a>. This inline link can be a Text Link element or an HTML anchor element.</p>