Colors

#ff0000
#00ff00
#0000ff
#ffff00
#00ffff
#ff00ff
#ffffff
#808080
#000000

HTML

									
										<ul class="sg-colors">
	<li>
		<span class="sg-swatch" style="background: #ff0000;"></span>
		<span class="sg-label">#ff0000</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #00ff00;"></span>
		<span class="sg-label">#00ff00</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #0000ff;"></span>
		<span class="sg-label">#0000ff</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #ffff00;"></span>
		<span class="sg-label">#ffff00</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #00ffff;"></span>
		<span class="sg-label">#00ffff</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #ff00ff;"></span>
		<span class="sg-label">#ff00ff</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #ffffff;"></span>
		<span class="sg-label">#ffffff</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #808080;"></span>
		<span class="sg-label">#808080</span>
	</li>
	<li>
		<span class="sg-swatch" style="background: #000000;"></span>
		<span class="sg-label">#000000</span>
	</li>
</ul>

Heading font: "Helvetica Neue", Helvetica, Arial, sans-serif;

Heading font italic: "Helvetica Neue", Helvetica, Arial, sans-serif;

Primary font: "Helvetica Neue", Helvetica, Arial, sans-serif;

Primary font italic: "Helvetica Neue", Helvetica, Arial, sans-serif;

Primary font bold: "Helvetica Neue", Helvetica, Arial, sans-serif;

Monospace font: Consolas, "Lucida Console", "Liberation Mono", "Courier New", monospace, sans-serif;

Monospace font italic: Consolas, "Lucida Console", "Liberation Mono", "Courier New", monospace, sans-serif;

Monospace font bold: Consolas, "Lucida Console", "Liberation Mono", "Courier New", monospace, sans-serif;

HTML

									
										<h2>Heading font: "Helvetica Neue", Helvetica, Arial, sans-serif;</h2>
<h2><em>Heading font italic: "Helvetica Neue", Helvetica, Arial, sans-serif;</em></h2>
<p>Primary font: "Helvetica Neue", Helvetica, Arial, sans-serif;</p>
<p><em>Primary font italic: "Helvetica Neue", Helvetica, Arial, sans-serif;</em></p>
<p><strong>Primary font bold: "Helvetica Neue", Helvetica, Arial, sans-serif;</strong></p>
<p><code>Monospace font: Consolas, "Lucida Console", "Liberation Mono", "Courier New", monospace, sans-serif;</code></p>
<p><code><em>Monospace font italic: Consolas, "Lucida Console", "Liberation Mono", "Courier New", monospace, sans-serif;</em></code></p>
<p><code><strong>Monospace font bold: Consolas, "Lucida Console", "Liberation Mono", "Courier New", monospace, sans-serif;</strong></code></p>

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Heading Level 1 Link

Heading Level 2 Link

HTML

									
										<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
<h1><a href="#">Heading Level 1 Link</a></h1>
<h2><a href="#">Heading Level 2 Link</a></h2>
<h3><a href="#">Heading Level 3 Link</a></h3>
<h4><a href="#">Heading Level 4 Link</a></h4>
<h5><a href="#">Heading Level 5 Link</a></h5>
<h6><a href="#">Heading Level 6 Link</a></h6>

A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer sucessive paragraphs indented with no margins between them.

HTML

									
										<p>A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
<p>This is what a successive paragraph looks like. Some people prefer a space between paragraphs, while others prefer sucessive paragraphs indented with no margins between them.</p>

Blockquote

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

HTML

									
										<blockquote>
  <p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p>
</blockquote>

Inline Elements

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

~~This text is deleted~~ and This text is inserted

~~This text has a strikethrough~~

Superscript^®

Subscript for things like H₂O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variable element, such as x = y

HTML

									
										<p><a href="#">This is a text link</a></p>

<p><strong>Strong is used to indicate strong importance</strong></p>

<p><em>This text has added emphasis</em></p>

<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>

<p>The <i>i element</i> is text that is set off from the normal text</p>

<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>

<p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>

<p><s>This text has a strikethrough</s></p>

<p>Superscript<sup>®</sup></p>

<p>Subscript for things like H<sub>2</sub>O</p>

<p><small>This small text is small for for fine print, etc.</small></p>

