Style Guide

Basic Styles

The basic building blocks of any website.

Building Your Content

Use these different modular Elements to contain the content on your page.

Fonts

Primary Font

Aa Open Sans

Open Sans is your primary font. Paragraphs and all basic text are in this font. If you need to assign this font, use the class .font-primary.

Secondary Font

Aa Libre Baskerville

Libre Baskerville is your secondary font. Headings 1-5 and other accent texts use this font. If you need to assign this font, use the class .font-secondary.

Headers

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header.
h6. This is a tiny header.

<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>
<h4>h4. This is a moderate header.</h4>
<h5>h5. This is a small header.</h5>
<h6>h6. This is a tiny header.</h6>

Typescale

You may adjust font-size by overriding an element's default size with css classes. This can be useful to size a <p> or <h1> through <h6> using the existing header sizes.

It's important not to skip heading levels when structuring your document. It confuses screen readers. For example, after using an <h2> in your code, the next heading used should be either <h2> or <h3>. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.


<p class="like-h1">Lorem Ipsum Dolor</p>
<p class="like-h2">Lorem Ipsum Dolor</p>
<p class="like-h3">Lorem Ipsum Dolor</p>
<p class="like-h4">Lorem Ipsum Dolor</p>
<p class="like-h5">Lorem Ipsum Dolor</p>
<p class="like-h6">Lorem Ipsum Dolor</p>

Paragraphs

This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. You have several options for highlighting text. The <strong> tag makes text bolder. The <em> tag makes text italicized. The <small> tag reduces your font size.You also have available the .underline class to underline your text as well as the .uppercase class to make your text uppercase.


<p>paragraph text</p>
<strong>makes text bolder</strong>
<em>makes text italicized</em>
<small>makes text smaller</small>
<span class="underline">underline your text</span>
<span class="uppercase">make your text uppercase.</span>

Links

Basic Links are styled in your primary color. This is an example of a link. If you'd like your link to have an arrow after it, add the class .link-more to it, like this: Learn More

If you have a need to remove the styling from your link, add the class .no-style to it, like this: Learn More


<a href="">This is an example of a link</a>
<a href="" class="link-more">Learn More</a>
<a href="" class="no-style">Learn More</a>

Dividers

Use dividers to define breaks between paragraphs or sections.



<hr />

Lists - Unordered

Use an unordered list to list things if the order of the items doesn't matter.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<ul>
   <li>List item number 1</li>
   <li>List item number 2</li>
   <li>List item number 3</li>
</ul>

Lists - Ordered

Use an ordered list when creating a list where the order of the items is important, like ranking something from best to worst.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  2. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  3. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<ol>
   <li>List item number 1</li>
   <li>List item number 2</li>
   <li>List item number 3</li>
</ol>

Lists - Description

Use a Description List to display name-value pairs, like metadata or a dictionary definition. Each term (<dt>) is paired with one or more definitions (<dd>)

HTML
Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on web pages.
CSS
Cascading Style Sheets are used to format the layout of Web pages.
JavaScript
An object-oriented computer programming language commonly used to create interactive effects within web browsers.

<dl>
   <dt>Title One</dt>
   <dd>Description One</dd>
   <dt>Title Two</dt>
   <dd>Description Two</dd>
   <dt>Title Three</dt>
   <dd>Description Three</dd>
</dl>

Blockquote

You gain strength, courage, and confidence by every experience in which you really stop to look fear in the face. You are able to say to yourself, 'I lived through this horror. I can take the next thing that comes along.'

Eleanor Roosevelt

<blockquote>
   <p>"You gain strength, courage, and confidence by every experience in which you really stop to look fear in the face. You are able to say to yourself, 'I lived through this horror. I can take the next thing that comes along.'"</p>
   <cite>Eleanor Roosevelt</cite>
</blockquote>

Text Alignment

Left Aligned Text

This the the standard alignment for text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


