Styleguide

Headers

h1. This is a very large header.

h2. This is a large header And more text.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader
h6.subheader

h1. Small segment header.

h2. Small segment header.

h3. Small segment header.

h4. Small segment header.

h5. Small segment header.
h6. Small segment header.

Paragraphs/Links

Links are very standard, and the color is preset to the Foundation primary color.

Paragraph with grey font for dark background

Paragraph with blue font for dark background

Lists

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested list item
    • Nested list item
    • Nested list item
  • List item
  • List item
  • List item
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item
  1. List item with a much longer description or more content.
  2. List item
  3. List item
    1. Nested List Item
    2. Nested List Item
    3. Nested List Item
  4. List item
  5. List item
  6. List item

Inline List

Side Nav

Definition

Definition Title
Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.

Blockquotes

Those people who think they know everything are a great annoyance to those of us who do.Isaac Asimov

Sub Nav

Filter:
All
Active
Pending
Suspended

Breadcrumbs

Pagination

Forms

.com

Fieldset

Fieldset Legend

Pre/Postfix Labels & Actions

http://
Go
Label
Label
Go
Go

Range Sliders

Buttons

Tiny Button Small Button Default Button Disabled Button Large Button Expanded Button Round Button Radius Button Default Button Success Button Secondary Button Alert Button Info Button Disabled Button

Button Groups

Alerts

This is a success alert with a radius. ×
This is a warning alert that is rounded. ×
This is an info alert with a radius. ×
This is an alert - alert that is rounded. ×
This is a secondary alert. ×

Panels

This is a regular panel.

It has an easy to override visual style, and is appropriately subdued.

This is a callout panel.

It's a little ostentatious, but useful for important content.

Tables

Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Accordions

  • Accordion 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur maximus, lorem nec consectetur aliquet, mauris augue consectetur nunc, vel lacinia arcu justo at quam. Aenean ullamcorper lectus a leo tempus, accumsan efficitur ex vehicula. Ut nec ullamcorper urna, quis tempor turpis.

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur maximus, lorem nec consectetur aliquet, mauris augue consectetur nunc, vel lacinia arcu justo at quam. Aenean ullamcorper lectus a leo tempus, accumsan efficitur ex vehicula. Ut nec ullamcorper urna, quis tempor turpis.

Vertical Tabs

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.