<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>

<p>Keybord input: <kbd>Cmd</kbd></p>

<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>

<p><cite>This is a citation</cite>

</p><p>The <dfn>dfn element</dfn> indicates a definition.</p>

<p>The <mark>mark element</mark> indicates a highlight</p>

<p><code>This is what inline code looks like.</code></p>

<p><samp>This is sample output from a computer program</samp></p>

<p>The <var>variable element</var>, such as <var>x</var> = <var>y</var></p>

Preformatted 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 { | } ~

HTML

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

Horizontal Rule

HTML

									
										<hr>

Unordered

This is a list item in an unordered list
An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
Lists can be nested inside of each other
- This is a nested list item
- This is another nested list item in an unordered list
This is the last list item

This is a paragraph within a list item in a different unordered list.

This is another paragraph in this list item.
This is a new paragraph within a different list item in the same unordered list.

HTML

									
										<ul>
  <li>This is a list item in an unordered list</li>
  <li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
  <li>
    Lists can be nested inside of each other
    <ul>
      <li>This is a nested list item</li>
      <li>This is another nested list item in an unordered list</li>
    </ul>
  </li>
  <li>This is the last list item</li>
</ul>
<ul>
  <li>
    <p>This is a paragraph within a list item in a different unordered list.</p>
    <p>This is another paragraph in this list item.</p>
  </li>
  <li><p>This is a new paragraph within a different list item in the same unordered list.</p></li>
</ul>

Ordered

This is a list item in an ordered list
An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
Lists can be nested inside of each other
1. This is a nested list item
2. This is another nested list item in an ordered list
This is the last list item

This is a paragraph within a list item in a different ordered list.

This is another paragraph in this list item.
This is a new paragraph within a different list item in the same ordered list.

HTML

									
										<ol>
  <li>This is a list item in an ordered list</li>
  <li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
  <li>
    Lists can be nested inside of each other
    <ol>
      <li>This is a nested list item</li>
      <li>This is another nested list item in an ordered list</li>
    </ol>
  </li>
  <li>This is the last list item</li>
</ol>
<ol>
	<li>
		<p>This is a paragraph within a list item in a different ordered list.</p>
		<p>This is another paragraph in this list item.</p>
	</li>
	<li><p>This is a new paragraph within a different list item in the same ordered list.</p></li>
</ol>

Definition

Definition List: A number of connected items or names written or printed consecutively, typically one below the other.
This is a term.: This is the definition of that term, which both live in a dl.
Here is another term.: And it gets a definition too, which is this line.
Here is term that shares a definition with the term below.
Here is term that shares a definition with the term above.: And they both get the same definition too, which is this line.

HTML

									
										<dl>
  <dt>Definition List</dt>
  <dd>A number of connected items or names written or printed consecutively, typically one below the other.</dd>
  <dt>This is a term.</dt>
  <dd>This is the definition of that term, which both live in a <code>dl</code>.</dd>
  <dt>Here is another term.</dt>
  <dd>And it gets a definition too, which is this line.</dd>
  <dt>Here is term that shares a definition with the term below.</dt>
  <dt>Here is term that shares a definition with the term above.</dt>
  <dd>And they both get the same definition too, which is this line.</dd>
</dl>

Table

Table caption
Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4	Table Heading 5
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4	Table Footer 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4	Table Cell 5

HTML

									
										<table>
  <caption>Table caption</caption>
  <thead>
    <tr>
      <th>Table Heading 1</th>
      <th>Table Heading 2</th>
      <th>Table Heading 3</th>
      <th>Table Heading 4</th>
      <th>Table Heading 5</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Table Footer 1</th>
      <th>Table Footer 2</th>
      <th>Table Footer 3</th>
      <th>Table Footer 4</th>
      <th>Table Footer 5</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Table Cell 1</td>
      <td>Table Cell 2</td>
      <td>Table Cell 3</td>
      <td>Table Cell 4</td>
      <td>Table Cell 5</td>
    </tr>
    <tr>
      <td>Table Cell 1</td>
      <td>Table Cell 2</td>
      <td>Table Cell 3</td>
      <td>Table Cell 4</td>
      <td>Table Cell 5</td>
    </tr>
    <tr>
      <td>Table Cell 1</td>
      <td>Table Cell 2</td>
      <td>Table Cell 3</td>
      <td>Table Cell 4</td>
      <td>Table Cell 5</td>
    </tr>
    <tr>
      <td>Table Cell 1</td>
      <td>Table Cell 2</td>
      <td>Table Cell 3</td>
      <td>Table Cell 4</td>
      <td>Table Cell 5</td>
    </tr>
  </tbody>
