Skip to main contentSkip to search

Typography

A basic reference for the definition of the visual identity and the organization of the content.

Check the Lexicon Typography Pattern for a more in-depth look at the motivations and proper usage of this component.

Headings

Responsive styles are not included by default. You can set them through the $h# maps or write your own media queries.

Code Sample (expand to see it) 
$h1: (
	font-size: 1.625rem,
	media-breakpoint-up: (
		lg: (
			font-size: 2rem,
		),
		xl: (
			font-size: 4rem,
		),
	),
	media-breakpoint-down: (
		sm: (
			font-size: 1rem,
		),
		xs: (
			font-size: 0.875rem,
		),
	),
);

h1 Article Heading Sub text

h2 Article Heading Sub text

h3 Article Heading Sub text

h4 Article Heading Sub text

h5 Article Heading Sub text
h6 Article Heading Sub text
Code Sample (expand to see it) 
<h1>h1 Article Heading <small>Sub text</small></h1>
<h2>h2 Article Heading <small>Sub text</small></h2>
<h3>h3 Article Heading <small>Sub text</small></h3>
<h4>h4 Article Heading <small>Sub text</small></h4>
<h5>h5 Article Heading <small>Sub text</small></h5>
<h6>h6 Article Heading <small>Sub text</small></h6>

Display

Larger heading styles to make content stand out. Responsive styles are not included by default. You can set them through the $display-* map or write your own media queries.

Code Sample (expand to see it) 
$display-1: (
    media-breakpoint-down: (
        md: (
            font-size: 4.5rem,
        ),
        sm: (
            font-size: 3.75rem,
        ),
        xs: (
            font-size: 2.5rem,
        ),
    ),
);
Display 1
Display 2
Display 3
Display 4
Code Sample (expand to see it) 
<div class="display-1">Display 1</div>
<div class="display-2">Display 2</div>
<div class="display-3">Display 3</div>
<div class="display-4">Display 4</div>

Lead

Lead Body Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.

Code Sample (expand to see it) 
<p class="lead">
	Lead Body Text: Milk filter lungo as galão roast that crema blue mountain
	shop turkish.
</p>

Highlight Text

Use the mark tag or add the mark class to your HTML element to highlight text. The class clay-dark can be added to the element or the parent element for dark themed highlighting.

Landscape Photography

Landscape Picture

Code Sample (expand to see it) 
<p><mark>Landscape</mark> Photography</p>

<p><span class="clay-dark mark">Landscape</span> Picture</p>

Inline Text Elements

Anchor Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.

Regular Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.

Marked Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.

Deleted Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.

Strikethrough Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.

Inserted Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.

Underlined Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.

Small Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.

Bold Text: Milk filter lungo as galão roast that crema blue mountain shop turkish.

Italics: Milk filter lungo as galão roast that crema blue mountain shop turkish.

Abbreviation: attr

LOWERCASED TEXT: LOWERCASED TEXT

uppercased text: uppercased text

capitalized text: capitalized text

Code Sample (expand to see it) 
<p>
	<a href="#1"
		>Anchor Text: Milk filter lungo as galão roast that crema blue mountain
		shop turkish.</a
	>
</p>
<p>
	<span
		>Regular Text: Milk filter lungo as galão roast that crema blue mountain
		shop turkish.</span
	>
</p>
<p>
	<mark
		>Marked Text: Milk filter lungo as galão roast that crema blue mountain
		shop turkish.</mark
	>
</p>
<p>
	<del
		>Deleted Text: Milk filter lungo as galão roast that crema blue mountain
		shop turkish.</del
	>
</p>
<p>
	<s
		>Strikethrough Text: Milk filter lungo as galão roast that crema blue
		mountain shop turkish.</s
	>
</p>
<p>
	<ins
		>Inserted Text: Milk filter lungo as galão roast that crema blue
		mountain shop turkish.</ins
	>
</p>
<p>
	<u
		>Underlined Text: Milk filter lungo as galão roast that crema blue
		mountain shop turkish.</u
	>
</p>
<p>
	<small
		>Small Text: Milk filter lungo as galão roast that crema blue mountain
		shop turkish.</small
	>
