The entire typographic grid is based on two Less variables in our variables.less file: @baseFontSize
and @baseLineHeight
. The first is the base font-size used throughout and the second is the base line-height.
We use those variables, and some math, to create the margins, paddings, and line-heights of all our type and more.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.
Element | Usage | Optional |
---|---|---|
<blockquote>
|
Block-level element for quoting content from another source |
Add .pull-left and .pull-right classes for floated options
|
<small>
|
Optional element for adding a user-facing citation, typically an author with title of work |
Place the <cite> around the title or name of source
|
To include a blockquote, wrap <blockquote>
around any HTML as the quote. For straight quotes we recommend a <p>
.
Include an optional <small>
element to cite your source and you'll get an em dash —
before it for styling purposes.
- <blockquote>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
- <small>Someone famous</small>
- </blockquote>
Default blockquotes are styled as such:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Someone famous in Body of work
To float your blockquote to the right, add class="pull-right"
:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.
Someone famous in Body of work
<ul>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
Use button groups to join multiple buttons together as one composite component. Build them with a series of <a>
or <button>
elements.
We recommend the following guidelines for using button groups and toolbars:
<a>
or <button>
.Related Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.
Here's how the HTML looks for a standard button group built with anchor tag buttons:
- <div class="btn-group">
- <button class="btn">1</button>
- <button class="btn">2</button>
- <button class="btn">3</button>
- </div>
Combine sets of <div class="btn-group">
into a <div class="btn-toolbar">
for more complex components.
- <div class="btn-toolbar">
- <div class="btn-group">
- ...
- </div>
- </div>
Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View the Javascript docs for that.
Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group
within a .btn-toolbar
for proper rendering.