</table>

Short Date

2013-02-10

HTML

									
										2013-02-10

Short Datetime

2013-02-10 1:20pm

HTML

									
										2013-02-10 1:20pm

Medium Date

Feb 10, 2013

HTML

									
										Feb 10, 2013

Medium Datetime

Feb 10, 2013 1:20pm

HTML

									
										Feb 10, 2013 1:20pm

Long Date

Monday, February 10, 2013

HTML

									
										Monday, February 10, 2013

Long Datetime

Monday, February 10, 2013 1:20pm

HTML

									
										Monday, February 10, 2013 1:20pm

Icon Image

HTML

									
										<img src="http://fpoimg.com/48x48?text=Icon" alt="Icon" height="48" width="48">

Thumbnail Image

HTML

									
										<img src="http://fpoimg.com/140x105?text=Thumbnail 4:3" alt="Thumbnail 4:3" height="105" width="140">

Portrait Image

HTML

									
										<img src="http://fpoimg.com/300x400?text=Portrait 3:4" alt="Portrait 3:4" height="400" width="300">

Landscape Image

HTML

									
										<img src="http://fpoimg.com/800x450?text=Landscape 16:9" alt="Landscape 16:9">

Button

Button Link

HTML

									
										<button class="button">Button</button>
<a href="#" class="button">Button Link</a>

Large Button

Large Button Link

HTML

									
										<button class="button button--large">Large Button</button>
<a href="#" class="button button--large">Large Button Link</a>

Text Fields

Textfield

The description for this form field.

Required This field is required.

The description for this form field.

Password

The description for this form field.

Textarea

The description for this form field.

HTML

									
										<div class="form-item form-item--textfield">
  <label class="form-item__label" for="edit-textfield">Textfield</label>
  <input type="text" autocapitalize="off" autocorrect="off" id="edit-textfield" name="textfield" size="60" maxlength="128" class="form-text">
  <div class="form-item__description">The description for this form field.</div>
</div>

<div class="form-item form-item--textfield is-required">
  <label class="form-item__label" for="edit-required-textfield">Required  <span class="form-item__required-marker"><span class="element-invisible">This field is required.</span></span></label>
  <input type="text" autocapitalize="off" autocorrect="off" id="edit-required-textfield" name="required-textfield" size="60" maxlength="128" class="form-text is-required">
  <div class="form-item__description">The description for this form field.</div>
</div>

<div class="form-item form-item--password">
  <label class="form-item__label" for="edit-password">Password </label>
  <input type="password" autocapitalize="off" autocorrect="off" id="edit-password" name="password" size="60" maxlength="128" class="form-text">
  <div class="form-item__description">The description for this form field.</div>
</div>

<div class="form-item form-item--textarea">
  <label class="form-item__label" for="edit-textarea">Textarea </label>
  <textarea id="edit-textarea" name="textarea" cols="60" rows="5" class="form-textarea"></textarea>
  <div class="form-item__description">The description for this form field.</div>
</div>

Select Menu

Select

The description for this form field.

Select with groups

The description for this form field.

HTML

									
										<div class="form-item form-item--select">
  <label class="form-item__label" for="edit-select">Select</label>
  <select id="edit-select" name="select" class="form-select">
    <option>Option One</option>
    <option>Option Two</option>
    <option>Option Three</option>
    <option>Option Four</option>
    <option>Option Five</option>
    <option>Option Six</option>
  </select>
  <div class="form-item__description">The description for this form field.</div>
</div>

<div class="form-item form-item--select">
  <label class="form-item__label" for="edit-select">Select with groups</label>
  <select id="edit-select" name="select" class="form-select">
    <optgroup label="Group One">
      <option>Option One</option>
      <option>Option Two</option>
      <option>Option Three</option>
    </optgroup>
    <optgroup label="Group Two">
      <option>Option Four</option>
      <option>Option Five</option>
      <option>Option Six</option>
    </optgroup>
  </select>
  <div class="form-item__description">The description for this form field.</div>