</p>
<p>
	<strong
		>Bold Text: Milk filter lungo as galão roast that crema blue mountain
		shop turkish.</strong
	>
</p>
<p>
	<em
		>Italics: Milk filter lungo as galão roast that crema blue mountain shop
		turkish.</em
	>
</p>
<p>Abbreviation: <abbr title="attribute">attr</abbr></p>
<p>LOWERCASED TEXT: <span class="text-lowercase">LOWERCASED TEXT</span></p>
<p>uppercased text: <span class="text-uppercase">uppercased text</span></p>
<p>capitalized text: <span class="text-capitalize">capitalized text</span></p>

Reference Mark

Use <span class="reference-mark"></span> to add a reference mark next to some text.

Reference Mark[1] with text.
Reference Mark with lexicon-icon-asterisk.

Footnotes

[1] A reference to the text above, respectively.
A reference to the text above, respectively.
Code Sample (expand to see it) 
<div>
	Reference Mark<span class="reference-mark" id="referenceMark1">[1]</span>
	with text.
</div>
<div>
	Reference Mark<span class="reference-mark" id="referenceMark4"
		><svg
			class="lexicon-icon lexicon-icon-asterisk"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#asterisk" /></svg
	></span>
	with lexicon-icon-asterisk.
</div>
<h4>Footnotes</h4>
<div>
	<a class="reference-mark" href="#referenceMark1">[1]</a> A reference to the
	text above, respectively.
</div>
<div>
	<a class="reference-mark" href="#referenceMark4"
		><svg
			class="lexicon-icon lexicon-icon-asterisk"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#asterisk" /></svg
	></a>
	A reference to the text above, respectively.
</div>

Text Truncate

Shorten long lines of text with the text-truncate class. This uses display: block; and should be used to truncate text in block level elements.

Milk filter lungo as galão roast that crema blue mountain shop turkish. Milk filter lungo as galão roast that crema blue mountain shop turkish. Milk filter lungo as galão roast that crema blue mountain shop turkish.

Code Sample (expand to see it) 
<p class="text-truncate">
	Milk filter lungo as galão roast that crema blue mountain shop turkish. Milk
	filter lungo as galão roast that crema blue mountain shop turkish. Milk
	filter lungo as galão roast that crema blue mountain shop turkish.
</p>

Text Truncate Inline

You can also use the text-truncate-inline class to shorten long lines of text.

Milk filter lungo as galão roast that crema blue mountain shop turkish. ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual Milk filter lungo as galão roast that crema this is also text-truncate turkish. Milk filter lungo as galão roast that crema blue mountain shop turkish.

Code Sample (expand to see it) 
<a class="text-truncate-inline" href="#1"
	><span class="text-truncate"
		>ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</span
	></a
>
Milk filter lungo as galão roast that crema
<a class="text-truncate-inline" href="#1"
	><span class="text-truncate"></span
></a>

Contextual Texts

Code Sample (expand to see it) 
<a href="#1" class="text-blue"
	>text-blue: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</a
>
<a href="#1" class="text-indigo"
	>text-indigo: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</a
>
<a href="#1" class="text-purple"
	>text-purple: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</a
>
<a href="#1" class="text-pink"
	>text-pink: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</a
>
<a href="#1" class="text-red"
	>text-red: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</a
>
<a href="#1" class="text-orange"
	>text-orange: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</a
>
<a href="#1" class="text-yellow"
	>text-yellow: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</a
>
<a href="#1" class="text-green"
	>text-green: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</a
>
<a href="#1" class="text-teal"
	>text-teal: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</a
>
<a href="#1" class="text-cyan"
	>text-cyan: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</a
>
<a href="#1" class="text-muted"
	>text-muted: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</a
>
<a href="#1" class="text-primary"
	>text-primary: Milk filter lungo as galão roast that crema blue mountain
	shop turkish.</a
>
<a href="#1" class="text-secondary"
	>text-secondary: Milk filter lungo as galão roast that crema blue mountain
	shop turkish.</a
>
<a href="#1" class="text-info"
	>text-info: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</a
>
<a href="#1" class="text-success"
	>text-success: Milk filter lungo as galão roast that crema blue mountain
	shop turkish.</a
