Clay
Skip to ContentClayClay by Liferay
  • Get Started
    • Introduction
    • What is Clay
    • Importing the JS Component
    • Using JS Components with Metal.js
    • Web Components
  • Foundations
    • Grid
    • Typography
  • Lexicon Core Components
    • Alerts
    • Badges
    • Buttons
    • Cards
    • Charts
      • Advanced Examples
        • Axis Label
        • Axis Range
        • Data Color
        • Gridlines
        • Predictive forecasting
        • Regions
        • X Axis Tick Formatting
      • Basic Examples
        • Bar Chart
        • Bubble Chart
        • Combination Chart
        • Donut Chart
        • Gauge Chart
        • Geomap Chart
        • Line Chart
        • Pie Chart
        • Scatter Chart
        • Spline Chart
        • Step Chart
    • Dataset Display
    • Dropdown Menu
    • Forms
      • Checkbox, Radio, and Toggle
      • Forms
      • Forms Hierarchy
      • Forms Navigation
      • Multi Step Form
      • Multi Step Form Simplified
      • Selectors
      • Text Input
      • Text Input Group
      • Text Input Localizable
      • Text Input Variations
    • Icons
    • Labels
    • Link
    • List
    • Loading Indicator
    • Modals
    • Navigation
      • Breadcrumbs
      • Navigation Bar
      • Vertical Navigation
    • Pagination
    • Popovers and Tooltips
    • Progress Bars
    • Sidebar
      • Info Panel
    • Stickers
    • Table
      • Inline Edit Table
      • Table
    • Tabs
    • Toolbars
      • Management Toolbar
  • CSS Framework
    • SCSS
    • Class Helpers
    • Satellite Components
      • Alerts
      • Badges
      • Button Group
      • Cards
      • Dropdown Menu
      • Forms
        • Form Elements
        • Form Elements (Input Groups)
        • Form Elements (Validation)
      • Images (Aspect Ratios)
      • Images and Thumbnails
      • Labels
      • Links
      • List Groups
      • Modals
      • Nav
      • Navigation
        • Header
      • Paginations
      • Panels
      • Popovers and Tooltips
      • Progress Bars
      • Stickers
      • Tables
      • Tbar (Toolbar)
      • Timelines
      • Toggle Switch
    • Page Examples
      • Card View Template
      • Document Upload
      • List View Template
      • Table View Template
      • Users and Organizations
  • News

Links

Links

These elements should be used to style links based on the global link, primary, and secondary colors.

Regular Anchor Tag
.link-primary
.link-secondary
<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

Add the .single-link class to an anchor to add a semi-bold style to the link. This should be used for stand alone links defined by https://lexicondesign.io/docs/patterns/link.html.

.link-primary.single-link
.link-secondary.single-link
<div>
	<a class="link-primary single-link" href="#1">
		.link-primary.single-link
	</a>
</div>

<div>
	<a class="link-secondary single-link" href="#1">
		.link-secondary.single-link
	</a>
</div>

Component Links

Use these patterns for links, titles, and subtitles in components.

Color, sizing, and other CSS Properties may differ for an item depending on the component you put them in (requires custom CSS).
.component-link

.component-title

.component-title a

.component-subtitle

.component-subtitle a

<div><a class="component-link" href="#1">.component-link</a></div>
<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

<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="#disabled" 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

<button class="component-action" type="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">
	<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
		<use href="/images/icons/icons.svg#times" />
	</svg>
</button>

Link Outline

Primary Secondary

<a class="link-outline link-outline-primary" href="#1">Primary</a>
<a class="link-outline link-outline-secondary" href="#1">Secondary</a>

Link Outline Borderless

Primary Secondary

<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>

Link Monospaced

<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>

Except as otherwise noted, the content of this site is licensed under CC BY-SA 4.0 license.