<p class="text-left">This the the standard alignment for text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Right Aligned Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.


<p class="text-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.</p>

Center Aligned Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.


<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.</p>

Justify Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.


<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud.</p>

Primary Color

#1b75bb
RGB(27,117,187)

.color-primary
.background-primary

Secondary Color

#2d2a29
RGB(45,42,41)

.color-secondary
.background-secondary

Tertiary Color

#808183
RGB(128,129,131)

.color-tertiary
.background-tertiary

Accent Color

#0f446e
RGB(15,68,110)

.color-accent
.background-accent

Support Color

#cdcdcd
RGB(205,205,205)

.color-support
.background-support

Support2 Color

#efefef
RGB(239,239,239)

.color-support2
.background-support2

White

#ffffff
RGB(255,255,255)

.color-white
.background-white

Black

#000000
RGB(0,0,0)

.color-black
.background-black

Using the color classes to switch out font colors is simple. Just assign that color class to your tag.

Heading 5 in Accent Color

This paragraph has a font color change in the very middle.


<h5 class="color-accent">Heading 5 in Accent Color</h5>
<p>This paragraph has a <span class="color-primary">font color change</span> in the very middle.</p>

A basic button can be created using the .btn class. If you'd like your button to stand out a little more, add the class.btn-large.

Standard Button

Learn More


<a class="btn">Learn More</a>

Large Button

Learn More


<a class="btn btn-large">Learn More</a>

There are several classes available to both size and position your images. If you would like your image to have style, add the class .img-styled to your image tag.

Available Width Classes

.width20 | .width25 | .width33 | .width40 | .width50 | .width66 | .width75 | .width100

Available Positioning Classes

.float-left | .float-right | .position-center

Image Floated Left 20% Width with No Style

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.


<p><img src="images/img-funny.jpg" class="float-left width25">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>

Styled Image Floated Right 50% Width

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.


<p><img src="images/img-funny.jpg" class="img-styled float-right width50">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>

Styled Image Centered 75% Width

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.


<p><img src="images/img-funny.jpg" class="img-styled position-center width75">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas.</p>

To make an embedded video responsive, add the class .flex-container to the containing tag. To give your responsive video some styling, add the class .flex-container-styled to the containing tag.


<p class="flex-container flex-container-styled">
   <iframe src="//www.youtube.com/embed/rd3A-y5sO5o" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</p>

Use tables for tabular data. To make your table responsive and styled, add the class .table-styled to your table tag.

Your Table Title
Header 1 Header 2 Header 3 Header 4 Header 5
Item 1 Item 2 Item 3 Item 4 Item 5
Item 1 Item 2 Item 3 Item 4 Item 5
Item 1 Item 2 Item 3 Item 4 Item 5
Item 1 Item 2 Item 3 Item 4 Item 5
Item 1 Item 2 Item 3 Item 4 Item 5

<table class="table-styled">
  <caption>Your Table Title</caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th>Header 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
      <td>Item 4</td>
      <td>Item 5</td>
    </tr>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
      <td>Item 4</td>
      <td>Item 5</td>
    </tr>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
      <td>Item 4</td>
      <td>Item 5</td>
    </tr>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
      <td>Item 4</td>
      <td>Item 5</td>
    </tr>
    <tr>
      <td>Item 1</td>
      <td>Item 2</td>
      <td>Item 3</td>
      <td>Item 4</td>
      <td>Item 5</td>
    </tr>
  </tbody>
</table>

  • What type of flooring are you interested in?
  • What room will your new flooring be in?

<svg>
   <use xlink:href="#search" />
</svg>


<svg>
   <use xlink:href="#phone" />
</svg>


<svg>
   <use xlink:href="#mail" />
</svg>


<svg>
   <use xlink:href="#facebook" />
</svg>


<svg>
   <use xlink:href="#youtube" />
</svg>


<svg>
   <use xlink:href="#instagram" />
</svg>


