Headings

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

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

$display-1: (
	media-breakpoint-down: (
		md: (
			font-size: 4.5rem,
		),
		sm: (
			font-size: 3.75rem,
		),
		xs: (
			font-size: 2.5rem,
		),
	),
);

<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

<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

<p><mark>Landscape</mark> Photography</p>

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

Inline Text Elements

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

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

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

<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

<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

<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

<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

<p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>

User Input

<p>
	For example, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> to edit
	settings.
</p>

Variables

<p>For example, <var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>

Sample Output

<samp
	>This text is meant to be treated as sample output from a computer
	program.</samp
>

Blockquote

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