Typography

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

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

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
Display 2
Display 3
Display 4

Snippet

Lead

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

Snippet

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

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

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

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

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

Contextual Texts

Snippet

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

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

Inline Code

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

Snippet

User Input

For example, press ctrl + , to edit settings.

Snippet

Variables

For example, y = m x + b

Snippet

Sample Output

This text is meant to be treated as sample output from a computer program.

Snippet

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

Edit this page on GitHub

Contributors

Matuzalém Teles

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