<%= title %>

3 main sections are required: the demo intro, the demo content, and the demo details. This template has multiple "sections" within the demo content simply to organize the elements that have already been styled for you.* In considering how to break up your demo content, each time you use .section-title you should probably be starting a new section.

*Obviously right now the styling is not finished, this is the stuff we anticipate styling.

Grid System

  • You don't need to wrap everything in a grid row, only the bits that really need to be in columns.
  • Bottom margins are attached to what your interior content is, not to grid columns.
12
1
11
2
10
3
9
4
8
5
7
6
6

You can optionally change the width of columns on "medium" browsers (final breakpoints TBD) using classes like .col-med-4. You have all 12 column widths available to you. Here's a couple examples:

3
9
2
10
3
3
3
3

Typographic Elements

The line below this text is an hr tag.


Section subtitle

Donec iaculis tempor lacus in tempor. Nunc fermentum dapibus sem sed tempor. Nullam tincidunt quam at tellus mattis semper. Mauris id interdum quam, in molestie elit.

Section subtitle

Donec iaculis tempor lacus in tempor. Nunc fermentum dapibus sem sed tempor. Nullam tincidunt quam at tellus mattis semper. Mauris id interdum quam, in molestie elit.


This is a pull quote. Use it to highlight key thoughts in a large block of text.

You can use whatever grid column width you want; .col-lrg-4 and .col-med-6 are used here as an example.

Remove .pull-quote--right to float this pull quote to the left of the text (default behavior).

Donec iaculis tempor lacus in tempor. Nunc fermentum dapibus sem sed tempor. Nullam tincidunt quam at tellus mattis semper. Mauris id interdum quam, in molestie elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      • Third level
      • Pretty standard stuff
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This sentence contains inline code.

This is an error message with an icon.

This is a small error message without an icon.

This is a success message with an icon.

This is a small error message without an icon.

Code Examples

Result

Here you would place the output of your example code. This can essentially be whatever markup you want.

This is an optional caption to further describe something about the output of the code. Extra details, reasons why this example is different than the one next to it...

This title is optional

Here you would place the output of your example code. This can essentially be whatever markup you want.

Tables

Tables have a minimum width set, so that .table-wrap has a horizontal scrollbar on narrow browser widths.

Label Label Label
Vertical Label A value goes in this cell A value goes in this cell A value goes in this cell
Vertical Label A value goes in this cell A value goes in this cell A value goes in this cell
Vertical Label A value goes in this cell A value goes in this cell A value goes in this cell
Vertical Label A value goes in this cell A value goes in this cell A value goes in this cell

Form Elements

This form has labels next to fields
Placeholder should give more info about expected format or value (should not be used for labels)

This form has labels above fields
Range value

Sometimes you may just want a couple loose fields:

More Button States

Button styles are element-agnostic. Use classes to apply styles to anchor links, buttons, or inputs.

Media Elements

Images

Feature Section

You can put a custom class on a section to add special styling. As you can see, the container div lives inside each section, so that if you wanted a full-bleed background you'd be free to use it.

Interactive or Fancy Design Patterns

Further ways to organize a whole bunch of information.

Accordions

Title of this accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Title of this accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Title of this accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Title of this accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Bar Graph

Label Goes Here
Label Goes Here
Label Goes Here
Label Goes Here
Label Goes Here

Status Bar


Small Loading Animation


Flash Cards

vocabulary term

This is the definition of the term seen here. This design pattern expects a simple paragraph or two, not complex markup.

vocabulary term

This is the definition of the term seen here. This design pattern expects a simple paragraph or two, not complex markup.


Modal Dialog Box

Trigger the modal box