<%= 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.
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:
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.
- 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
.
Code Examples
Result
Here you would place the output of your example code. This can essentially be whatever markup you want.
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
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
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.
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.
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.
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
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.