General Settings

Base Font Size

Theme Settings

Default
Material
Material Design Soon

Typography

  • Home
  • UI Elements
  • Typography

Headings

h1. Heading Secondary text

h2. Heading Secondary text

h3. Heading Secondary text

h4. Heading Secondary text

h5. Heading Secondary text
h6. Heading Secondary text

Font Family Classes

Extra Light

Light

Regular (Base)

Semibold

Bold

Font Size Classes

Font Size 10

Font Size 11

Font Size 12

Font Size 13

Font Size 14

Font Size 15

Font Size 16

Font Size 17

Font Size 18

Font Size 19

Font Size 20

Font Size 21

Font Size 22

Font Size 23

Font Size 24

Font Size 25

Font Size 26

Font Size 27

Font Size 28

Font Size 29

Font Size 30

Transformation classes

Proteus

Lowercased text.

Uppercased text.

Capitalized text.

Bootstrap

Lowercased text.

Uppercased text.

Capitalized text.

Lists

Unordered

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Unstyled

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Inline

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Description

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Horizontal description

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Contextual

Colors

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Backgrounds

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Copy

Lead

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, laboriosam quo error recusandae natus corporis temporibus!

Body

Voluptate, iure nisi minima eaque reprehenderit velit cupiditate soluta odit quos. Placeat sapiente culpa odit amet debitis beatae doloremque porro itaque ipsa.

Alignment Classes

Proteus

Left aligned text.

Center aligned text.

Right aligned text.

Bootstrap

Left aligned text.

Center aligned text.

Right aligned text.

No wrap text.

Justified text with ... lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, quos, ipsa, voluptatem fugiat odio beatae id saepe soluta deleniti dolor ex minima nisi autem ipsam provident ratione blanditiis cupiditate quia. Repellat, eum, excepturi, temporibus accusantium nihil adipisci facere quam nobis ea ducimus quia saepe officia vel repudiandae illo perferendis earum modi natus.

Inline Text Elements

Marked text

You can use the mark tag to highlighttext.

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.

Inserted text

This line of text is meant to be treated as an addition to the document.

Underlined text

This line of text will render as underlined

Small text

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

Bold

The following snippet of text is  rendered as bold text

Italics

The following snippet of text isrendered as italicized text

Code

The following snippet of text isrendered as code text

Blockquotes and Addresses

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Addresses

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P:(123) 456-7890
Full Name
first.last@example.com

Alerts with Links

Labels

DefaultPrimarySuccessInfoWarningDangerDark

Badges

DefaultPrimarySuccessInfoWarningDangerDark