</div>

Checkbox

The description for this form field.

Checkboxes

Choice A

Choice B

Choice C

Choice D

The description for this form field.

HTML

									
										<div class="form-item form-item--checkbox">
  <input type="checkbox" id="edit-checkbox" name="checkbox" value="1" checked="checked" class="form-checkbox">
  <label class="form-item__label" for="edit-checkbox">Checkbox</label>
  <div class="form-item__description">The description for this form field.</div>
</div>

<div class="form-item form-item--checkboxes">
  <fieldset id="edit-checkboxes" class="form-item__fieldset">
    <legend class="form-item__legend">Checkboxes </legend>
    <div class="form-item form-item--checkbox">
      <input type="checkbox" id="edit-checkboxes-a" name="checkboxes-a" class="form-checkbox">  <label class="form-item__label" for="edit-checkboxes-a">Choice A </label>
    </div>
    <div class="form-item form-item--checkbox">
      <input type="checkbox" id="edit-checkboxes-b" name="checkboxes-b" class="form-checkbox">  <label class="form-item__label" for="edit-checkboxes-b">Choice B </label>
    </div>
    <div class="form-item form-item--checkbox">
      <input type="checkbox" id="edit-checkboxes-c" name="checkboxes-c" class="form-checkbox">  <label class="form-item__label" for="edit-checkboxes-c">Choice C </label>
    </div>
    <div class="form-item form-item--checkbox">
      <input type="checkbox" id="edit-checkboxes-d" name="checkboxes-d" class="form-checkbox">  <label class="form-item__label" for="edit-checkboxes-d">Choice D </label>
    </div>
  </fieldset>
  <div class="form-item__description">The description for this form field.</div>
</div>

Radio Buttons

Radios

Option One

Option Two

Option Three

Option Four

The description for this form field.

HTML

									
										<div class="form-item form-item--radios">
  <fieldset id="edit-radios" class="form-item__fieldset">
    <legend class="form-item__legend">Radios </legend>
    <div class="form-item form-item--radio form-item--radios">
      <input type="radio" id="edit-radios-one" name="radios" class="form-radio">  <label class="form-item__label" for="edit-radios-one">Option One </label>
    </div>
    <div class="form-item form-item--radio form-item--radios">
      <input type="radio" id="edit-radios-two" name="radios" class="form-radio">  <label class="form-item__label" for="edit-radios-two">Option Two </label>
    </div>
    <div class="form-item form-item--radio form-item--radios">
      <input type="radio" id="edit-radios-three" name="radios" class="form-radio">  <label class="form-item__label" for="edit-radios-three">Option Three </label>
    </div>
    <div class="form-item form-item--radio form-item--radios">
      <input type="radio" id="edit-radios-four" name="radios" class="form-radio">  <label class="form-item__label" for="edit-radiosfour">Option Four </label>
    </div>
  </fieldset>
  <div class="form-item__description">The description for this form field.</div>
</div>

Date

Month

Day

Year

The description for this form field.

