Typography & Helpers

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 AMPaction heading

Semibold 36px

h2. A AMPaction heading

Semibold 24px

h3. A AMPaction heading

Semibold 21px

h4. A AMPaction heading

Semibold 18px

h5. A BlogrAMP heading

Semibold 16px

h6. A AMPaction heading

Semibold 15px

<h1>h1. A AMPaction heading</h1>
<h2>h2. A AMPaction heading</h2>
<h3>h3. A AMPaction heading</h3>
<h4>h4. A AMPaction heading</h4>
<h5>h5. A AMPaction heading</h5>
<h6>h6. A AMPaction 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.

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. 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.

Email address

Password

File input

Check me out

Textarea

<form> 
 <div class="form-group">
  <label for="exampleInputEmail">Email address</label> 
  <input type="email" class="form-control" id="exampleInputEmail" placeholder="Email"/> 
 </div> 
 <div class="form-group"> 
  <label for="exampleInputPassword">Password</label> 
  <input type="text" class="form-control" id="exampleInputPassword" 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="button" class="btn btn-primary">Submit</button>
</form>

Buttons

Button tags

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

Link

<a class="btn" href="#" role="button">Link</a> 
<button class="btn btn-flat" type="button">Button</button> 
<input class="btn btn-primary" type="button" value="Input"/> 
<button class="btn" type="button"><i class="material-icons">mail</i> Button Icons</button>
<button class="btn btn-primary" type="button"><i class="material-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>

Responsive Videos

Wrap a video element with a <div/> with class flex-vids to assigned make your videos responsive - viewable 4 by 3 ratio on any screen sizes.

<div class="flex-vids">
  <iframe allowfullscreen="" class="" data-thumbnail-src="https://i.ytimg.com/vi/3QFLbGuTTqE/0.jpg" frameborder="0" src="https://www.youtube.com/embed/3QFLbGuTTqE?feature=player_embedded"></iframe>
</div>

Wrap a video element with a <div/> with class flex-vids.wide to assigned make your videos responsive - viewable 16 by 9 ratio on any screen sizes.

<div class="flex-vids wide">
  <iframe allowfullscreen="" class="" data-thumbnail-src="https://i.ytimg.com/vi/3QFLbGuTTqE/0.jpg" frameborder="0" src="https://www.youtube.com/embed/3QFLbGuTTqE?feature=player_embedded"></iframe>
</div>