Style Guide

h1 Julius Sans Header Element

h2 Julius Sans Header Element

h3 Julius Sans Header Element

h4 Julius Sans Header Element

h5 Julius Sans Header Element
h6 Julius Sans Header Element

h1 Lato Header Element

h1 Lato Header Element

h1 Lato Header Element

h1 Lato Header Element

h1 Lato Header Element
h1 Lato Header Element

h1.display-1 Header

h1.display-2 Header

h1.display-3 Header

h1.display-4 Header

h1 Lato Disply-1 Element

h1 Lato Disply-2 Element

h1 Lato Disply-3 Element

h1 Lato Disply-4 Element

Body copy Lato

Body Text, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. Cras ornare faucibus laoreet. Aenean vel nisi in ipsum congue fermentum et ut arcu. Proin leo diam, vulputate eu tellus ac, mattis cursus nunc. In aliquet erat ac eros congue maximus. Fusce cursus leo at elit tincidunt, consequat ultrices ante pretium. Vivamus ut dapibus nisl, nec condimentum purus.

Lead, Body Text, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. Cras ornare faucibus laoreet. Aenean vel nisi in ipsum congue fermentum et ut arcu. Proin leo diam, vulputate eu tellus ac, mattis cursus nunc. In aliquet erat ac eros congue maximus. Fusce cursus leo at elit tincidunt, consequat ultrices ante pretium. Vivamus ut dapibus nisl, nec condimentum purus.

You can use the mark tag to highlight text.

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

This line of text will render as underlined

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

This line rendered as bold text.

This line rendered as italicized text.

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Bullet Points

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  • Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus. 
  • Cras ornare faucibus laoreet. Aenean vel nisi in ipsum congue fermentum et ut arcu. 
  • Proin leo diam, vulputate eu tellus ac, mattis cursus nunc. In aliquet erat ac eros congue maximus.
  •  Fusce cursus leo at elit tincidunt, consequat ultrices ante pretium. 
  • Vivamus ut dapibus nisl, nec condimentum purus.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  2. Suspendisse a lacus est. Etiam diam metus, lobortis non augue at, placerat viverra risus.
  3. Cras ornare faucibus laoreet. Aenean vel nisi in ipsum congue fermentum et ut arcu. 
  4. Proin leo diam, vulputate eu tellus ac, mattis cursus nunc. In aliquet erat ac eros congue maximus. 
  5. Fusce cursus leo at elit tincidunt, consequat ultrices ante pretium. 
  6. Vivamus ut dapibus nisl, nec condimentum purus.

Buttons

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Button Primary Button Secondary Button Success Button Danger Button Warning Button info

This could be your call to action

Lorem int ipsum dolor sit amet when an unknown printer took a galley of type. Vivamus id tempor.

Click me, I'm a button
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent
Facebook
Instagram