General
Our sites use HTML5 and many CSS3 properties with graceful fallbacks for older browsers and those browsers that just don't want to play nice.
Your doctype must be <!DOCTYPE html>
Introduction
About This Style Guide
-
This guide serves as the official front-end user-interface branding guide and resource for ShoppersChoice.com and our family of brands. It will help define all visual and stylistic elements and will provide you with all of the tools and assets you will need to fully utilize our branding through all applicable media and methods of brand communication.
-
All code and mark-up presented here is considered the appropriate and preferred format for use in all of our websites. It has all been and always will be researched, scrutinized, and optimized for ideal performance in meeting a spectrum of concerns; including SEO, marketing campaigns, statistical tracking, actual page load speed, and “perceived” page load speed – all while providing function and value to our website and the customer experience. If you or your department have a legitimate and necessary change done to the current format for any base-level or component mark-up, then contact the IT Department with your request and it will be given the proper assessment—and upon approval—employment based upon urgency and priority.
Modular Reusable Components
A component can be re-purposed and “themed” in various styles and purposes using simple CSS classes. While they may appear different visually, they possess the same underlying code structure. All these components are then all used together to create complete page layouts.
Working with re-usable components make the iteration process faster as well. Faster and more reusable means that the work our team performs results in a greater value for our company and an ever greater value for our customers.
Best-practices
We should be thinking about the front-end code as modular pieces of a larger system. Whether they’re based on strategy, components, or layout, they should all be built with extendibility in mind.
Components
-
- Flexible Grid
- Typography: Modular Scale and Baseline
- Navigation/Menus/Dropdowns
- Form Controls (Accessible)
- Carousels/Sliders
-
- Tabbed navigation
- Responsive tables
- Accordions
- Modals
- Auto-scrolling Jumplinks
-
- Pagination
- Data tables
- Buttons
- Icon fonts
Strategies
-
- Responsive images
- Responsive typography
- Accessibility architecture
-
- Legacy browser support
- i18n/l10n tolerance
- Performance budget
-
- Interaction/Animations
- Marketing promotions
- Persistent presence of Support
Layouts
-
- Homepage
- Department page
- Brand page
- Category page
-
- Landing page
- Item page
- Article page
- Specialty page
-
- Video library page
- Account sign-up flow
- Checkout flow
ShoppersChoice.com Brand Colors
-
Primary
-
#9F2429rgb(159,36,41) -
#DB7C24rgb(219, 124, 36) -
#EAB336rgb(234, 179, 54) -
#749E56rgb(116, 158, 86) -
#1A5F99rgb(26, 95, 153) -
#36546Argb(54, 84, 106) -
#2D3D42rgb(45, 61, 66)
Font Stacks
“Helvetica Neue”, Helvetica, Arial, sans-serif;
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz(.,;:’”$#@!&*)0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz(.,;:’”$#@!&*)0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz(.,;:’”$#@!&*)0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz(.,;:’”$#@!&*)0123456789
Georgia, “Times New Roman”, Times, serif;
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz(.,;:’”$#@!&*)0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz(.,;:’”$#@!&*)0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz(.,;:’”$#@!&*)0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz(.,;:’”$#@!&*)0123456789
Base Element Styles
address
Usage
Add your personalized documentation here.
Example
Company Name, Inc.811 7th Ave, Suite 700
Manhattan, NY 10019
USA
Select All Code
<address>
Company Name, Inc.<br>
811 7th Ave, Suite 700<br>
Manhattan, NY 10019<br>
USA
</address>blockquote
Usage
Add your personalized documentation here.
Example
Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.
Even better philosophical quote marked up with just a <blockquote> element.
Select All Code
<blockquote>
<p>Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.</p>
</blockquote>
<blockquote>Even better philosophical quote marked up with just a <blockquote> element.</blockquote>details
Usage
Add your personalized documentation here.
Example
More info
Additional information
- Point 1
- Point 2
More info
Additional information
- Point 1
- Point 2
More info
Additional information
- Point 1
- Point 2
Select All Code
<details open>
<summary>More info</summary>
<div>
<p>Additional information</p>
<ul>
<li>Point 1</li>
<li>Point 2</li>
</ul>
</div>
</details>
<details>
<summary>More info</summary>
<div>
<p>Additional information</p>
<ul>
<li>Point 1</li>
<li>Point 2</li>
</ul>
</div>
</details>
<details>
<summary>More info</summary>
<div>
<p>Additional information</p>
<ul>
<li>Point 1</li>
<li>Point 2</li>
</ul>
</div>
</details>figure
Usage
Add your personalized documentation here.
Example
Figure Title
Figcaption contentSelect All Code
<figure>
<img src="http://placehold.it/240x240" alt="Image Alt Text">
<figcaption>Figcaption content</figcaption>
</figure>
<figure>
<img src="http://placehold.it/240x240" alt="Image Alt Text">
<figcaption>
<h4>Figure Title</h4>
Figcaption content
</figcaption>
</figure>Select All Code
<form>
<fieldset>
<p><input type="button" value="Input type button"></p>
<p><input type="reset" value="Input type reset"></p>
<p><input type="submit" value="Input type submit"></p>
<p><input type="submit" value="Input type submit disabled" disabled></p>
<p><button type="button" class="btn">Button type button</button></p>
<p><button type="reset" class="btn">Button type reset</button></p>
<p><button type="submit" class="btn">Button type submit</button></p>
<p><button type="button" class="btn" disabled>Button type button disabled</button></p>
<p><button class="btn">Button</button></p>
</fieldset>
</form>Select All Code
<form>
<fieldset>
<div><label>Text input</label> <input type="text"></div>
<div><label>Text input with placeholder</label> <input type="text" placeholder="I'm placeholder text"></div>
<div><label>Readonly input</label> <input type="text" value="Read only text input" readonly></div>
<div><label>Disabled input</label> <input type="text" value="Disabled text input" disabled></div>
<div><label>Required input <span class="required">*</span></label> <input type="text" required></div>
<div><label>Email input</label> <input type="email"></div>
<div><label>Search input</label> <input type="search"></div>
<div><label>Speech recognition input</label> <input type="text" id="speech" name="speech" x-webkit-speech=""></div>
<div><label>Tel input</label> <input type="tel"></div>
<div><label>Phone (International)</label> <input name="field_country_code" maxlength="3" /> - <input name="field_city_code" maxlength="4" /> - <input name="field_phone_int" maxlength="8" /></div>
<div><label>URL input</label> <input type="url" placeholder="http://"></div>
<div><label>Password input</label> <input type="password" value="password"></div>
<div><label>Select field</label> <select><option>Option 01</option><option>Option 02</option></select></div>
<div><label>Multiple select field</label><select multiple size="5"><option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option><option>Option 5</option><option>Option 6</option><option>Option 7</option><option>Option 8</option><option>Option 9</option><option>Option 10</option></select></div>
<div><label>Radio input</label> <input type="radio" name="rad"></div>
<div><label>Checkbox input</label> <input type="checkbox"></div>
<div><label><input type="radio" name="rad"> Radio input</label></div>
<div><label><input type="checkbox"> Checkbox input</label></div>
<div><label>File input</label> <input type="file"></div>
<div><label>Textarea</label> <textarea cols="30" rows="5" >Textarea text</textarea></div>
<div><label>Color input</label> <input type="color" value="#000000"></div>
<div><label>Number input</label> <input type="number" value="5" min="0" max="10"></div>
<div><label>Range input</label> <input type="range" id="range" value="0" min="0" max="100"> <output for="range">0</output>
<script>
if (document.querySelector) {
document.querySelector('#range').onchange = function(e) {
e.target.nextElementSibling.innerText = e.target.value;
}
}
</script>
</div>
<div><label>Date input</label> <input type="date"></div>
<div><label>Month input</label> <input type="month"></div>
<div><label>Week input</label> <input type="week"></div>
<div><label>Time input</label> <input type="time"></div>
<div><label>Datetime input</label> <input type="datetime"></div>
<div><label>Datetime-local input</label> <input type="datetime-local"></div>
</fieldset>
</form>Select All Code
<form>
<fieldset>
<div><label>Disabled text input</label> <input type="text" value="Disabled text input" disabled></div>
<div><label>Disabled select field</label> <select disabled><option>Option 01</option><option>Option 02</option></select></div>
<div><label>Disabled file input</label> <input type="file" disabled></div>
<div><label>Disabled radio input</label> <input type="radio" name="rad" disabled></div>
<div><label>Disabled checkbox input</label> <input type="checkbox" disabled></div>
<div><label>Disabled color input</label> <input type="color" value="#000000" disabled></div>
<div><label>Disabled range input</label> <input type="range" disabled></div>
<div><label>Disabled number input</label> <input type="number" value="5" min="0" max="10" disabled></div>
<div><label>Disabled textarea</label> <textarea cols="30" rows="5" disabled>Textarea text</textarea></div>
</fieldset>
</form>Select All Code
<form>
<fieldset>
<div><label>Readonly text input</label> <input type="text" value="Readonly text input" readonly></div>
<div><label>Readonly color input</label> <input type="color" value="#000000" readonly></div>
<div><label>Readonly range input</label> <input type="range" readonly></div>
<div><label>Readonly number input</label> <input type="number" value="5" min="0" max="10" readonly></div>
<div><label>Readonly textarea</label> <textarea cols="30" rows="5" readonly>Textarea text</textarea></div>
</fieldset>
</form>Select All Code
<form>
<fieldset>
<div>
<label>Text input with datalist</label>
<input type="text" value="" list="fav-color" placeholder="Type your favorite color" />
<datalist id="fav-color">
<option value="Red"></option>
<option value="Orange"></option>
<option value="Yellow"></option>
<option value="Green"></option>
<option value="Blue"></option>
<option value="Purple"></option>
</datalist>
</div>
<div>
<label>Range input with datalist</label>
<input id="number_input" type="range" value="0" min="0" max="100" list="number" />
<output for="number_input">0</output>
<datalist id="number">
<option>25</option>
<option>50</option>
<option>75</option>
</datalist>
<script>
if (document.querySelector) {
document.querySelector('#number_input').onchange = function(e) {
e.target.nextElementSibling.innerText = e.target.value;
}
}
</script>
</div>
<div>
<label>Color input with datalist</label>
<input type="color" value="#000000" list="color" />
<datalist id="color">
<option>#ff0000</option>
<option>#0000ff</option>
<option>#00ff00</option>
<option>#ffff00</option>
<option>#00ffff</option>
</datalist>
</div>
<div>
<label>Date input with datalist</label>
<input type="date" list="days" />
<datalist id="days">
<option label="Independence Day">2013-07-04</option>
<option label="Labor Day">2013-09-02</option>
<option label="Columbus Day">2013-10-14</option>
</datalist>
</div>
<div>
<label>Time input with datalist</label>
<input type="time" list="times" />
<datalist id="times">
<option label="Midnight">00:00</option>
<option>06:00</option>
<option label="Noon">12:00</option>
<option>18:00</option>
</datalist>
</div>
<div>
<label>Datetime-local input with datalist</label>
<input type="datetime-local" list="datetime-locals" />
<datalist id="datetime-locals">
<option label="Santa Visit">2012-12-24T23:59</option>
<option label="Chrismas party">2012-12-25T18:00</option>
<option>2012-12-30T00:00</option>
<option label="Happy New Year">2013-01-01T00:00</option>
</datalist>
</div>
<div>
<label>Month input with datalist</label>
<input type="month" list="months" />
<datalist id="months">
<option label="End of last century">2000-12</option>
<option>2010-01</option>
<option>2011-01</option>
<option>2012-01</option>
<option>2013-01</option>
</datalist>
</div>
<div>
<label>Week input with datalist</label>
<input type="week" list="weeks" />
<datalist id="weeks">
<option label="First week of 2013">2013-W01</option>
<option label="Second week of 2013">2013-W02</option>
<option label="13th week of 2013">2013-W13</option>
<option label="The last week of 2013">2013-W52</option>
</datalist>
</div>
</fieldset>
</form>Select All Code
<form>
<fieldset>
<legend>Fieldset with legend</legend>
<p><label>Text Input</label> <input type="text"></p>
<p><input type="submit" value="Submit"></p>
</fieldset>
<fieldset>
<p>Fieldset without legend</p>
<p><label>Text Input</label> <input type="text"></p>
<p><input type="submit" value="Submit"></p>
</fieldset>
<fieldset>
<legend>Fieldset with a very, very, very, very, very, long legend that can test the display of word wrapping to see how it looks.</legend>
<p><label>Text Input</label> <input type="text"></p>
<p><input type="submit" value="Submit"></p>
</fieldset>
</form>headings 1
Usage
Add your personalized documentation here.
Example
Heading 1 with small text and a link
Heading 2 with small text and a link
Heading 3 with small text and a link
Heading 4 with small text and a link
Heading 5 with small text and a link
Heading 6 with small text and a link
Select All Code
<h1>Heading 1 with <small>small text</small> and a <a href="#">link</a></h1>
<h2>Heading 2 with <small>small text</small> and a <a href="#">link</a></h2>
<h3>Heading 3 with <small>small text</small> and a <a href="#">link</a></h3>
<h4>Heading 4 with <small>small text</small> and a <a href="#">link</a></h4>
<h5>Heading 5 with <small>small text</small> and a <a href="#">link</a></h5>
<h6>Heading 6 with <small>small text</small> and a <a href="#">link</a></h6>headings 2
Usage
Add your personalized documentation here.
Example
Heading 1 (in article) with small text and a link
Heading 2 (in article) with small text and a link
Heading 3 (in article) with small text and a link
Heading 4 (in article) with small text and a link
Heading 5 (in article) with small text and a link
Heading 6 (in article) with small text and a link
Select All Code
<article>
<h1>Heading 1 (in article) with <small>small text</small> and a <a href="#">link</a></h1>
<h2>Heading 2 (in article) with <small>small text</small> and a <a href="#">link</a></h2>
<h3>Heading 3 (in article) with <small>small text</small> and a <a href="#">link</a></h3>
<h4>Heading 4 (in article) with <small>small text</small> and a <a href="#">link</a></h4>
<h5>Heading 5 (in article) with <small>small text</small> and a <a href="#">link</a></h5>
<h6>Heading 6 (in article) with <small>small text</small> and a <a href="#">link</a></h6>
</article>headings 3
Usage
Add your personalized documentation here.
Example
Heading 1 (in section) with small text and a link
Heading 2 (in section) with small text and a link
Heading 3 (in section) with small text and a link
Heading 4 (in section) with small text and a link
Heading 5 (in section) with small text and a link
Heading 6 (in section) with small text and a link
Select All Code
<section>
<h1>Heading 1 (in section) with <small>small text</small> and a <a href="#">link</a></h1>
<h2>Heading 2 (in section) with <small>small text</small> and a <a href="#">link</a></h2>
<h3>Heading 3 (in section) with <small>small text</small> and a <a href="#">link</a></h3>
<h4>Heading 4 (in section) with <small>small text</small> and a <a href="#">link</a></h4>
<h5>Heading 5 (in section) with <small>small text</small> and a <a href="#">link</a></h5>
<h6>Heading 6 (in section) with <small>small text</small> and a <a href="#">link</a></h6>
</section>list definition
Usage
Add your personalized documentation here.
Example
- Description name
- Description value
- Description name
- Description value
- Description value
- Description name
- Description name
- Description value
Select All Code
<dl>
<dt>Description name</dt>
<dd>Description value</dd>
<dt>Description name</dt>
<dd>Description value</dd>
<dd>Description value</dd>
<dt>Description name</dt>
<dt>Description name</dt>
<dd>Description value</dd>
</dl>list ordered
Usage
Add your personalized documentation here.
Example
- list item 1
- list item 1
- list item 2
- list item 2
- list item 3
- list item 3
- list item 2
- list item 2
- list item 1
- list item 1
Select All Code
<ol>
<li>list item 1</li>
<li>list item 1
<ol>
<li>list item 2</li>
<li>list item 2
<ol>
<li>list item 3</li>
<li>list item 3</li>
</ol>
</li>
<li>list item 2</li>
<li>list item 2</li>
</ol>
</li>
<li>list item 1</li>
<li>list item 1</li>
</ol>list unordered
Usage
Add your personalized documentation here.
Example
- list item 1
- list item 1
- list item 2
- list item 2
- list item 3
- list item 3
- list item 2
- list item 2
- list item 1
- list item 1
Select All Code
<ul>
<li>list item 1</li>
<li>list item 1
<ul>
<li>list item 2</li>
<li>list item 2
<ul>
<li>list item 3</li>
<li>list item 3</li>
</ul>
</li>
<li>list item 2</li>
<li>list item 2</li>
</ul>
</li>
<li>list item 1</li>
<li>list item 1</li>
</ul>media
Usage
Add your personalized documentation here.
Example
Default Image
Linked Image
Missing Image
Svg
Video
Missing Video
Audio
Missing Audio
Select All Code
<h3>Default Image</h3>
<img src="http://placehold.it/240x240" alt="Dog">
<h3>Linked Image</h3>
<a href="#"><img src="http://placehold.it/240x240" alt="Dog"></a>
<h3>Missing Image</h3>
<img alt="This is an example of a missing image">
<h3>Svg</h3>
<svg width="200px" height="200px">
<circle cx="100" cy="100" r="100" fill="#ff0000" />
</svg>
<h3>Video</h3>
<video controls preload poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
<source id="mp4" src="http://media.w3.org/2010/05/bunny/trailer.mp4" type="video/mp4">
<source id="ogv" src="http://media.w3.org/2010/05/bunny/trailer.ogv" type="video/ogg">
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<h3>Missing Video</h3>
<video controls></video>
<h3>Audio</h3>
<audio controls>
<source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4" type='audio/mp4'>
<source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga" type='audio/ogg; codecs=vorbis'>
<p>Your user agent does not support the HTML5 Audio element.</p>
</audio>
<h3>Missing Audio</h3>
<audio controls></audio>
meter and progress
Usage
Add your personalized documentation here.
Example
Meter
Progress
A progress displaying 100%.
A progress displaying 85%.
A progress displaying 50%.
A progress displaying 0%.
Select All Code
<h3>Meter</h3>
<p><meter value="100" max="100" low="70" high="90">100%</meter> A meter displaying 100%.</p>
<p><meter value="85" max="100" low="70" high="90">85%</meter> A meter displaying 85%.</p>
<p><meter value="50" max="100" low="70" high="90">50%</meter> A meter displaying 50%.</p>
<p><meter value="0" max="100" low="70" high="90">0%</meter> A meter displaying 0%.</p>
<h3>Progress</h3>
<p><progress value="100" max="100">100%</progress> A progress displaying 100%.</p>
<p><progress value="85" max="100">85%</progress> A progress displaying 85%.</p>
<p><progress value="50" max="100">50%</progress> A progress displaying 50%.</p>
<p><progress value="0" max="100">0%</progress> A progress displaying 0%.</p>preformated text
Usage
Add your personalized documentation here.
Example
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
Pre Code
<html>
<head>
</head>
<body>
<div class="main"> <div>
</body>
</html>Select All Code
<pre>
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
</pre>
<h3>Pre Code</h3>
<pre><code><html>
<head>
</head>
<body>
<div class="main"> <div>
</body>
</html></code></pre>sample content block
Usage
Add your personalized documentation here.
Example
Hello World
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- In voluptate velit esse cillum
- In voluptate velit esse cillum
- In voluptate velit esse cillum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Select All Code
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>In voluptate velit esse cillum</li>
<li>In voluptate velit esse cillum</li>
<li>In voluptate velit esse cillum</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>tabular data
Usage
Add your personalized documentation here.
Example
Default Table
| thead th | thead th | thead th |
|---|---|---|
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tbody td | tbody td | tbody td |
| tfoot th | tfoot th | tfoot th |
Table with side headings
| thead th | thead th | thead th |
|---|---|---|
| tbody th | tbody td | tbody td |
| tbody th | tbody td | tbody td |
| tfoot th | tfoot td | tfoot td |
Select All Code
<h3>Default Table</h3>
<table>
<caption>Table Caption</caption>
<thead>
<tr>
<th>thead th</th>
<th>thead th</th>
<th>thead th</th>
</tr>
</thead>
<tbody>
<tr>
<td>tbody td</td>
<td>tbody td</td>
<td>tbody td</td>
</tr>
<tr>
<td>tbody td</td>
<td>tbody td</td>
<td>tbody td</td>
</tr>
<tr>
<td>tbody td</td>
<td>tbody td</td>
<td>tbody td</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>tfoot th</th>
<th>tfoot th</th>
<th>tfoot th</th>
</tr>
</tfoot>
</table>
<h3>Table with side headings</h3>
<table>
<caption>Table Caption</caption>
<thead>
<tr>
<th>thead th</th>
<th>thead th</th>
<th>thead th</th>
</tr>
</thead>
<tbody>
<tr>
<th>tbody th</th>
<td>tbody td</td>
<td>tbody td</td>
</tr>
<tr>
<th>tbody th</th>
<td>tbody td</td>
<td>tbody td</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>tfoot th</th>
<td>tfoot td</td>
<td>tfoot td</td>
</tr>
</tfoot>
</table>text elements
Usage
Add your personalized documentation here.
Example
The a element example
The abbr element and an abbr element with title examples
The b element example
The cite element example
The code element example
The em element example
The del element example
The dfn element and dfn element with title examples
The i element example
The ins element example
The kbd element example
The mark element example
The q element
example
The q element
exampleinside
a q element
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The u element example
The var element example
Select All Code
<p>The <a href="#">a element</a> example</p>
<p>The <abbr>abbr element</abbr> and an <abbr title="Abbreviation">abbr</abbr> element with title examples</p>
<p>The <b>b element</b> example</p>
<p>The <cite>cite element</cite> example</p>
<p>The <code>code element</code> example</p>
<p>The <em>em element</em> example</p>
<p>The <del>del element</del> example</p>
<p>The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples</p>
<p>The <i>i element</i> example</p>
<p>The <ins>ins element</ins> example</p>
<p>The <kbd>kbd element</kbd> example</p>
<p>The <mark>mark element</mark> example</p>
<p>The <q>q element</q> example</p>
<p>The <q>q element <q>inside</q> a q element</q> example</p>
<p>The <s>s element</s> example</p>
<p>The <samp>samp element</samp> example</p>
<p>The <small>small element</small> example</p>
<p>The <span>span element</span> example</p>
<p>The <strong>strong element</strong> example</p>
<p>The <sub>sub element</sub> example</p>
<p>The <sup>sup element</sup> example</p>
<p>The <u>u element</u> example</p>
<p>The <var>var element</var> example</p>Select All Code
<p>Remember, remember the <time datetime="1605-11-05">5<sup>th</sup> of November</time></p>Design Patterns - Design and mark-up patterns unique to your site.
alerts
Usage
Add your personalized documentation here.
Example
Warning Message! Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Error Message! Numquam quos fuga quam suscipit sapiente perferendis magnam.
Success Message! Totam officiis dolorum voluptatibus maxime molestiae iste.
Info Message! Consequatur facere deleniti cumque ducimus maiores nemo.
Select All Code
<!-- Sample pattern, your site's patterns will be different -->
<div class="alert alert-warning">
<strong>Warning Message!</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
<div class="alert alert-error">
<strong>Error Message!</strong> Numquam quos fuga quam suscipit sapiente perferendis magnam.
</div>
<div class="alert alert-success">
<strong>Success Message!</strong> Totam officiis dolorum voluptatibus maxime molestiae iste.
</div>
<div class="alert alert-info">
<strong>Info Message!</strong> Consequatur facere deleniti cumque ducimus maiores nemo.
</div>breadcrumbs
Usage
Breadcrumbs will turn any list of links into a very simple inline list automatically separated by '/'
Example
Select All Code
<!-- BREADCRUMBS -->
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Category</a></li>
<li class="active">Item</li>
</ol>panels
Usage
Panels are visual boxes commonly reserved for menus and/or link lists, but can be used for any content.
Example
We believe that we have found the formula for delivering an amazing shopping experience that is easy and enjoyable for each of our valued customers while maintaining a fun, supportive and enriching work environment for all of our valued employees.
Select All Code
<!-- PANELS -->
<div class="panel">
<header>
Panel Header
</header>
<section>
<p>We believe that we have found the formula for delivering an amazing shopping experience that is easy and enjoyable for each of our valued customers while maintaining a fun, supportive and enriching work environment for all of our valued employees.</p>
</section>
</div>