HTML

									
										<div class="form-item form-item--date">
  <fieldset id="edit-date" class="form-item__fieldset">
    <legend class="form-item__legend">Date </legend>
    <div class="form-item form-item--select form-item--date-month">
      <label class="form-item__label element-invisible" for="edit-date-month">Month </label>
      <select id="edit-date-month" name="date[month]" class="form-select">
        <option value="1">Jan</option>
        <option value="2">Feb</option>
        <option value="3">Mar</option>
        <option value="4">Apr</option>
        <option value="5">May</option>
        <option value="6">Jun</option>
        <option value="7">Jul</option>
        <option value="8">Aug</option>
        <option value="9">Sep</option>
        <option value="10">Oct</option>
        <option value="11">Nov</option>
        <option value="12">Dec</option>
      </select>
    </div>
    <div class="form-item form-item--select form-item--date-day">
      <label class="form-item__label element-invisible" for="edit-date-day">Day </label>
      <select id="edit-date-day" name="date[day]" class="form-select">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
        <option value="31">31</option>
      </select>
    </div>
    <div class="form-item form-item--select form-item--date-year">
      <label class="form-item__label element-invisible" for="edit-date-year">Year </label>
      <select id="edit-date-year" name="date[year]" class="form-select">
        <option value="2000">2000</option>
        <option value="2001">2001</option>
        <option value="2002">2002</option>
        <option value="2003">2003</option>
        <option value="2004">2004</option>
        <option value="2005">2005</option>
        <option value="2006">2006</option>
        <option value="2007">2007</option>
        <option value="2008">2008</option>
        <option value="2009">2009</option>
        <option value="2010">2010</option>
        <option value="2011">2011</option>
        <option value="2012">2012</option>
        <option value="2013">2013</option>
        <option value="2014">2014</option>
        <option value="2015">2015</option>
        <option value="2016">2016</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
      </select>
    </div>
  </fieldset>
  <div class="form-item__description">The description for this form field.</div>
</div>

Fieldset

This is the fieldset description.

Fieldset content goes here…

HTML

									
										<fieldset class="fieldset" id="edit-fieldset">
  <legend class="fieldset__legend">
    <span class="fieldset__legend-text">Fieldset</span>
  </legend><div class="fieldset__content">
  <div class="fieldset__description">This is the fieldset description.</div>
  <p>Fieldset content goes here&hellip;</p>
</fieldset>

Mobile Menu

This pattern contains: components-main-menu

HTML

									
										<div class="region-navigation" style="display: none !important">
  <nav class="block  block--menu-block" role="navigation">
    <h2 class="element-invisible block__title">Main menu</h2>
    <ul class="nav nav--main-menu">
      <li class="nav__item"><a class="nav__link" href="#">Home</a></li>
      <li class="nav__item"><a class="nav__link" href="#">About</a></li>
      <li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
      <li class="nav__item"><a class="nav__link" href="#">Contact</a></li>
    </ul>
  </nav>
</div>

Main Menu

HTML

									
										<nav class="block  block--menu-block" role="navigation">
  <h2 class="element-invisible block__title">Main menu</h2>
  <ul class="nav nav--main-menu">
    <li class="nav__item"><a class="nav__link" href="#">Home</a></li>
    <li class="nav__item"><a class="nav__link" href="#">About</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Contact</a></li>
  </ul>
</nav>

Breadcrumbs

HTML

									
										<nav class="breadcrumb" role="navigation">
  <h2 class="breadcrumb__title">You are here</h2>
  <ul class="breadcrumb__list">
    <li class="breadcrumb__item"><a href="#">Home</a></li>
    <li class="breadcrumb__item"><a href="#">Section</a></li>
  </ul>
</nav>

Local Tasks

Primary tasks

Secondary tasks

HTML

									
										<h2 class="element-invisible">Primary tasks</h2>
<ul class="nav nav--primary-local-tasks">
  <li class="nav__item"><a class="nav__link" href="#">Primary</a></li>
  <li class="nav__item is-active"><a class="nav__link active" href="#">Local<span class="element-invisible">(active tab)</span></a></li>
  <li class="nav__item"><a class="nav__link" href="#">Tasks</a></li>
</ul>
<h2 class="element-invisible">Secondary tasks</h2>
<ul class="nav nav--secondary-local-tasks">
  <li class="nav__item is-active"><a class="nav__link active" href="#">Secondary<span class="element-invisible">(active tab)</span></a></li>
  <li class="nav__item"><a class="nav__link" href="#">Local</a></li>
  <li class="nav__item"><a class="nav__link" href="#">Tasks</a></li>
</ul>

Pager