<svg>
   <use xlink:href="#twitter" />
</svg>


<svg>
   <use xlink:href="#google-plus" />
</svg>


<svg>
   <use xlink:href="#linkedin" />
</svg>


<svg>
   <use xlink:href="#pinterest" />
</svg>


<svg>
   <use xlink:href="#checkmark" />
</svg>


<svg>
   <use xlink:href="#mappin" />
</svg>


<svg>
   <use xlink:href="#caret-right" />
</svg>


<svg>
   <use xlink:href="#arrow-up" />
</svg>


<svg>
   <use xlink:href="#speech-bubble" />
</svg>

Question One Title

Pellentesque cursus porttitor nunc, vel pretium odio eleifend ac. Vestibulum dapibus, ligula et faucibus porttitor, turpis velit ornare magna, in convallis metus metus non enim. Morbi fermentum gravida libero vitae suscipit. Phasellus ac porttitor odio. Mauris rutrum sem eu nulla ullamcorper, vel varius neque viverra. Mauris eget ullamcorper nunc. Proin auctor ligula a feugiat iaculis. Phasellus ac metus odio.

Question Two Title

Pellentesque cursus porttitor nunc, vel pretium odio eleifend ac. Vestibulum dapibus, ligula et faucibus porttitor, turpis velit ornare magna, in convallis metus metus non enim. Morbi fermentum gravida libero vitae suscipit. Phasellus ac porttitor odio. Mauris rutrum sem eu nulla ullamcorper, vel varius neque viverra. Mauris eget ullamcorper nunc. Proin auctor ligula a feugiat iaculis. Phasellus ac metus odio.


<dl class="accordion-list">
 <dd class="accordion-wrap">
  <div class="accordion-toggle js-accordion-toggle">Question One Title</div>
  <div class="accordion-drawer js-accordion-drawer">
   <section>
    <p>Pellentesque cursus porttitor nunc, vel pretium odio eleifend ac. Vestibulum dapibus, ligula et faucibus porttitor, turpis velit ornare magna, in convallis metus metus non enim. Morbi fermentum gravida libero vitae suscipit. Phasellus ac porttitor odio. Mauris rutrum sem eu nulla ullamcorper, vel varius neque viverra. Mauris eget ullamcorper nunc. Proin auctor ligula a feugiat iaculis. Phasellus ac metus odio.</p>
   </section>
  </div>
 </dd>
 <dd class="accordion-wrap">
  <div class="accordion-toggle js-accordion-toggle">Question Two Title</div>
  <div class="accordion-drawer js-accordion-drawer">
   <section>
    <p>Pellentesque cursus porttitor nunc, vel pretium odio eleifend ac. Vestibulum dapibus, ligula et faucibus porttitor, turpis velit ornare magna, in convallis metus metus non enim. Morbi fermentum gravida libero vitae suscipit. Phasellus ac porttitor odio. Mauris rutrum sem eu nulla ullamcorper, vel varius neque viverra. Mauris eget ullamcorper nunc. Proin auctor ligula a feugiat iaculis. Phasellus ac metus odio.</p>
   </section>
  </div>
 </dd>
</dl>

Basic Cards

When building these cards, please keep in mind that the images need to be the same size. The images used for this pattern are 362px by 236px.

Card One Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar lectus sit amet nibh dapibus convallis. Donec in dignissim lorem.

Card Two Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar lectus sit amet nibh dapibus convallis. Donec in dignissim lorem.

Card Three Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar lectus sit amet nibh dapibus convallis. Donec in dignissim lorem.


