Recommended | Not Recommended |
---|---|
Context Matters: Make sure the link text describes its destination or purpose clearly. Vague text like "Click here" should be avoided. | No JS Triggers: Do not use links for triggering JavaScript actions like opening modals; it's semantically incorrect. Use buttons or other appropriate elements for such interactions. |
Local vs External: Clearly distinguish between links that lead to other parts of the same website and those that lead to external sites. | Avoid Surprises: Ensure the link does what it promises. Don't direct users to unrelated content or make them download a file without a clear indication. |
Progressive Disclosure: Use links to guide the user to more detailed information, effectively organizing content without overwhelming them. | Don't Overlink: Avoid turning every other word in a paragraph into a hyperlink. It makes the text difficult to read and diminishes the impact of your links. |
{% include '@bolt-elements-text-link/text-link.twig' with {
content: 'This is a text link',
attributes: {
href: 'https://google.com'
}
} only %}
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
|
|
npm install @bolt/elements-text-link
<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.
{% 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 %}
<a href="https://google.com" target="_blank" rel="noopener" class="e-bolt-text-link">Click me to go to google.com</a>
<a>
element or the <button>
element is being used, the proper HTML attributes should be passed.
{% 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 %}
<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>
<img>
element is also acceptable.
This is a text link with icons before and after
{% set icon_custom %}
<img src="/images/placeholders/square.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 %}
<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>
{% 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 %}
<a href="https://google.com" class="e-bolt-text-link e-bolt-text-link--reversed-underline">This is a reversed underline text link</a>
// 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 %}
// 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>