HTML

									
										<nav role="navigation">
  <h2 class="element-invisible">Pages</h2>
  <ul class="pager">
    <li class="pager__item pager__item--first"><a class="pager__link pager__link--first" href="#"><span class="element-invisible">First page</span></a></li>
    <li class="pager__item pager__item--previous"><a class="pager__link pager__link--previous" rel="prev" href="#"><span class="element-invisible">Previous page</span></a></li>
    <li class="pager__item pager__item--ellipsis" role="presentation">…</li>
    <li class="pager__item"><a class="pager__link" href="#"><span class="element-invisible">Page </span>2</a></li>
    <li class="pager__item"><a class="pager__link" href="#"><span class="element-invisible">Page </span>3</a></li>
    <li class="pager__item"><a class="pager__link" href="#"><span class="element-invisible">Page </span>4</a></li>
    <li class="pager__item"><a class="pager__link" href="#"><span class="element-invisible">Page </span>5</a></li>
    <li class="pager__item pager__item--current"><span class="element-invisible">Currently on page </span>6</li>
    <li class="pager__item"><a class="pager__link" href="#"><span class="element-invisible">Page </span>7</a></li>
    <li class="pager__item"><a class="pager__link" href="#"><span class="element-invisible">Page </span>8</a></li>
    <li class="pager__item"><a class="pager__link" href="#"><span class="element-invisible">Page </span>9</a></li>
    <li class="pager__item"><a class="pager__link" href="#"><span class="element-invisible">Page </span>10</a></li>
    <li class="pager__item pager__item--ellipsis" role="presentation">…</li>
    <li class="pager__item pager__item--next"><a class="pager__link pager__link--next" rel="next" href="#"><span class="element-invisible">Next page</span></a></li>
    <li class="pager__item pager__item--last"><a class="pager__link pager__link--last" href="#"><span class="element-invisible">Last page</span></a></li>
  </ul>
</nav>

Footer Menu

HTML

									
										<nav class="block  block--menu-block" role="navigation">
  <h2 class="element-invisible block__title">Footer menu</h2>
  <ul class="nav nav--menu-footer">
    <li class="nav__item"><a class="nav__link" href="#">Home</a></li>
    <li class="nav__item"><a class="nav__link" href="#">About</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
    <li class="nav__item"><a class="nav__link" href="#">Contact</a></li>
  </ul>
</nav>

Site Name

HTML

									
										<span class="site-name">
  <a class="site-name__link" href="#" rel="home">
    <h1 class="site-name__text">Site Name</h1>
  </a>
</span>

Site Slogan

This is the site slogan.

HTML

									
										<span class="site-slogan">This is the site slogan.</span>

Page Title

HTML

									
										<h1 class="page-title">Page Title</h1>

File

file name (115.83 KB)

HTML

									
										<div class="file">
  <img class="file__icon" alt="application/pdf" src="../../drupal/images/application-pdf.png">
  <a href="#" class="file__link">file name</a>
  <span class="file__size">(115.83 KB)</span>
</div>

Messages

Warning message

This is a warning message about something that should be noted. This is a link.

HTML

									
										<div class="messages messages--status" role="alertdialog">
  <h2 class="element-invisible">Status message</h2>
  This is a status message about <em class="placeholder">something</em> that has been updated. <a href="#">This is a link</a>.
</div>

<div class="messages messages--warning">
  <h2 class="element-invisible">Warning message</h2>
  This is a warning message about <em class="placeholder">something</em> that should be noted. <a href="#">This is a link</a>.
</div>

<div class="messages messages--error" role="alertdialog">
  <h2 class="element-invisible">Error message</h2>
  This is an error message about <em class="placeholder">something</em> that went wrong. <a href="#">This is a link</a>.
</div>

<div class="messages messages--error" role="alertdialog">
  <h2 class="element-invisible">Error message</h2>
  <ul class="messages__list">
    <li class="messages__item">This is an error message. There are multiple error messages here.</li>
    <li class="messages__item">This is another error message about <em class="placeholder">something</em> that went wrong:<br>Description of what went wrong.</li>
  </ul>
</div>

Progress Bar

57%

This is the description for this progress bar.

HTML

									
										<div class="progress">
  <div class="progress__track">
  <div class="progress__bar" style="width: 57%"></div>
  </div>
  <div class="progress__percentage">57%</div>
  <div class="progress__description">This is the description for this progress bar.</div>
</div>

Basic Page

Page Title

This is the body content, which can contain HTML markup. There is no limit to how long this content can be.

HTML

									
										<article class="node node--page node--full" role="article">
  <h1 class="node__title">Page Title</h1>
  <p>This is the body content, which can contain <abbr title='Hyper Text Markup Language'>HTML</abbr> markup. There is no limit to how long this content can be.</p>