<div class="row small-up-1 medium-up-2 large-up-3 cards">
 <div class="columns column-block">
  <section class="card">
   <img class="card-img" src="images/img-card-sample-1.jpg" />
   <div class="card-body">
    <h4 class="card-title">Card One Title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar lectus sit amet nibh dapibus convallis. Donec in dignissim lorem.</p>
   </div>
   <div class="card-foot">
    <p class="card-foot-text"><a class="link-more" href="/" title="">Text Only Link</a></p>
   </div>
  </section>
 </div>
 <div class="columns column-block">
  <section class="card">
   <img class="card-img" src="images/img-card-sample-2.jpg" />
   <div class="card-body">
    <h4 class="card-title">Card Two Title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar lectus sit amet nibh dapibus convallis. Donec in dignissim lorem.</p>
   </div>
   <div class="card-foot">
    <p class="card-foot-text"><a class="link-more" href="/" title="">Text Only Link</a></p>
   </div>
  </section>
 </div>
 <div class="columns column-block">
  <section class="card">
   <img class="card-img" src="images/img-card-sample-3.jpg" />
   <div class="card-body">
    <h4 class="card-title">Card Three Title</h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar lectus sit amet nibh dapibus convallis. Donec in dignissim lorem.</p>
   </div>
   <div class="card-foot">
    <p class="card-foot-text"><a class="link-more" href="/" title="">Text Only Link</a></p>
   </div>
  </section>
 </div>
</div>

Basic Cards Pattern Two

When building these cards, please keep in mind that the images need to be the same size. The images used for this pattern are 565px by 368px.

Card One Title

Card Two Title


<div class="row small-up-1 medium-up-2 cards">
  <div class="columns column-block">
    <section class="card card-alt">
      <a href="/" title=""><img class="card-img" src="images/img-card-sample-1.jpg"></a>
      <div class="card-body">
        <h4 class="card-title text-center">Card One Title</h4>
      </div>
      <div class="card-foot">
        <p class="card-foot-text text-center">
          <a class="btn" href="/" title="Learn More">Learn More</a>
        </p>
      </div>
    </section>
  </div>
  <div class="columns column-block">
    <section class="card card-alt">
      <a href="/" title=""><img class="card-img" src="images/img-card-sample-2.jpg"></a>
      <div class="card-body">
        <h4 class="card-title text-center">Card Two Title</h4>
      </div>
      <div class="card-foot">
        <p class="card-foot-text text-center">
          <a class="btn" href="/" title="Learn More">Learn More</a>
        </p>
      </div>
    </section>
  </div>
</div>

Product Cards

You man have up to three content sections in this pattern.

Sample One

This pattern has two .card-item.item-content sections.

Manuals
 

Sample Manual

Download
 

Sample Manual

Download

<div class="product-card">
  <div class="card-item item-head">
    <h6 class="item-head-title">Manuals</h6>
  </div>
  <div class="card-item item-content text-center">
    <a class="item-download-link" href="" title="">&nbsp;</a>
    <img class="item-download-icon" src="images/icon-pdf-download.png" />
    <h4 class="item-title">Sample Manual</h4>
    <span class="link-more item-download-link-more" href="" title="">Download</span>
  </div>
  <div class="card-item item-content text-center">
    <a class="item-download-link" href="" title="">&nbsp;</a>
    <img class="item-download-icon" src="images/icon-pdf-download.png" />
    <h4 class="item-title">Sample Manual</h4>
    <span class="link-more item-download-link-more" href="" title="">Download</span>
  </div>
</div>

If you would like your product card to have a different header background, just add the class .product-card-alt.

Manuals
 

Sample Manual

Download
 

Sample Manual

Download

<div class="product-card product-card-alt">
  <div class="card-item item-head">
    <h6 class="item-head-title">Manuals</h6>
  </div>
  <div class="card-item item-content text-center">
    <a class="item-download-link" href="" title="">&nbsp;</a>
    <img class="item-download-icon" src="images/icon-pdf-download.png" />
    <h4 class="item-title">Sample Manual</h4>
    <span class="link-more item-download-link-more" href="" title="">Download</span>
  </div>
  <div class="card-item item-content text-center">
    <a class="item-download-link" href="" title="">&nbsp;</a>
    <img class="item-download-icon" src="images/icon-pdf-download.png" />
    <h4 class="item-title">Sample Manual</h4>
    <span class="link-more item-download-link-more" href="" title="">Download</span>
  </div>
