Stable3.2.0View in LexiconCHANGELOG
Don't forget to check WAI-ARIA accessibility pratices for links when writting your markup.
These elements should be used to style links based on the global link, primary, and secondary colors.
Styles
Copied!
<div><a href="#1">Regular Anchor Tag</a></div>
<div><a class="link-primary" href="#1">.link-primary</a></div>
<div><a class="link-secondary" href="#1">.link-secondary</a></div>
Single Link
Use .single-link
on an anchor to add a semi-bold style to the link and should be used for standalone links defined by https://liferay.design/lexicon/core-components/link/.
Copied!
<a class="link-primary single-link" href="#1">.link-primary.single-link</a>
<a class="link-secondary single-link" href="#1">.link-secondary.single-link</a>
Component Links
Use these patterns for links, titles, subtitles in components.
The colors, sizing, and other CSS Properties can change for these items depending on the component you put them in (requires custom CSS).
Copied!
<a class="component-link" href="#1">.component-link</a>
<h4 class="component-title">.component-title</h4>
<h4 class="component-title"><a href="#1">.component-title a</a></h4>
<p class="component-subtitle">.component-subtitle</p>
<p class="component-subtitle"><a href="#1">.component-subtitle a</a></p>
Component Action
Use these patterns for actions in components.
Anchor
Copied!
<a class="component-action" href="#1" role="button">
<svg
class="lexicon-icon lexicon-icon-times"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#times" />
</svg>
</a>
<a class="component-action disabled" href="#1" role="button" tabindex="-1">
<svg
class="lexicon-icon lexicon-icon-times"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#times" />
</svg>
</a>
Button
Copied!
<button class="component-action" role="button">
<svg
class="lexicon-icon lexicon-icon-times"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#times" />
</svg>
</button>
<button class="component-action" disabled type="button" tabindex="-1">
<svg
class="lexicon-icon lexicon-icon-times"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#times" />
</svg>
</button>
Outline
Copied!
<a class="link-outline link-outline-primary" href="#1">Primary</a>
<a class="link-outline link-outline-secondary" href="#1">Secondary</a>
Outline Borderless
Copied!
<a class="link-outline link-outline-borderless link-outline-primary" href="#1"
>Primary</a
>
<a class="link-outline link-outline-borderless link-outline-secondary" href="#1"
>Secondary</a
>
External Link
Copied!
<a
aria-label="External Link"
class="link-secondary"
href="#link-styles"
title="External Link"
>
External Link
</a>
Monospaced
Copied!
<a class="link-monospaced link-outline link-outline-primary" href="#1">
<span class="inline-item">
<svg
class="lexicon-icon lexicon-icon-add-cell"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#add-cell" />
</svg>
</span>
</a>
<a
class="link-monospaced link-outline link-outline-borderless link-outline-primary"
href="#1"
>
<span class="inline-item">
<svg
class="lexicon-icon lexicon-icon-add-cell"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#add-cell" />
</svg>
</span>
</a>
<a class="link-monospaced link-outline link-outline-secondary" href="#1">
<span class="inline-item">
<svg
class="lexicon-icon lexicon-icon-picture"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#picture" />
</svg>
</span>
</a>
<a
class="link-monospaced link-outline link-outline-borderless link-outline-secondary"
href="#1"
>
<span class="inline-item">
<svg
class="lexicon-icon lexicon-icon-picture"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#picture" />
</svg>
</span>
</a>
Title Link
Copied!
<a
aria-label="Title Link"
class="component-title link-secondary"
href="#title-link"
title="Title"
>
Title Link
</a>