Typography

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

Table of Contents

Headings
Display
Lead
Highlight Text
Inline Text Elements
Reference Mark
Text Truncate
Text Truncate Inline
Contextual Texts
Contextual Backgrounds
Address
Inline Code
User Input
Variables
Sample Output
Blockquote

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.

Snippet

$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

Snippet

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

Snippet

$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

Snippet

<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

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

Snippet

<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

Snippet

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

<p><span className="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

Snippet

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

Reference Mark[1]with text.

Reference Markwith lexicon-icon-asterisk.

Footnotes

[1]A reference to the text above, respectively.

A reference to the text above, respectively.

Snippet

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

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.

Snippet

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

Milk filter lungo as galão roast that crema blue mountain shop turkish.ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsualMilk filter lungo as galão roast that cremathis is also text-truncateturkish. Milk filter lungo as galão roast that crema blue mountain shop turkish.

Snippet

<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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Snippet

<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

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.

Snippet

<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

Liferay, Inc.
1400 Montefino Ave.
Diamond Bar, CA 91765
P:+1-877-LIFERAY (1-877-543-3729)

Full Name
joe.bloggs@liferay.com

Snippet

<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

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

Snippet

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

User Input

For example, press ctrl + , to edit settings.

Snippet

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

Variables

For example, y = m x + b

Snippet

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

Snippet

<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

Snippet

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

Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited May 9, 2025 at 6:15:38 AM

Table of Contents

Headings
Display
Lead
Highlight Text
Inline Text Elements
Reference Mark
Text Truncate
Text Truncate Inline
Contextual Texts
Contextual Backgrounds
Address
Inline Code
User Input
Variables
Sample Output
Blockquote