Page Style Guide

This is a page that demonstrates how to use the various elements and their classes to make standard pages look presentable.
Please don't modify this page as it will serve as a reference when you are creating new pages.

Headings

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading

Paragraph

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.


Blockquote

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Etiam ultricies nisi vel augue. Curabitur a felis in nunc fringilla tristique. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.

List Types

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Styled Unordered List

  • List Item 1
  • List Item 2
  • List Item 3
<ul class="block">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

Layouts

Aliquam eu nunc. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Maecenas vestibulum mollis diam. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Curabitur ullamcorper ultricies nisi.

Aliquam eu nunc. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc.

<div class="container">
  <div class="one-half"> 
    <p> This is the left column. </p>
  </div>

  <div class="one-half"> 
    <p> This is the right column. </p>
  </div>
</div>

<div class="container">
  <div class="one-third"> 
    <p> This is the left column. </p>
  </div>

  <div class="one-third"> 
    <p> This is the middle column. </p>
  </div>

  <div class="one-third"> 
    <p> This is the right column. </p>
  </div>
</div>

Aliquam eu nunc. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc.

<div class="container">
  <div class="one-third"> 
    <p> This is the left column. </p>
  </div>

  <div class="two-thirds"> 
    <p> This is the right column. </p>
  </div>
</div>

Aliquam eu nunc. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc.

<div class="container">
  <div class="two-thirds"> 
    <p> This is the left column. </p>
  </div>

  <div class="one-third"> 
    <p> This is the right column. </p>
  </div>
</div>

Aliquam eu nunc. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium.

Aliquam eu nunc. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium.

Aliquam eu nunc. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium.

Aliquam eu nunc. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium.

<div class="container">
  <div class="one-quarter"> 
    <p> Column 1 </p>
  </div>

  <div class="one-quarter"> 
    <p> Column 2 </p>
  </div>

  <div class="one-quarter"> 
    <p> Column 3 </p>
  </div>

  <div class="one-quarter"> 
    <p> Column 4 </p>
  </div>
</div>

Aliquam eu nunc. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc.

Aliquam eu nunc. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. In dui magna, posuere eget, vestibulum et, tempor auctor, justo.

<div class="container">
  <div class="three-quarters"> 
    <p> This is the left column. </p>
  </div>

  <div class="one-quarter"> 
    <p> This is the right column. </p>
  </div>
</div>

Full-Width Banner

This Is An H2 Header

This is a normal paragraph; but, you can use any other elements in here, including images!

<div class="splash" data-background="#EB6047">
  <h2>Heading</h2>
  <p> This is a subheading. </p>
</div>

// comment: the above code example has an orange background color

Full-Width Image Banner

This Is An H2 Header

This is a normal paragraph. This is also an example. But you already knew that. :)

<div class="splash" data-background-image="//placehold.it/1200x300" data-background-image-mobile="//placehold.it/600x300">
  <h2>Heading</h2>
  <p> This is a subheading. </p>
</div>

// comment: use an image URL inside the `data-background` attribute

Vertically Aligned Text with Image

This is a Heading

This is a normal paragraph. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla porta dolor.

<div class="text-with-image" data-image="//cdn.shopify.com/s/files/1/0177/6214/t/16/assets/img.apple-watch-bac-testing.png">
  <div class="text">
    <h1> This is a Heading </h1>
    <p> This is a normal paragraph. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla porta dolor. </p>
  </div>
</div>

// comment: add "data-image" attribute and use full image like in the example above

This is a Heading

This is a normal paragraph. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla porta dolor.

// comment: same as above code - just add the "reverse" class to the <div>

<div class="text-with-image reverse" data-image="//insert-image-url-here.png">
  ...
</div>