link

link docs

2.9.2

Link

Link Component

Published

History
View changes
Install
yarn add @bolt/components-link
Source code
View on Github
Dependencies
  • @bolt/components-icon
  • @bolt/core
  • ajv

Overview

Text link styles. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-link

Usage

  {% include "@bolt-components-link/link.twig" with {
  text: "This is a link",
  url: "https://pega.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 —
  • —
Display

Display either an inline link or flex link (icons can hang on either side).

string inline
  • inline, flex
Valign

Controls the vertical alignment of text and icon.

string center
  • start, center
Text

Renderable text content for the link.

string , object , array —
  • —
Url

Contains a URL that the link points to. This may also be passed as part of attributes.

string —
  • —
Target

Specifies where to display the linked URL. This may also be passed as part of attributes.

string —
  • —
Icon

Bolt icon. Accepts the same options as Bolt Icon Component @bolt-components-icon plus an additional 'position' parameter that determines placement within the button.

object —
  • @bolt-components-icon/icon.schema.json > Object details
    • attributes

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


      Type: object
      • —
    • name

      Icon name.


      Type: string
      • academy, add-open, add-solid, agile, app-development, app-exchange, arrow-left, asset-data, asset-infographic, asset-interactive, asset-link, asset-media, asset-podcast, asset-presentation, asset-text, asset-video, bolt-logo-colored, brand-operations, calendar, careers, case-management, chart-bar, check, check-circle, check-solid, chevron-down, chevron-left, chevron-right, chevron-up, close, close-circled, close-open, close-solid, cloud, co-browse, communications, copy-to-clipboard, credit-card, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, download, email, energy, entertainment, exclamation, exit-full-screen, external-link, eye, eye-off, face-happy, face-sad, facebook, facebook-solid, field-service, field-service-gray, filter, financial, full-screen, github, global, government, healthcare, hospitality, industries, info-open, info-solid, insurance, integration, intelligent-virtual-assistant, java, knowledgebase, launchpad, life-sciences, linkedin, linkedin-solid, lock, manufacturing, map-pin, map-pin-solid, marketing, marketing-gray, menu, minus-open, minus-solid, mobility, more, omni-channel, partners, pencil, platform, podcast, print, product, product-delivery, refresh, reporting, retail, robo-auto, sales-automation, scalability, search, share, star-solid, support, system-admin, training, transportation, twitter, twitter-solid, unlock, upload, user, user-interface, video, vision, warning, watch, workforce-intelligence, youtube-solid
    • background

      Background shape. This applies only to 'xlarge' icons.


      Type: string
      • circle, square
    • size

      Icon size.


      Type: string
      • small, medium, large, xlarge
    • color

      Icon color. Currently only support default (black) and teal.


      Type: string
      • teal, blue
IsHeadline

Whether this link should get special headline styling treatment.

boolean —
  • —
Href

Use url instead.

—
  • —
    • Overview
    • Usage
    • Schema
    • Edit this page
    • Testing Steps

link

This is a text link

link display variations

Inline link

This is an inline link with an icon before, and this is an inline link with an icon after. Inline links are truly inline, which means the text can wrap to a second line and the icon falls on the baseline either before or after the text.

Flex link

This is a flex link with an icon. Very important to note that flex links are never to be mixed inline within a paragraph of non-link text because the text wraps differently and the icon hangs to the side.

This is a flex link with an icon. Very important to note that flex links are never to be mixed inline within a paragraph of non-link text because the text wraps differently and the icon hangs to the side.

link icon variations

Icon before (default)

This is a link

Icon after

This is a link

Different icons

This is a link

This is a link

This is a link

This is a link

This is a link

This is a link

This is a link

link valign variations

Note that valign only works with flex link (with the icon hanging to the side), it has no effects on inline link.

Valign: start

Vertically align start. This will align the text and icon to the start relative to the height of the link.

Valign: center

Vertically align center. This will align the text and icon to the center relative to the height of the link.

link theme variations

Headline Link with Default Icon

Text link

Headline Link with Default Icon

Text link

Headline Link with Default Icon

Text link

Headline Link with Default Icon

Text link

link with web component

Web Component Usage Bolt Link is a web component that renders a semantic link with Bolt styles. To make a simple link, wrap a semantic <a> element with a <bolt-link> element. Common HTML attributes such as href and target placed on the <a> would work as expected.
This is a link
<bolt-link> <a href="https://pega.com" target="_blank">This is a link</a> </bolt-link>
Inline Links When using inline links, do not add line breaks in or around your <bolt-icon> tag. Inline links will show the white-space added by line breaks, so removing them is necessary to eliminate unwanted space.

This is an inline link, and this is an inline link with an icon. Inline links are truly inline, which means the text can wrap to a second line and the icon falls on the baseline either before or after the text.

<p>This is an <bolt-link><a href="https://pega.com">inline link</a></bolt-link>, and this is an <bolt-link><a href="https://pega.com"><bolt-icon slot="before" name="info-open"></bolt-icon>inline link with an icon</a></bolt-link>. Inline links are truly inline, which means the text can wrap to a second line and the icon falls on the baseline either before or after the text.</p>
Links with Icons To add icons to <bolt-link>, place a <bolt-icon> next to your link text. For icons to have the correct spacing, you must add the slot attribute to <bolt-icon>. The slot value can be before or after.

This is a link with icon

This is a link with icon

<p> <bolt-link><a href="https://pega.com"><bolt-icon slot="before" name="info-open"></bolt-icon>This is a link with icon</a></bolt-link> </p> <p> <bolt-link><a href="https://pega.com">This is a link with icon<bolt-icon slot="after" name="info-open"></bolt-icon></a></bolt-link> </p>