Link

Getting Started

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: "#!"
} only %}

Schema

Name	Type	Value(s)	Description	Default
attributes	`object`		A Drupal-style attributes object with extra attributes to append to this component.	N/A
text	`string` OR `object` OR `array`		Renderable text content for the link.	N/A
url	`string`		A url to link to. This may also be passed as part of `attributes`	N/A
href	`string`		Deprecated. Use url instead.	N/A
icon	`object`	@bolt-components-icon/icon.schema.yml > Object details `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`, `check-circle`, `check-solid`, `check`, `chevron-down`, `chevron-left`, `chevron-right`, `chevron-up`, `close-open`, `close-solid`, `close`, `cloud`, `co-browse`, `communications`, `copy-to-clipboard`, `customer-decision-hub`, `customer-onboarding`, `customer-service`, `data-integrations`, `documentation`, `download`, `email`, `energy`, `entertainment`, `exit-full screen`, `external-link`, `eye-off`, `eye`, `facebook-solid`, `facebook`, `field-service-gray`, `field-service`, `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-solid`, `linkedin`, `lock`, `manufacturing`, `map-pin-solid`, `map-pin`, `marketing-gray`, `marketing`, `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`, `support`, `system-admin`, `training`, `transportation`, `twitter-solid`, `twitter`, `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` OR `square` `size` Icon size. Type: string `small`, `medium`, `large`, `xlarge` `color` Icon color. Currently only support default (black) and teal. Type: string `teal` OR `blue`	Bolt icon. Accepts the same options as Bolt Icon Component `@bolt-components-icon`	N/A
isHeadline	`boolean`		Whether this link should get special headline styling treatment	N/A