</div>

Sample Two

This pattern has two .card-item.item-content sections.

Hard Surface Flooring
Ceramic Tile

Nunc vitae nulla nec mauris finibus scelerisque. Aenean vitae justo sit amet erat molestie fermentum sed vel ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

View Product


<div class="product-card">
  <div class="card-item item-head">
    <h6 class="item-head-title">Hard Surface Flooring</h6>
  </div>
  <div class="card-item item-content">
    <h5>Ceramic Tile</h5>
    <p>Nunc vitae nulla nec mauris finibus scelerisque. Aenean vitae justo sit amet erat molestie fermentum sed vel ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p><a class="btn" href="/" title="View Product">View Product</a></p> 
  </div>
  <div class="card-item item-content">
    <img class="img-styled" src="images/img-sample-ceramic-tile.jpg" title="Ceramic Tile" />
  </div>
</div>

Sample Three

This pattern has three .card-item.item-content sections.

Manuals
 

Sample Manual

Download
 

Sample Manual

Download
 

Sample Manual

Download

<div class="product-card">
  <div class="card-item item-head">
    <h6 class="item-head-title">Manuals</h6>
  </div>
  <div class="card-item item-content text-center">
    <a class="item-download-link" href="" title="">&nbsp;</a>
    <img class="item-download-icon" src="images/icon-pdf-download.png" />
    <h4 class="item-title">Sample Manual</h4>
    <span class="link-more item-download-link-more" href="" title="">Download</span>
  </div>
  <div class="card-item item-content text-center">
    <a class="item-download-link" href="" title="">&nbsp;</a>
    <img class="item-download-icon" src="images/icon-pdf-download.png" />
    <h4 class="item-title">Sample Manual</h4>
    <span class="link-more item-download-link-more" href="" title="">Download</span>
  </div>
  <div class="card-item item-content text-center">
    <a class="item-download-link" href="" title="">&nbsp;</a>
    <img class="item-download-icon" src="images/icon-pdf-download.png" />
    <h4 class="item-title">Sample Manual</h4>
    <span class="link-more item-download-link-more" href="" title="">Download</span>
  </div>
</div>

Sample Four

This pattern has two .card-item.item-content sections with links stacked in column blocks. You may have as many .columns .column-block (stacked links) per row as you would like.

Manuals
 

Sample Manual

Download
 

Sample Manual

Download
 

Sample Manual

Download
 

Sample Manual

Download

<div class="product-card">
  <div class="card-item item-head">
    <h6 class="item-head-title">Manuals</h6>
  </div>
  <div class="card-item item-content text-center has-row">
    <div class="row small-up-1">
      <div class="columns column-block">
        <a class="item-download-link" href="" title="">&nbsp;</a>
        <img class="item-download-icon" src="images/icon-pdf-download.png" />
        <h4 class="item-title">Sample Manual</h4>
        <span class="link-more item-download-link-more" href="" title="">Download</span>
      </div>
      <div class="columns column-block">
        <a class="item-download-link" href="" title="">&nbsp;</a>
        <img class="item-download-icon" src="images/icon-pdf-download.png" />
        <h4 class="item-title">Sample Manual</h4>
        <span class="link-more item-download-link-more" href="" title="">Download</span>
      </div>
    </div>
  </div>
  <div class="card-item item-content text-center has-row">
    <div class="row small-up-1">
      <div class="columns column-block">
        <a class="item-download-link" href="" title="">&nbsp;</a>
        <img class="item-download-icon" src="images/icon-pdf-download.png" />
        <h4 class="item-title">Sample Manual</h4>
        <span class="link-more item-download-link-more" href="" title="">Download</span>
      </div>
      <div class="columns column-block">
        <a class="item-download-link" href="" title="">&nbsp;</a>
        <img class="item-download-icon" src="images/icon-pdf-download.png" />
        <h4 class="item-title">Sample Manual</h4>
        <span class="link-more item-download-link-more" href="" title="">Download</span>
      </div>
    </div>
  </div>
