This documentation displays theme typography and pre-assigned helper classes with styling for quick body text formatting.

Headings

All HTML headings, <h1> through <h6>, are available.

h1. A BlogrAMP heading

Semibold 36px

h2. A BlogrAMP heading

Semibold 24px

h3. A BlogrAMP heading

Semibold 21px

h4. A BlogrAMP heading

Semibold 18px

h5. A BlogrAMP heading

Semibold 16px

h6. A BlogrAMP heading

Semibold 15px

<h1>h1. A BlogrAMP heading</h1>
<h2>h2. A BlogrAMP heading</h2>
<h3>h3. A BlogrAMP heading</h3>
<h4>h4. A BlogrAMP heading</h4>
<h5>h5. A BlogrAMP heading</h5>
<h6>h6. A BlogrAMP heading</h6>

Body Copy

Blockquotes

For quoting blocks of content from another source within your document.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</blockquote>

Lists

Unordered

A list of items in which the order does not explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Phasellus iaculis neque
Purus sodales ultricies
Vestibulum laoreet porttitor sem
Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul>
 <li>...</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
<li>...</li>
</ol>

With Children

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>
  <ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
</li>
<li>...</li>
<li>...</li>
</ul>

Forms

Basic example

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with.form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

<form> 
 <div class="form-group">
  <label for="exampleInputEmail1">Email address</label> 
  <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Email"/> 
 </div> 
 <div class="form-group"> 
  <label for="exampleInputPassword1">Password</label> 
  <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Password"/> 
 </div> 
 <div class="form-group"> 
  <label for="exampleInputFile">File input</label> 
  <input type="file" id="exampleInputFile"/>
  </div>
 <div class="checkbox">
  <label><input type="checkbox"/> Check me out </label> 
 </div>
 <div class="form-group"> 
  <label for="exampleTextArea">File input</label> 
  <textarea class="form-control" rows="5" id="exampleTextArea"> </textarea>
  </div>
 <button type="submit" class="btn btn-primary">Submit</button>
</form>

Buttons

Button tags

Use the button classes on an <a>, <button>, or <input> element.

Version 2-0-0

Link

<a class="btn" href="#" role="button">Link</a> 
<button class="btn btn-flat" type="submit">Button</button> 
<input class="btn btn-primary" type="button" value="Input"/> 
<input class="btn btn-primary btn-flat" type="submit" value="Submit"/>
<button class="btn" type="button"><i class="fa fa-envelope-o"></i> Button Icons</button>
<button class="btn btn-primary" type="button"><i class="fa fa-envelope-o"></i> Button Icons</button>

Version 1-0-0

Link

<a class="btn" href="#" role="button">Link</a> 
<button class="btn btn-flat" type="submit">Button</button> 
<input class="btn btn-primary" type="button" value="Input"/> 
<input class="btn btn-primary btn-flat" type="submit" value="Submit"/>
<button class="btn" type="button"><i class="md-icons">mail</i> Button Icons</button>
<button class="btn btn-primary" type="button"><i class="md-icons">mail</i> Button Icons</button>

Code

Wrap text with <code>code</code> for inline code highlighting.

Pre

Wrap a paragraph with <pre> ... </pre> for code syntax like highlighting.

<pre>
... some text ...
... some text ...
... some text ...
</pre>

Tables

Add class table to create a responsive table with styling. Add class data-th with its matching th values at table body td .

On screen sizes < 480px table <thead> will be hidden and data-th values assigned will be shown instead.

Head 1	Head 2	Head 3
Column 1-1	Column 1-2	Column 1-3
Column 2-1	Column 2-2	Column 2-3
Column 3-1	Column 3-2	Column 3-3

<table class="table">
  <thead>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
      <th>Head 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-th="Head 1">Column 1-1</td>
      <td data-th="Head 2">Column 1-2</td>
      <td data-th="Head 3">Column 1-3</td>
    </tr>
   <tr>
     <td data-th="Head 1">Column 2-1</td>
     <td data-th="Head 2">Column 2-2</td>
     <td data-th="Head 3">Column 2-3</td>
   </tr>
   <tr>
     <td data-th="Head 1">Column 3-1</td>
     <td data-th="Head 2">Column 3-2</td>
     <td data-th="Head 3">Column 3-3</td>
   </tr>
  </tbody>
</table>

Topics

Categories

Useful Links

Blogr-AMP

Typography