Clay CSS v3.9.0

Typography

Sans-serif

Serif

Monospace

Headings

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

Lead

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

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

Reference Mark

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

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.

Text Truncate

Shorten long lines of text with the class text-truncate. 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.

Text Truncate Inline

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

Contextual Texts

Contextual Backgrounds

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.

Address

Liferay, Inc.
1400 Montefino Ave.
Diamond Bar, CA 91765
P: +1-877-LIFERAY (1-877-543-3729)
Full Name
joe.bloggs@liferay.com

Inline Code

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

User Input

For example, press ctrl + , to edit settings.

Variables

For example, y = mx + b

Sample Output

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

Basic Code Block

body {
    background-color: #FFF;
}

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.