STYLE GUIDE BOILERPLATE

About

Comments and documentation about your style guide. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus nobis enim labore facilis consequuntur! Veritatis neque est suscipit tenetur temporibus enim consequatur deserunt perferendis. Neque nemo iusto minima deserunt amet.

Colors

#000000
#ffffff
#da0d28
#a1a1a1
#464646
#38a8a5
#7f0c45
#054474
#502d57
#ff412a
#6e6e6e
#808080
#979697
#eeeeee
#e1e1e1

Font Stacks

"Gesta", "Helvetica", Arial, sans-serif;

Base Styles

address

Company Name, Inc.
811 7th Ave, Suite 700
Manhattan, NY 10019
USA
Copy Source
<address>
  Company Name, Inc.<br>
  811 7th Ave, Suite 700<br>
  Manhattan, NY 10019<br>
  USA
</address>

blockquote

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.
Copy Source
<blockquote>
  <p>Some sort of famous witty quote marked up with a &lt;blockquote> and a child &lt;p> element.</p>
</blockquote>

<blockquote>Even better philosophical quote marked up with just a &lt;blockquote> element.</blockquote>

details

More info

Additional information

  • Point 1
  • Point 2
More info

Additional information

  • Point 1
  • Point 2
More info

Additional information

  • Point 1
  • Point 2
Copy Source
<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

Image Alt Text
Figcaption content
Image Alt Text

Figure Title

Figcaption content
Copy Source
<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>

form buttons

Copy Source
<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">Button type button</button></p>
    <p><button type="reset">Button type reset</button></p>
    <p><button type="submit">Button type submit</button></p>
    <p><button type="button" disabled>Button type button disabled</button></p>
    <p><button>Button</button></p>
  </fieldset>
</form>

form fields default

- -
0
Copy Source
<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 type="tel" name="field_country_code" maxlength="3" /> - <input type="tel" name="field_city_code" maxlength="4" /> - <input type="tel" 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>

form fields disabled

Copy Source
<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>

form fields readonly

Copy Source
<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>

form fields with datalist

0
Copy Source
<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>

form fieldset

Fieldset with legend

Fieldset without legend

Fieldset with a very, very, very, very, very, long legend that can test the display of word wrapping to see how it looks.

Copy Source
<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

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
Copy Source
<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>

list definition

Description name
Description value
Description name
Description value
Description value
Description name
Description name
Description value
Copy Source
<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

  1. list item 1
  2. list item 1
    1. list item 2
    2. list item 2
      1. list item 3
      2. list item 3
    3. list item 2
    4. list item 2
  3. list item 1
  4. list item 1
Copy Source
<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

  • 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
Copy Source
<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

Default Image

Dog

Linked Image

Dog

Missing Image

This is an example of a missing image

Svg

Video

Missing Video

Audio

Missing Audio

Copy Source
<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

Meter

100% A meter displaying 100%.

85% A meter displaying 85%.

50% A meter displaying 50%.

0% A meter displaying 0%.

Progress

100% A progress displaying 100%.

85% A progress displaying 85%.

50% A progress displaying 50%.

0% A progress displaying 0%.

Copy Source
<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

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>
Copy Source
<pre>
P R E F O R M A T T E D T E X T
! " # $ % &amp; ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; &lt; = &gt; ?
@ 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>&lt;html>
  &lt;head>
  &lt;/head>
  &lt;body>
      &lt;div class="main"> &lt;div>
  &lt;/body>
&lt;/html></code></pre>

sample content block

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.

Copy Source
<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

Default Table

Table Caption
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

Table Caption
thead th thead th thead th
tbody th tbody td tbody td
tbody th tbody td tbody td
tfoot th tfoot td tfoot td
Copy Source
<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

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 inside a q element example

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

Copy Source
<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>

time

Remember, remember the

Copy Source
<p>Remember, remember the <time datetime="1605-11-05">5<sup>th</sup> of November</time></p>

Pattern Styles - Design and mark-up patterns unique to WSI.

accordian

Panel 1
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
Panel 2
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
Panel 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
Copy Source
<dl class="accordion">

	<dt><a href="">Panel 1</a></dt>
	<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>

	<dt><a href="">Panel 2</a></dt>
	<dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>

	<dt><a href="">Panel 3</a></dt>
	<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>

</dl>

alerts

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.
Copy Source
<!-- 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>

blog navigation

Copy Source
<nav class="insight-navigation">
	<h1 class="insight-navigation__heading">Past events</h1>
	<ul class="block-list">
		<li class="block-list__item">
			<a href="#"></a>
			<div>
				<h5 class="insight-navigation__date">23.01.14</h5>
				<h2 class="insight-navigation__title">An Event or Blog Title <a href="#" class="insight-navigtion__read-more">Read more</span></h2>
			</div>
		</li>
		<li class="block-list__item">
			<a href="#"></a>
			<div>
				<h5 class="insight-navigation__date">23.01.14</h5>
				<h2 class="insight-navigation__title">An Event or Blog Title <a href="#" class="insight-navigtion__read-more">Read more</span></h2>
			</div>
		</li>
		<li class="block-list__item">
			<a href="#"></a>
			<div>
				<h5 class="insight-navigation__date">23.01.14</h5>
				<h2 class="insight-navigation__title">An Event or Blog Title <a href="#" class="insight-navigtion__read-more">Read more</span></h2>
			</div>
		</li>
		<li class="block-list__item">
			<a href="#"></a>
			<div>
				<h5 class="insight-navigation__date">23.01.14</h5>
				<h2 class="insight-navigation__title">An Event or Blog Title <a href="#" class="insight-navigtion__read-more">Read more</span></h2>
			</div>
		</li>
		<li class="block-list__item">
			<a href="#"></a>
			<div>
				<h5 class="insight-navigation__date">23.01.14</h5>
				<h2 class="insight-navigation__title">An Event or Blog Title <a href="#" class="insight-navigtion__read-more">Read more</span></h2>
			</div>
		</li>
		<li class="block-list__item">
			<a href="#"></a>
			<div>
				<h5 class="insight-navigation__date">23.01.14</h5>
				<h2 class="insight-navigation__title">An Event or Blog Title <a href="#" class="insight-navigtion__read-more">Read more</span></h2>
			</div>
		</li>
	</ul>