>
<a href="#1" class="text-warning"
	>text-warning: Milk filter lungo as galão roast that crema blue mountain
	shop turkish.</a
>
<a href="#1" class="text-danger"
	>text-danger: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</a
>

Contextual Backgrounds

bg-blue: Milk filter lungo as galão roast that crema blue mountain shop turkish.
bg-indigo: Milk filter lungo as galão roast that crema blue mountain shop turkish.
bg-purple: Milk filter lungo as galão roast that crema blue mountain shop turkish.
bg-pink: Milk filter lungo as galão roast that crema blue mountain shop turkish.
bg-red: Milk filter lungo as galão roast that crema blue mountain shop turkish.
bg-orange: Milk filter lungo as galão roast that crema blue mountain shop turkish.
bg-yellow: Milk filter lungo as galão roast that crema blue mountain shop turkish.
bg-green: Milk filter lungo as galão roast that crema blue mountain shop turkish.
bg-teal: Milk filter lungo as galão roast that crema blue mountain shop turkish.
bg-cyan: Milk filter lungo as galão roast that crema blue mountain shop turkish.
bg-primary: Milk filter lungo as galão roast that crema blue mountain shop turkish.
bg-secondary: Milk filter lungo as galão roast that crema blue mountain shop turkish.
bg-success: Milk filter lungo as galão roast that crema blue mountain shop turkish.
bg-info: Milk filter lungo as galão roast that crema blue mountain shop turkish.
bg-warning: Milk filter lungo as galão roast that crema blue mountain shop turkish.
bg-danger: Milk filter lungo as galão roast that crema blue mountain shop turkish.
Code Sample (expand to see it) 
<span class="bg-blue"
	>bg-blue: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span class="bg-indigo"
	>bg-indigo: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span class="bg-purple"
	>bg-purple: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span class="bg-pink"
	>bg-pink: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span class="bg-red"
	>bg-red: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span class="bg-orange"
	>bg-orange: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span class="bg-yellow"
	>bg-yellow: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span class="bg-green"
	>bg-green: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span class="bg-teal"
	>bg-teal: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span class="bg-cyan"
	>bg-cyan: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span class="bg-primary"
	>bg-primary: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span class="bg-secondary"
	>bg-secondary: Milk filter lungo as galão roast that crema blue mountain
	shop turkish.</span
>
<span class="bg-success"
	>bg-success: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span class="bg-info"
	>bg-info: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span class="bg-warning"
	>bg-warning: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span class="bg-danger"
	>bg-danger: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>

Address

Liferay, Inc.
1400 Montefino Ave.
Diamond Bar, CA 91765
P: +1-877-LIFERAY (1-877-543-3729)
Full Name
joe.bloggs@liferay.com
Code Sample (expand to see it) 
<address>
	<strong>Liferay, Inc.</strong><br />
	1400 Montefino Ave.<br />
	Diamond Bar, CA 91765<br />
	<abbr class="initialism" title="Phone">P:</abbr> +1-877-LIFERAY
	(1-877-543-3729)
</address>
<address>
	<strong>Full Name</strong><br />
	<a href="mailto:#">joe.bloggs@liferay.com</a>
</address>

Inline Code

For example, <section> should be wrapped as inline.

Code Sample (expand to see it) 
<p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>

User Input

For example, press ctrl + , to edit settings.

Code Sample (expand to see it) 
<p>
	For example, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> to edit
	settings.
</p>

Variables

For example, y = mx + b

Code Sample (expand to see it) 
<p>For example, <var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>

Sample Output

This text is meant to be treated as sample output from a computer program.
Code Sample (expand to see it) 
<samp
	>This text is meant to be treated as sample output from a computer
	program.</samp
>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title
Code Sample (expand to see it) 
<blockquote class="blockquote">
	<div>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
		erat a ante.
	</div>
</blockquote>
<blockquote class="blockquote">
	<div>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
		erat a ante.
	</div>
	<footer class="blockquote-footer">
		Someone famous in <cite title="Source Title">Source Title</cite>
	</footer>
</blockquote>

How can this be improved? Create an issue!