</div>

Sample Five

This pattern has two .card-item.item-content sections with an image slider and custom pager.

Media

Media Options

Choose from a variety of glass colors or mixed media to enhance the interior of your fireplace.

Carpet Ceramic Tile Laminate
Sample 04 Sample 05 Sample 06

Carpet

Ceramic Tile

Laminate

Sample 04

Sample 05

Sample 06


<div class="product-card" style="margin-top: 3rem;">
  <div class="card-item item-head">
    <h5 class="item-head-title">Media</h5>
  </div>
  <div class="card-item item-content">
    <h4>Media Options</h4>
    <p>Choose from a variety of glass colors or mixed media to enhance the interior of your fireplace.</p>
    <div class="img-slider-pager js-img-slider-pager">
      <div class="row small-up-1 medium-up-2">
        <div class="columns column-block" style="margin-bottom: 0;">
          <span class="button-0 button-active">Carpet</span>
          <span class="button-1">Ceramic Tile</span>
          <span class="button-2">Laminate</span>
        </div>
        <div class="columns column-block" style="margin-bottom: 0;">
          <span class="button-3">Sample 04</span>
          <span class="button-4">Sample 05</span>
          <span class="button-5">Sample 06</span>
        </div>
      </div>
    </div>
  </div>
  <div class="card-item item-content">
    <div class="img-slider js-img-slider">
      <div data-title="Carpet" class="img-slide">
        <img src="images/img-slider-sample-carpet.jpg" />
        <p class="img-slide-messaging">Carpet</p>
      </div>
      <div data-title="Ceramic Tile" class="img-slide">
        <img src="images/img-slider-sample-ceramic-tile.jpg" />
        <p class="img-slide-messaging">Ceramic Tile</p>
      </div>
      <div data-title="Laminate" class="img-slide">
        <img src="images/img-slider-sample-laminate.jpg" />
        <p class="img-slide-messaging">Laminate</p>
      </div>
      <div data-title="Carpet" class="img-slide">
        <img src="images/img-slider-sample-carpet.jpg" />
        <p class="img-slide-messaging">Sample 04</p>
      </div>
      <div data-title="Ceramic Tile" class="img-slide">
        <img src="images/img-slider-sample-ceramic-tile.jpg" />
        <p class="img-slide-messaging">Sample 05</p>
      </div>
      <div data-title="Laminate" class="img-slide">
        <img src="images/img-slider-sample-laminate.jpg" />
        <p class="img-slide-messaging">Sample 06</p>
      </div>
    </div>
  </div>
</div>

Panels are fullwidth patterns. These are build with the image in the html (vs. in the css) for easier switching of support images. The images used for this pattern are 1350px by 749px.

Media Panel with Left Aligned Content

Title Placeholder Goes Here

Nunc vitae nulla nec mauris finibus scelerisque. Aenean vitae justo sit amet erat molestie fermentum sed vel ligula. Loerm ipsum dolor.

Call to Action


<div class="panel media-panel">
  <div class="row align-right media-panel-media">
    <div class="columns small-12 medium-10 media-panel-media-container">
      <img class="media-panel-media-img" src="images/img-media-panel-sample-01.jpg" alt="" />
    </div>
  </div>
  <div class="row media-panel-messaging">
    <div class="columns small-12 medium-5 large-4 media-panel-messaging-container">
      <section class="media-panel-content">
        <h4>Title Placeholder Goes Here</h4>
        <p>Nunc vitae nulla nec mauris finibus scelerisque. Aenean vitae justo sit amet erat molestie fermentum sed vel ligula. Loerm ipsum dolor.</p>
        <p class="text-center"><a class="btn" href="/" title="">Call to Action</a></p>
      </section>
    </div>
  </div>
