text link

text link docs

Text Link

Underlined text that indicates interactivity.

Published Last updated: 5.5.0 Change log Github NPM
Twig Usage 
{% include '@bolt-elements-text-link/text-link.twig' with {
  content: 'This is a text link',
  attributes: {
    href: 'https://google.com'
  }
} only %}
 Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

 object —
  • —
content *

Content of the text link.

 any —
  • —
icon_before

Append an icon before the text. Icon element is recommended. However, <img> elements are also acceptable.

 any —
  • —
icon_after

Append an icon after the text. Icon element is recommended. However, <img> elements are also acceptable.

 any —
  • —
reversed_underline

Set the underline style to appear on hover instead of being always visible.

 boolean false
  • —
expand_click_target

Expand the click target to cover up the entire area of its closest container that is not positioned static.

 boolean false
  • —
Install Install 
npm install @bolt/elements-text-link
Dependencies @bolt/core-v3.x @bolt/elements-icon

text link

Basic Text Link A text link is generally an inline interactive element that is styled as underlined text. Its main purpose is to help the user navigate (sometimes perform a function). Both <a class="e-bolt-text-link"> and <a> are acceptable at rendering a text link, though the Twig template is the recommended usage for Drupal. Important Notes: There are advanced features with the text link element, class="e-bolt-text-link" is required to get those features. Reference respective doc page for each feature. Only text should be passed to the content prop. <span>, <em>, and <strong> tags are allowed. Text Link element is a replacement for the Link component. Demo
Light Click me to go to google.com
Dark Click me to go to google.com
Twig
{% include '@bolt-elements-text-link/text-link.twig' with {
  content: 'Click me to go to google.com',
  attributes: {
    href: 'https://google.com',
    target: '_blank',
    rel: 'noopener'
  }
} only %}
HTML
<a href="https://google.com" target="_blank" rel="noopener" class="e-bolt-text-link">Click me to go to google.com</a>

text link button

Text Link as a <button> Element When appropriate, a <button> element can use the text link style. For example, the text link performs a function such as opening a modal or popover. Important Notes: If a text link serves no navigational purpose, the proper type attribute must be set: button, submit, or reset. Demo
Twig
{% include '@bolt-elements-text-link/text-link.twig' with {
  content: 'This looks like a text link but semantically is a reset button',
  attributes: {
    type: 'reset',
  }
} only %}
HTML
<button type="reset" class="e-bolt-text-link">This looks like a text link but semantically is a reset button</button>

text link attributes

HTML Attributes for Text Link Depending on if the <a> element or the <button> element is being used, the proper HTML attributes should be passed. Important Notes: <a> requires the href attribute. <button> requires the type attribute. Demo This text link has the "href", "target", "rel" and "id" attributes
Twig
{% include '@bolt-elements-text-link/text-link.twig' with {
  content: 'This text link has the "href", "target", "rel" and "id" attributes',
  attributes: {
    href: 'https://google.com',
    target: '_blank',
    rel: 'noopener',
    id: 'js-bolt-some-unique-id'
  }
} only %}
HTML
<a href="https://google.com" target="_blank" rel="noopener" id="js-bolt-some-unique-id" class="e-bolt-text-link">This text link has the "href", "target", "rel" and "id" attributes</a>

text link with icon

Text Link with Icon Icons can be used in tandem with a text link. An icon can be placed before and/or after the text. The icon component is recommended for appending icons. However, an <img> element is also acceptable. Important Notes: Icons are set inline with text so icon size will grow or shrink with text size. The size and background props for the icon component are not well supported in this scenario. When writing in plain HTML, all white space must be eliminated to have the text underline and icon display correctly. The markup must be written all in one line and spaces between HTML elements must be removed. When writing in plain HTML, <span class="e-bolt-text-link__icon-before"> and <span class="e-bolt-text-link__icon-after"> are required to wrap around the icon markup. The wrapper ensures that the icon will always wrap with the final word of the text. It will never wrap to the next line on its own. Demo

This is a text link with icons before and after

This is a text link with an icon before

This is a text link with an icon after
Twig
{% set icon_custom %}
  <img src="/images/placeholders/500x500.jpg">
{% endset %}
{% set icon_chevron_down %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'chevron-down',
  } only %}
{% endset %}

{% include '@bolt-elements-text-link/text-link.twig' with {
  content: 'This is a text link with icons before and after',
  icon_before: icon_custom,
  icon_after: icon_chevron_down,
  attributes: {
    href: 'https://google.com',
  }
} only %}
HTML
<a href="https://google.com" class="e-bolt-text-link"><span class="e-bolt-text-link__icon-before"><!-- Icon or image markup --></span>This is a text link with icons before and after<span class="e-bolt-text-link__icon-after"><!-- Icon or image markup --></span></a>

text link reversed underline

Reversed Underline Text Link Text link has a style variant called reversed underline. This is commonly used in headlines with icons because an icon may already indicate interactivity, reducing the need for the underline. The underline will appear on hover instead of being visible always. Important Notes: It is recommended to use this style variant while having either an icon before or after. Demo This is a reversed underline headline text link This is a reversed underline body text link
Twig
{% include '@bolt-elements-text-link/text-link.twig' with {
  content: 'This is a reversed underline text link',
  icon_after: icon_chevron_right,
  reversed_underline: true,
  attributes: {
    href: 'https://google.com',
  }
} only %}
HTML
<a href="https://google.com" class="e-bolt-text-link e-bolt-text-link--reversed-underline">This is a reversed underline text link</a>

text link expand click target

Expand Click Target The text link will increase its click target to cover a particular block of content. Important Notes: When creating a block text link (such as trying to make an entire card clickable while retaining the headline as the link) with the expand_click_target prop, the text link must be placed into a container that is not positioned static (e.g. absolute, fixed, relative, or sticky), and the text must explain clearly the block of content that it’s trying to cover. Only 1 block text link should be used within a particular block of content. Demo
A mountain This is a block text link, its click target will cover the entire area of its closest container that is not positioned static Hover over this box, the whole thing is clickable.
Twig
// Wrap this text link with a container that is not positioned static.
{% include '@bolt-elements-text-link/text-link.twig' with {
  content: 'This is a block text link, its click target will cover the entire area of its closest container that is not positioned static.',
  expand_click_target: true,
  attributes: {
    href: 'https://google.com',
  }
} only %}
HTML
// Wrap this text link with a container that is not positioned static.
<a href="https://google.com" class="e-bolt-text-link e-bolt-text-link--expand-click-target">This is a block text link, its click target will cover the entire area of its closest container that is not positioned static.</a>