Typography

Basic Typography

Color Title

Color Title

Color Title

Color Title

Color Title

Color Title

Color Title

Color Title

Color Title

Color Title

Color Title

Color Title

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Lead Larger

Lead

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Alerts

Animated Text

Sandbox provides

Blockquote

Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula lacinia odio.

Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor.

Dropcap

Aenean non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper amet.

Aenean non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper amet.

Aenean non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper amet.

Lists

  • Aenean eu leo quam pellentesque.
  • Nullam quis risus eget urna mollis.
  • Donec id elit non mi porta gravida.
  • Fusce dapibus, tellus ac cursus.
  • Aenean eu leo quam pellentesque.
  • Nullam quis risus eget urna mollis.
  • Donec id elit non mi porta gravida.
  • Fusce dapibus, tellus ac cursus.
  • Aenean eu leo quam pellentesque.
  • Nullam quis risus eget urna mollis.
  • Donec id elit non mi porta gravida.
  • Fusce dapibus, tellus ac cursus.

Tooltip & Popover

Sed posuere consectetur est at lobortis. Tooltip on top porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna. Tooltip on bottom commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna. Tooltip on left id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus. Tooltip on right porttitor.

Sed posuere consectetur est at lobortis. Popover on top porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna. Curabitur blandit. Popover on bottom tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo. Popover on left cursus magna id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet fermentum massa justo. Popover on right porttitor. Morbi leo risus.

Miscellaneous

Marked Text

You can use the mark tag to highlight text.

Deleted text

This line of text is meant to be treated as deleted text.

Strikethrough text

This line of text is meant to be treated as no longer accurate.

Underlined text

This line of text will render as underlined

You can also underline with color like this.

Small text

This line of text is meant to be treated as fine print.

Abbreviations

attr

Bold

The following snippet is rendered as bold text

Italics

The following snippet is rendered as italicized text

Sup and Sub

This is subscript and superscript

Transformation classes

Lowercased text

Uppercased text

Capitalized text

Address

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (123) 456-12890
first.last@example.com