</div>

Media Panel with Right Aligned Content

Title Placeholder Goes Here

Nunc vitae nulla nec mauris finibus scelerisque. Aenean vitae justo sit amet erat molestie fermentum sed vel ligula. Loerm ipsum dolor.

Call to Action


<div class="panel media-panel">
  <div class="row media-panel-media">
    <div class="columns small-12 medium-10 media-panel-media-container">
      <img class="media-panel-media-img" src="images/img-media-panel-sample-02.jpg" alt="" />
    </div>
  </div>
  <div class="row align-right media-panel-messaging">
    <div class="columns small-12 medium-5 large-4 media-panel-messaging-container">
      <section class="media-panel-content">
        <h4>Title Placeholder Goes Here</h4>
        <p>Nunc vitae nulla nec mauris finibus scelerisque. Aenean vitae justo sit amet erat molestie fermentum sed vel ligula. Loerm ipsum dolor.</p>
        <p class="text-center"><a class="btn" href="/" title="">Call to Action</a></p>
      </section>
    </div>
  </div>
</div>

CTA Panel

H3 Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus orci lacus, imprecate ut molestie at, vehiicies mi. Nunc hendrerit sem.


<div class="panel cta-panel">
  <div class="cta-panel-content">
    <div class="row align-center">
      <div class="columns small-12 medium-10 large-6">
        <section class="cta-panel-intro">
          <h3 class="color-white">H3 Title</h2>
          <p class="color-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus orci lacus, imprecate ut molestie at, vehiicies mi. Nunc hendrerit sem.</p>
        </section>
        <section class="cta-panel-card">
          <div class="row small-up-1 medium-up-2">
            <div class="columns column-block">
              <a class="btn cta-panel-btn" href="" title="">Photo Gallery</a>
            </div>
            <div class="columns column-block">
              <a class="btn cta-panel-btn" href="" title="">Call to Action</a>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
  <div class="cta-panel-media">
    <img class="cta-panel-media-img" src="images/img-cta-panel-sample-01.jpg" alt="" />
  </div>
</div>

This pattern is wrapped in a .panel to pull it wider than the content. The images used for this pattern are 1306px by 639px.

Title Placeholder Goes Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus erat nec mauris tincidunt, venenatis facilisis turpis bibe.

Call to Action


<div class="panel">
  <div class="media-block">
    <div class="media-block-media">
      <img class="media-block-img" src="images/img-media-block-sample-01.jpg" alt="" />
    </div>
    <div class="row media-block-messaging">
      <div class="columns small-12 medium-5 large-4 media-block-messaging-container">
        <section class="media-block-content">
          <h3 class="color-white">Title Placeholder Goes Here</h3>
          <p class="color-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus erat nec mauris tincidunt, venenatis facilisis turpis bibe.</p>
          <p class="text-center"><a class="btn" href="/" title="">Call to Action</a></p>
        </section>
      </div>
    </div>
  </div>
</div>

The images used for this pattern are 963px by 556px.

Sample Title Here

Nunc vitae nulla nec mauris finibus scelerisque. Aenean vitae justo sit amet erat molestie fermentum sed vel ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn More


<div class="row collapse expanded align-middle align-right content-block">
  <div class="columns small-12 medium-6 medium-order-2">
    <section class="content-block-media">
      <img class="content-block-img" src="images/img-content-block-sample-01.jpg" alt="">
    </section>
  </div>
  <div class="columns small-12 medium-6 medium-order-1 content-block-content-wrap">
    <section class="content-block-content">
      <h3>Sample Title Here</h3>
      <p>Nunc vitae nulla nec mauris finibus scelerisque. Aenean vitae justo sit amet erat molestie fermentum sed vel ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p><a class="btn" href="/" title="">Learn More</a></p>
    </section>
  </div>