</nav>
Copy Source
<!-- Sample pattern, your site's patterns will be different -->
<ul class="breadcrumb">
  <li><a href="#">Home</a> <span class="divider">/</span></li>
  <li><a href="#">Library</a> <span class="divider">/</span></li>
  <li class="active">Data</li>
</ul>

header with image

masthead

Locations

masthead

Locations

Copy Source
<header class="post__header post__header--with-image">
	<img src="../assets/img/masthead.jpg" alt="masthead">
	<h1 class="article-heading">Locations</h1>
</header>

<header class="post__header post__header--with-image post__header--with-image--navy">
	<img src="../assets/img/masthead.jpg" alt="masthead">
	<h1 class="article-heading">Locations</h1>
</header>
Copy Source
<nav class="more-posts">
	<a href="#" class="more-posts__icon">
		<span class="entypo-right-open-big "></span>
	</a>
	<a href="#" class="more-posts__words">Read more</a>
	</a>
</nav>
Copy Source
<nav>
	<a class="menu-toggle">Menu Toggle</a>
	<ul class="menu">
		<li class="menu__item is-active"><a href="#">Item 1</a></li>
		<li class="menu__item"><a href="#">Item with sub-navigation</a>
			<ul class="submenu is-visible">
				<li class="submenu__item"><a href="#">Sub-item 1</a></li>
				<li class="submenu__item"><a href="#">Sub-item 2</a></li>
				<li class="submenu__item"><a href="#">Sub-item 3</a></li>
				<li class="submenu__item"><a href="#">Sub-item 4</a></li>
				<li class="submenu__item"><a href="#">Sub-item 5</a></li>
			</ul></li>
		<li class="menu__item"><a href="#">Item 3</a></li>
		<li class="menu__item"><a href="#">Item 4</a></li>
		<li class="menu__item"><a href="#">Item 5</a></li>
		<li class="menu__item"><a href="#">Item 6</a></li>
	</ul>
</nav>
Copy Source
<form class="search-form">
	<input type="text" class="search-form__input" placeholder="Search">
	<input type="submit" class="search-form__submit">
</form>
Copy Source
<nav class="sitemap">
	<div class="sitemap__spacer">
		<div class="sitemap__column">
			<h3 class="sitemap__title">Solutions</h3>
			<ul>
				<li><a href="#">Xceptor</a></li>
				<li><a href="#">Xceptor</a></li>
				<li><a href="#">Xceptor</a></li>
				<li><a href="#">Xceptor</a></li>
			</ul>
		</div>
		<div class="sitemap__column">
			<ul>
				<li><a href="#">Xceptor</a></li>
				<li><a href="#">Xceptor</a></li>
				<li><a href="#">Xceptor</a></li>
				<li><a href="#">Xceptor</a></li>
			</ul>
		</div>
		<div class="sitemap__column">
			<h3 class="sitemap__title">Solutions</h3>
			<ul>
				<li><a href="#">Xceptor</a></li>
				<li><a href="#">Xceptor</a></li>
				<li><a href="#">Xceptor</a></li>
				<li><a href="#">Xceptor</a></li>
			</ul>
		</div>
	</div>
</nav>

widgets

Contact us

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, voluptatum, fugit.

Contact us

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, voluptatum, fugit.

Contact us

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, voluptatum, fugit.

Contact us

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, voluptatum, fugit.

Copy Source
<div class="widget widget--red">
		<h4 class="widget__title">Contact us</h4>
		<p class="widget__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, voluptatum, fugit.</p>
</div>

<div class="widget widget--with-icon widget--green">
	<div class="widget--with-icon-container">
		<div class="widget__text">
			<h4 class="widget__title">Contact us</h4>
			<p class="widget__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, voluptatum, fugit.</p>
		</div>
		<div class="widget__image">
			<img src="../assets/img/user.png">
		</div>
	</div>
</div>

<div class="widget widget--with-icon widget--maroon">
	<div class="widget--with-icon-container">
		<div class="widget__text">
			<h4 class="widget__title">Contact us</h4>
			<p class="widget__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, voluptatum, fugit.</p>
		</div>
		<div class="widget__image">
			<img src="../assets/img/note.png">
		</div>
	</div>
</div>

<div class="widget widget--with-icon widget--navy">
	<div class="widget--with-icon-container">
		<div class="widget__text">
			<h4 class="widget__title">Contact us</h4>
			<p class="widget__body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, voluptatum, fugit.</p>
		</div>
		<div class="widget__image">
			<img src="../assets/img/widget__arrow.png">
		</div>
	</div>
</div>