Typography & Layout

This is a lead to the story below. This is a template in Spinternet.

This is just some text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id tristique tellus. Vivamus erat ligula, varius congue sodales sit amet, tincidunt eget risus. Maecenas mattis felis at purus egestas tincidunt. Nulla quis faucibus eros. Mauris erat metus, laoreet sed aliquam vel, tristique sit amet turpis. Donec sed turpis at libero pharetra condimentum nec vel tortor. Praesent laoreet libero et dui egestas ac congue dolor porttitor. Morbi aliquam sollicitudin iaculis

Page Headings

Heading elements implement six levels of document headings, <h1> is the most important and <h6> is the least. A heading element briefly describes the topic of the section it introduces.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Text Size & Color

Please use discretion when changing the size and color of text. You may use color and size in combination to customize even further.

Color

• Text "Cooler"
• Text "Success"
• Text "Warmer"
• Text "Danger"

Size

• Text "Smaller"
• Text "Small"
• Text "Large"
• Text "Larger"
• Text "Largest"

Quotes

Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

John Shoumers, ACME Co.

Figure

Figures are images and image captions (or <figcaption>) that support the content. Donec sed turpis at libero pharetra condimentum nec vel tortor. Praesent laoreet libero et dui egestas ac congue dolor porttitor. Morbi aliquam sollicitudin iaculis

1. Ordered List
2. Ordered List
3. Ordered List
4. Ordered List
5. Ordered List

Aside

Asides are used for information that supports the main body of content. The <aside> is placed above the paragraph it goes with. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id tristique tellus. Vivamus erat ligula, varius congue sodales sit amet, tincidunt eget risus.

• Unordered List
• Unordered List
• Unordered List
• Unordered List
• Unordered List

Code

<p>Inline code</p>

Buttons

Buttons are organized in 4 rows, by color, width (full-width), icons and size. Any class from each of the three rows may be combined to customize a button.

ButtonButton DangerButton Success

Button Full Width

Button XLargeButton LargeButton SmallButton Mini

Table Data

Table Data + Condensed

Table Data + Condensed + Stripe

Table List

Table List + Condensed

Table List + Condensed + Stripe

Horizontal Rule

---