Link

Use Links to navigate between pages, locations within the same page, and more.

Examples

Base

Link
<chi-link href="#">Link</chi-link>
<a class="chi-link" href="#">Link</a>

Disabled

Make links appear inactive by adding the disabled boolean attribute or -disabled class.

Link
<chi-link href="#" disabled>Link</chi-link>
<a class="chi-link -disabled" href="#">Link</a>

CTA

Call to action (CTA) links are prominent links used primarily on marketing web pages to encourage users to perform a specific action (e.g. Get started, Learn more). Use link sizes to render CTA links larger or smaller.

Learn more
<chi-link href="#" cta>Learn more</chi-link>
<a class="chi-link -cta" href="#">Learn more</a>

Labeled Icon Link

Use labeled icon links to render both text and icons inside link tags.

Help

Icon Link

Use icon links to render icons inside link tags. Note: All icon links without text labels must define a label in the alternative-text attribute for accessibility.

Target

Use target to specify where to open a link. Supported values are: _self, _blank, _parent, _top, or a custom named frame framename. The default value is _self.

Link
<!-- Open a link in the same frame as it was clicked (default) -->
<chi-link href="#" target="_self">Link</chi-link>

<!-- Open a link in a new window or tab -->
<chi-link href="#" target="_blank">Link</chi-link>

<!-- Open a link in the parent frame -->
<chi-link href="#" target="_parent">Link</chi-link>

<!-- Open a link in the full body of the window -->
<chi-link href="#" target="_top">Link</chi-link>

<!-- Open a link in a custom named frame -->
<chi-link href="#" target="framename">Link</chi-link>
<!-- Open a link in the same frame as it was clicked (default) -->
<a class="chi-link" href="#" target="_self">Link</a>

<!-- Open a link in a new window or tab -->
<a class="chi-link" href="#" target="_blank">Link</a>

<!-- Open a link in the parent frame -->
<a class="chi-link" href="#" target="_parent">Link</a>

<!-- Open a link in the full body of the window -->
<a class="chi-link" href="#" target="_top">Link</a>

<!-- Open a link in a custom named frame -->
<a class="chi-link" href="#" target="framename">Link</a>

Rel

Use rel to set the relationship between the current page and the linked page. Rel supports all HTML a attribute values. Examples include: alternate, external, next, nofollow, noreferrer, noopener, prev, and more.

Link
<chi-link href="#" rel="noopener">Link</chi-link>
<a class="chi-link" href="#" rel="noopener">Link</a>

Download

Use download to prompt users to save a page or document instead of navigating to it. The download attribute accepts an optional value used to name the file. If no value is provided, the original filename is used.

Link
<!-- Use default filename -->
<chi-link href="#" download>Link</chi-link>

<!-- Sepcify custom filename -->
<chi-link href="#" download="custom-filename">Link</chi-link>
<!-- Use default filename -->
<a class="chi-link" href="#" download>Link</a>

<!-- Sepcify custom filename -->
<a class="chi-link" href="#" download="custom-filename">Link</a>

Hreflang

Use to set the language of the link.

Link
<chi-link href="#" hreflang="en">Link</chi-link>
<a class="chi-link" href="#" hreflang="en">Link</a>

Additional Sizes

Links support the following sizes: xs, sm, md, lg, and xl. By default, links inherit the font-size of their parent element.

xs

Link

sm

Link

md

Link

lg

Link

xl

Link
<!-- xs -->
<chi-link href="#" size="xs">Link</chi-link>

<!-- sm -->
<chi-link href="#" size="sm">Link</chi-link>

<!-- md -->
<chi-link href="#" size="md">Link</chi-link>

<!-- lg -->
<chi-link href="#" size="lg">Link</chi-link>

<!-- xl -->
<chi-link href="#" size="xl">Link</chi-link>
<!-- xs -->
<a class="chi-link -xs" href="#">Link</a>

<!-- sm -->
<a class="chi-link -sm" href="#">Link</a>

<!-- md -->
<a class="chi-link -md" href="#">Link</a>

<!-- lg -->
<a class="chi-link -lg" href="#">Link</a>

<!-- xl -->
<a class="chi-link -xl" href="#">Link</a>

Web Component

Properties

Property
Attribute
Description
Type
Default
alternativeText
alternative-text
to provide alternative text in case of icon links.
string
undefined
cta
cta
to render a link as a prominent call to action.
boolean
false
disabled
disabled
to disable a link.
boolean
false
download
download
to prompt users to save a page or document instead of navigating to it.
string
undefined
href
href
to set a links destination url.
string
'#'
hreflang
hreflang
to set the language of a links destination url.
string
undefined
rel
rel
to set the relationship between the current page and the linked page.
string
undefined
size
size
to set size of a link { xs, sm, md, lg, xl }.
string
undefined
target
target
to set target of a link.
string
undefined

Accessibility

Accessibility guidelines coming soon