</div>

Sample Title Here

Nunc vitae nulla nec mauris finibus scelerisque. Aenean vitae justo sit amet erat molestie fermentum sed vel ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn More


<div class="row collapse expanded align-middle content-block">
  <div class="columns small-12 medium-6">
    <section class="content-block-media">
      <img class="content-block-img" src="images/img-content-block-sample-02.jpg" alt="">
    </section>
  </div>
  <div class="columns small-12 medium-6 content-block-content-wrap">
    <section class="content-block-content">
      <h3>Sample Title Here</h3>
      <p>Nunc vitae nulla nec mauris finibus scelerisque. Aenean vitae justo sit amet erat molestie fermentum sed vel ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p><a class="btn" href="/" title="">Learn More</a></p>
    </section>
  </div>
</div>

Content Slider on Interiors

This pattern is wrapped in a .panel to pull it wider than the content. The desktop images used for this pattern are 1306px by 639px and the thumbnail images for mobile are 640px by 500px.

Title Placeholder Goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus erat nec mauris tincidunt, venenatis facilisis turpis bibe.

Call to Action

Another Title Placeholder Goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus erat nec mauris tincidunt, venenatis facilisis turpis bibe.

Call to Action


<div class="panel">
  <div class="content-slider js-content-slider">
    <div class="content-slide">
      <div class="media-block">
        <div class="media-block-media"><img class="media-block-img" alt="" data-interchange="[images/img-content-slide-sample-01-thumb.jpg, small], [images/img-content-slide-sample-01.jpg, medium]" />
        </div>
        <div class="row media-block-messaging">
          <div class="columns small-12 medium-5 large-4 media-block-messaging-container">
            <section class="media-block-content">
              <h3 class="color-white">Title Placeholder Goes here</h3>
              <p class="color-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus erat nec mauris tincidunt, venenatis facilisis turpis bibe.</p>
              <p class="text-center"><a class="btn" href="" title="">Call to Action</a></p>
            </section>
          </div>
        </div>
      </div>
    </div>
    <div class="content-slide">
      <div class="media-block">
        <div class="media-block-media"><img class="media-block-img" alt="" data-interchange="[images/img-content-slide-sample-02-thumb.jpg, small], [images/img-content-slide-sample-02.jpg, medium]" />
        </div>
        <div class="row media-block-messaging">
          <div class="columns small-12 medium-5 large-4 media-block-messaging-container">
            <section class="media-block-content">
              <h3 class="color-white">Another Title Placeholder Goes here</h3>
              <p class="color-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus erat nec mauris tincidunt, venenatis facilisis turpis bibe.</p>
              <p class="text-center"><a class="btn" href="" title="">Call to Action</a></p>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Image Slider

The images used for this pattern are 549px by 379px.

Carpet

Ceramic Tile

Laminate


<div class="row align-center">
  <div class="columns small-12 medium-10 large-8">
    <div class="img-slider js-img-slider">
      <div data-title="Carpet" class="img-slide">
        <img src="images/img-slider-sample-carpet.jpg" />
        <p class="img-slide-messaging">Carpet</p>
      </div>
      <div data-title="Ceramic Tile" class="img-slide">
        <img src="images/img-slider-sample-ceramic-tile.jpg" />
        <p class="img-slide-messaging">Ceramic Tile</p>
      </div>
      <div data-title="Laminate" class="img-slide">
        <img src="images/img-slider-sample-laminate.jpg" />
        <p class="img-slide-messaging">Laminate</p>
      </div>
    </div>
  </div>
</div>

If you'd would like to use this Logo Band, please place the custom include in your Empoweren content.

Premium Brands Provided by XL

Logo for Shaw Floors
Logo for Mohawk
Logo for Coretec
Logo for Engineered Floors
Logo for Paramount

<custom title="logoBand">Logo Band</custom>

×

Pop Up Form

  • (mm/dd/yyyy)