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.
- 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.
<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
<a class="btn">Learn More</a>
Large Button
<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.
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>
<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.
<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.
<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=""> </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=""> </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
.
<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=""> </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=""> </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.
<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.
<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=""> </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=""> </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=""> </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.
<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=""> </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=""> </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=""> </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=""> </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.
<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.
<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.
<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.
<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.
<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>
<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.
<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.
<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
<custom title="logoBand">Logo Band</custom>