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.

$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 className="display-1">Display 1</div>
<div className="display-2">Display 2</div>
<div className="display-3">Display 3</div>
<div className="display-4">Display 4</div>

Lead

<p className="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 className="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 className="text-lowercase">LOWERCASED TEXT</span></p>
<p>uppercased text: <span className="text-uppercase">uppercased text</span></p>
<p>
	capitalized text: <span className="text-capitalize">capitalized text</span>
</p>

Reference Mark

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

<div>
	Reference Mark<span className="reference-mark" id="referenceMark1"
		>[1]</span
	>
	with text.
</div>
<div>
	Reference Mark<span className="reference-mark" id="referenceMark4"
		><svg
			className="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 className="reference-mark" href="#referenceMark1">[1]</a> A reference to
	the text above, respectively.
</div>
<div>
	<a className="reference-mark" href="#referenceMark4"
		><svg
			className="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 className="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 className="text-truncate-inline" href="#1"
	><span className="text-truncate"
		>ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</span
	></a
>
Milk filter lungo as galão roast that crema
<a className="text-truncate-inline" href="#1"
	><span className="text-truncate"></span
></a>

Contextual Texts

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

Contextual Backgrounds

<span className="bg-blue"
	>bg-blue: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span className="bg-indigo"
	>bg-indigo: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span className="bg-purple"
	>bg-purple: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span className="bg-pink"
	>bg-pink: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span className="bg-red"
	>bg-red: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span className="bg-orange"
	>bg-orange: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span className="bg-yellow"
	>bg-yellow: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span className="bg-green"
	>bg-green: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span className="bg-teal"
	>bg-teal: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span className="bg-cyan"
	>bg-cyan: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span className="bg-primary"
	>bg-primary: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span className="bg-secondary"
	>bg-secondary: Milk filter lungo as galão roast that crema blue mountain
	shop turkish.</span
>
<span className="bg-success"
	>bg-success: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span className="bg-info"
	>bg-info: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span className="bg-warning"
	>bg-warning: Milk filter lungo as galão roast that crema blue mountain shop
	turkish.</span
>
<span className="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 className="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 className="blockquote">
	<div>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
		erat a ante.
	</div>
</blockquote>
<blockquote className="blockquote">
	<div>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
		erat a ante.
	</div>
	<footer className="blockquote-footer">
		Someone famous in <cite title="Source Title">Source Title</cite>
	</footer>
</blockquote>