Styleguide

5.1 Typography

Headers and Body Text

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Blockquotes

Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

The author of the quote

List Types

No bullet ul
.no-bullets
  • One
  • Two
  • Three
  • Four
Round bullet ul (default)
.disc
  • One
  • Two
  • Three
  • Four
Square bullet ul
.square
  • One
  • Two
  • Three
  • Four
Inline List ul
.inline-list
  • One
  • Two
  • Three
  • Four
Numeric bullet ol (default)
  1. One
  2. Two
  3. Three
  4. Four
Alpha bullet ol
.alpha
  1. One
  2. Two
  3. Three
  4. Four

5.3 Buttons

Timber offers a primary and secondary button to be used or customized as you need.

<!-- Primary -->
<a href="#" class="btn">Default Button</a>
<a href="#" class="btn btn--small">Small Default Button</a>
<!-- Secondary -->
<a href="#" class="btn--secondary">Secondary Button</a>
<a href="#" class="btn--secondary btn--small">Small Default Button</a>
<!-- Disabled -->
<a href="#" class="btn disabled">Disabled Button</a>
<a href="#" class="btn disabled btn--small">Small Disabled Button</a>
<!-- Sized -->
<a href="#" class="btn btn--full">Wide Button</a>

5.4 Notes and Errors

Use notes as helpers on forms, or brief messages to your customers.

This is a standard note
This is a success message

This is an error message.

  • Bullets can offer more insight to the error
<div class="note">
  This is a standard note
</div>
<div class="note form-success">
  This is a success message
</div>
<div class="note form-error">
  <p>This is an error message.</p>
  <ul class="disc">
    <li>Bullets can offer more insight to the error</li>
  </ul>
</div>

5.5 Misc. Elements

Horizontal Rules

Default

hr

Invisible

hr.hr--clear

Small

hr.hr--small