<%= title %>
<%= description %>
Repeatable sections
You can basically put whatever markup you want inside of .demo-content
>
.container
, but note that it will live inside a responsive (fluid) page
and should be built accordingly. We are showing repeatable sections and subsections as
options for you in organizing your content.
Your demo content can contain sample code, the output from the code, and explanation of how it works, multiple examples, links out to more documentation, etc. Code samples should be in Github Gists.
Repeatable subsections
Subsection subtitle
This is a .subsection
. The text is inside a
.subsection-body
. Title and Subtitle use the regular
.title
and .subtitle
classes respectively. The
subtitle should be on a block level element like a <p> element. Both should
be inside an element (preferably a <header>
with the subsection-header
class.
Repeatable subsections
Subsection subtitle
This content does not have a max width on it, it's inside a grid column. Any wider than this, and the line length of the body copy looks bad.
Tables
Song | Artist | Album | Genre | Last played |
---|---|---|---|---|
Love Her Madly | The Doors | L.A. Woman | Classic Rock | 21 Feb, 2015 |
Hurt | Johnny Cash | American Ⅳ | Country | 12 Feb, 2015 |
Good Times Bad Times | Led Zeppelin | Led Zeppelin | Classic Rock | 01 Jan, 2015 |
I Know it's Over | The Smiths | The Queen is Dead | Alternative Rock | 30 Jan, 2015 |
Controls
Buttons
Elements
Class
Please don't use .button
, unless you really have to. If you do, you MUST
add all relevent accessibility information. It might look like
a button, but it is not a button.
Button states
Primary buttons
Add .primary
class to make the button the main (highlighted) button.
Disabled buttons
Add the disabled
attribute to make the button disabled. This is only valid
on actual controls, such as button
, input
,
fieldset
, etc. If you are using a fake button (such as <a
class="button">
, then you should use the .disabled
class. Note,
that this isn’t really a button and not really disabled, so use with extreme caution and
add the required accessibility information.