</article>

Article

Page Title

This is the body content, which can contain HTML markup. There is no limit to how long this content can be.

This pattern contains: base-long-datetime

HTML

									
										<article class="node node--article node--full" role="article">
  <h1 class="node__title">Page Title</h1>
  <footer>
    <div class="node__date">Monday, February 10, 2013 1:20pm
</div>
    <div class="node__author"><a href="#"></a></div>
  </footer>
  <p>This is the body content, which can contain <abbr title='Hyper Text Markup Language'>HTML</abbr> markup. There is no limit to how long this content can be.</p>
</article>

Topic

Page Title

This is the body content, which can contain HTML markup. There is no limit to how long this content can be.

HTML

									
										<article class="taxonomy-term taxonomy-term--topic" role="article">
  <h1 class="taxonomy-term__title">Page Title</h1>
  <p>This is the body content, which can contain <abbr title='Hyper Text Markup Language'>HTML</abbr> markup. There is no limit to how long this content can be.</p>
</article>

Teaser

Title

Feb 10, 2013

This is the summary, which can contain HTML markup. It should be 600 characters or less.

This pattern contains: base-medium-date

HTML

									
										<article class="node node--article node--teaser" role="article">
  <h2 class="node__title"><a href="#">Title</a></h2>
  <div class="node__date">Feb 10, 2013
</div>
  <p>This is the summary, which can contain <abbr title='Hyper Text Markup Language'>HTML</abbr> markup. It should be 600 characters or less.</p>
</article>

Image Teaser

Title

Feb 10, 2013

This is the summary, which can contain HTML markup. It should be 600 characters or less.

This pattern contains: base-thumbnail-image base-medium-date

HTML

									
										<article class="node node--article node--image-teaser" role="article">
  <div class="layout-slat">
    <div class="layout-slat__media">
      <a href="#"><img src="http://fpoimg.com/140x105?text=Thumbnail 4:3" alt="Thumbnail 4:3" height="105" width="140">
</a>
    </div>
    <div class="layout-slat__content">
      <h2 class="node__title"><a href="#">Title</a></h2>
      <div class="node__date">Feb 10, 2013
</div>
      <p>This is the summary, which can contain <abbr title='Hyper Text Markup Language'>HTML</abbr> markup. It should be 600 characters or less.</p>
    </div>
  </div>
</article>

Search Result

Title

This is the summary, which can contain HTML markup. It should be 600 characters or less.

This pattern contains: base-icon-image

HTML

									
										<article class="node node--article node--search-result" role="article">
  <div class="layout-slat">
    <div class="layout-slat__media">
      <a href="#"><img src="http://fpoimg.com/48x48?text=Icon" alt="Icon" height="48" width="48">
</a>
    </div>
    <div class="layout-slat__content">
      <h3 class="node__title"><a href="#">Title</a></h3>
      <p>This is the summary, which can contain <abbr title='Hyper Text Markup Language'>HTML</abbr> markup. It should be 600 characters or less.</p>
    </div>
  </div>
</article>

Slat

Media

Content

HTML

									
										<div class="layout-slat">
  <div class="layout-slat__header">
    <p style="background:#333;color:#fff;padding:1em">Header</p>
  </div>
  <div class="layout-slat__media">
    <p style="background:#333;color:#fff;padding:1em">Media</p>
  </div>
  <div class="layout-slat__content">
    <p style="background:#333;color:#fff;padding:1em">Content</p>
  </div>
</div>

Slat Reversed

Media

Content

HTML

									
										<div class="layout-slat layout-slat--reversed">
  <div class="layout-slat__header">
    <p style="background:#333;color:#fff;padding:1em">Header</p>
  </div>
  <div class="layout-slat__media">
    <p style="background:#333;color:#fff;padding:1em">Media</p>
  </div>
  <div class="layout-slat__content">
    <p style="background:#333;color:#fff;padding:1em">Content</p>
  </div>
</div>

Sidebar

Preface

Main

HTML

									
										<div class="layout-panels-sidebar preface main sidebar">
  <div class="layout-preface">
    <p style="background:#333;color:#fff;padding:1em">Preface</p>
  </div>
  <div class="layout-main">
    <p style="background:#333;color:#fff;padding:1em">Main</p>
  </div>
  <div class="layout-sidebar">
    <p style="background:#333;color:#fff;padding:1em">Sidebar</p>
  </div>
</div>

Sidebar Without Sidebar

Preface

Main

HTML

									
										<div class="layout-panels-sidebar preface main sidebar-empty">
  <div class="layout-preface">
    <p style="background:#333;color:#fff;padding:1em">Preface</p>
  </div>
  <div class="layout-main">
    <p style="background:#333;color:#fff;padding:1em">Main</p>
  </div>
</div>

Three Column

Preface

First

Second

Third

HTML

									
										<div class="layout-panels-three-column preface first second third">
  <div class="layout-preface">
    <p style="background:#333;color:#fff;padding:1em">Preface</p>
  </div>
  <div class="layout-first">
    <p style="background:#333;color:#fff;padding:1em">First</p>
  </div>
  <div class="layout-second">
    <p style="background:#333;color:#fff;padding:1em">Second</p>
  </div>
  <div class="layout-third">
    <p style="background:#333;color:#fff;padding:1em">Third</p>
  </div>
</div>

Three Column Without One Column

Preface

First

Second

HTML

									
										<div class="layout-panels-three-column preface first second third-empty">
  <div class="layout-preface">
    <p style="background:#333;color:#fff;padding:1em">Preface</p>
  </div>
  <div class="layout-first">
    <p style="background:#333;color:#fff;padding:1em">First</p>
  </div>
  <div class="layout-second">
    <p style="background:#333;color:#fff;padding:1em">Second</p>
  </div>
</div>

Three Column Without Two Columns

Preface

First

HTML

									
										<div class="layout-panels-three-column preface first second-empty third-empty">
  <div class="layout-preface">
    <p style="background:#333;color:#fff;padding:1em">Preface</p>
  </div>
  <div class="layout-first">
    <p style="background:#333;color:#fff;padding:1em">First</p>
  </div>
</div>

Utility Region

HTML

									
										<!-- This region usually has the layout-constrain class, but it's been removed for Pattern Lab. -->
<div class="region-utility">
</div>

Header Region

This pattern contains: components-site-name components-site-slogan

HTML

									
										<header class="header" role="banner">
  <div class="region-header layout-constrain">
    <span class="site-name">
      <a class="site-name__link" href="#" rel="home">
        <h1 class="site-name__text">Site Name</h1>
      </a>
    </span>
    <span class="site-slogan">This is the site slogan.</span>
  </div>
</header>

Navigation Region

This pattern contains: components-main-menu

HTML

									
										<div class="region-navigation layout-constrain">
  <nav class="block  block--menu-block" role="navigation">
    <h2 class="element-invisible block__title">Main menu</h2>
    <ul class="nav nav--main-menu">
      <li class="nav__item"><a class="nav__link" href="#">Home</a></li>
      <li class="nav__item"><a class="nav__link" href="#">About</a></li>
      <li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
      <li class="nav__item"><a class="nav__link" href="#">Contact</a></li>
    </ul>
  </nav>
</div>

Preface Region

This pattern contains: components-breadcrumbs

HTML

									
										<div class="region-preface layout-constrain">
  <nav class="breadcrumb" role="navigation">
    <h2 class="breadcrumb__title">You are here</h2>
    <ul class="breadcrumb__list">
      <li class="breadcrumb__item"><a href="#">Home</a></li>
      <li class="breadcrumb__item"><a href="#">Section</a></li>
    </ul>
  </nav>
</div>

Postscript Region

HTML

									
										<div class="region-postscript layout-constrain">
</div>

Footer Region

This pattern contains: components-footer-menu

HTML

									
										<footer class="footer" role="contentinfo">
  <div class="region-footer layout-constrain">
    <nav class="block  block--menu-block" role="navigation">
      <h2 class="element-invisible block__title">Footer menu</h2>
      <ul class="nav nav--menu-footer">
        <li class="nav__item"><a class="nav__link" href="#">Home</a></li>
        <li class="nav__item"><a class="nav__link" href="#">About</a></li>
        <li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
        <li class="nav__item"><a class="nav__link" href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</footer>