-
#363942
$color-base
Body text -
#419DD2
$color-link
Link -
#40BAD2
$color-link-focus
Link hover -
#EEEE8F
$color-highlight
Highlight -
#DDD
$color-muted
Muted -
#999
$color-muted-alt
Muted (Alt) -
#F0F0F0
$color-canvas
Canvas
-
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!?@£$%^&*()_+-=’”,.:; Lucida Grande$font-sans-regular
Body text -
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!?@£$%^&*()_+-=’”,.:; Georgia$font-serif-regular
Body text alt -
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789!?@£$%^&*()_+-=’”,.:; Monaco$font-monospace-regular
Body text alt 2
a-mail
1 <p>This is <a href="mailto:">an email link</a></p>
This is an email link
a-rel-external
1 <p>This is <a href="http://google.com" rel="external">an external link</a></p>
This is an external link
a-rel-xfn
1 <p>This is <a href="http://maban.co.uk" rel="me">my website</a></p>
This is my website
a
1 <p>This is <a href="#">an inline link</a>.</p>
This is an inline link.
alert-default
1 <div class="alert">
2 <p>This is a general notification.</p>
3 </div><!-- .alert -->
This is a general notification.
alert-failure
1 <div class="alert alert-failure">
2 <p>This is a notification of a failed action or event.</p>
3 </div><!-- .alert-failure -->
This is a notification of a failed action or event.
alert-info
1 <div class="alert alert-info">
2 <p>This is a notification with some information.</p>
3 </div><!-- .alert-info -->
This is a notification with some information.
alert-success
1 <div class="alert alert-success">
2 <p>This is a notification of a successful action or event.</p>
3 </div><!-- .alert-success -->
This is a notification of a successful action or event.
availability
1 <!-- Inspired by http://csswizardry.com/work/ -->
2
3 <table class="availability">
4 <tfoot>
5 <tr class="availability-year">
6 <th colspan="8">2014</th>
7 <th colspan="4">2015</th>
8 </tr>
9 </tfoot>
10 <thead class="availability-header">
11 <tr class="availability-month">
12 <th><abbr title="May 2014">May</abbr></th>
13 <th><abbr title="June 2014">Jun</abbr></th>
14 <th><abbr title="July 2014">Jul</abbr></th>
15 <th><abbr title="August 2014">Aug</abbr></th>
16 <th><abbr title="September 2014">Sep</abbr></th>
17 <th><abbr title="October 2014">Oct</abbr></th>
18 <th><abbr title="November 2014">Nov</abbr></th>
19 <th><abbr title="December 2015">Dec</abbr></th>
20 <th><abbr title="January 2015">Jan</abbr></th>
21 <th><abbr title="February 2015">Feb</abbr></th>
22 <th><abbr title="March 2015">Mar</abbr></th>
23 <th><abbr title="April 2015">Apr</abbr></th>
24 </tr>
25 </thead>
26 <tbody class="availability-body">
27 <tr class="availability-schedule">
28 <td class="availability-unavailable" title="Unavailable">Unavailable</td>
29 <td class="availability-unavailable" title="Unavailable">Unavailable</td>
30 <td class="availability-unavailable" title="Unavailable">Unavailable</td>
31 <td class="availability-unavailable" title="Unavailable">Unavailable</td>
32 <td class="availability-limited" title="Limited Availability">Limited</td>
33 <td class="availability-limited" title="Limited Availability">Limited</td>
34 <td class="availability-available" title="Availabile">Available</td>
35 <td class="availability-available" title="Availabile">Available</td>
36 <td class="availability-available" title="Availabile">Available</td>
37 <td class="availability-available" title="Availabile">Available</td>
38 <td class="availability-available" title="Availabile">Available</td>
39 <td class="availability-available" title="Availabile">Available</td>
40 </tr>
41 </tbody>
42 </table>
2014 | 2015 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
May | Jun | Jul | Aug | Sep | Oct | Nov | Dec | Jan | Feb | Mar | Apr |
Unavailable | Unavailable | Unavailable | Unavailable | Limited | Limited | Available | Available | Available | Available | Available | Available |
contact
1 <p class="vcard">
2 Name: <span class="honorific-prefix"> </span> <span class="fn"> </span><br/>
3 Nickname: <span class="nickname"> </span><br/>
4 Role: <span class="role"> </span><br/>
5 Organisation: <span class="org"> </span><br/>
6 Website: <a href="#" class="url"> </a><br/>
7 Email: <a mailto="#" class="email"> </a><br/>
8 Tel: <span class="tel"> </span><br/>
9 Birthday: <time class="bday"> </time><br/>
10 <img src="" class="photo" />
11 </p>
form-button-default
1 <button>Button</button>
2 <button type="submit">Submit button</button>
3 <a href="#" class="button">Link button</a>
4 <input type="button" value="Input button">
5 <input type="submit" value="Input submit button">
form-button-size-l
1 <button class="button-l">Button</button>
2 <button type="submit" class="button-l">Submit button</button>
3 <a href="#" class="button button-l">Link button</a>
4 <input type="button" value="Input button" class="button-l">
5 <input type="submit" value="Input submit button" class="button-l">
form-button-size-s
1 <button class="button-s">Button</button>
2 <button type="submit" class="button-s">Submit button</button>
3 <a href="#" class="button button-s">Link button</a>
4 <input type="button" value="Input button" class="button-s">
5 <input type="submit" value="Input submit button" class="button-s">
form-button-style-disabled
1 <button disabled>Button</button>
2 <button type="submit" disabled>Submit button</button>
3 <a href="#" class="button-disabled">Link button</a>
4 <input type="button" value="Input button" disabled>
5 <input type="submit" value="Input submit button" disabled>
form-datalist-multiple
1 <p>
2 <label for="locations">Select your State <abbr title="Required">*</abbr></label>
3 <datalist id="locations">
4 <select name="locations"><!-- Browser Fallback -->
5 <option value="United Kingdom">United Kingdom</option>
6 <option value="United States">United States</option>
7 <option value="France">France</option>
8 <option value="Spain">Spain</option>
9 <option value="Germany">Germany</option>
10 <option value="Russia">Russia</option>
11 <option value="China">China</option>
12 </select>
13 If other, please specify:
14 </datalist>
15 <input id="text" type="text" name="location" list="locations" multiple/>
16 <small class="note">Note about this selection</small>
17 </p>
Note about this selection
form-datalist
1 <p>
2 <label for="locations">Select your State <abbr title="Required">*</abbr></label>
3 <datalist id="locations">
4 <select name="locations"><!-- Browser Fallback -->
5 <option value="United Kingdom">United Kingdom</option>
6 <option value="United States">United States</option>
7 <option value="France">France</option>
8 <option value="Spain">Spain</option>
9 <option value="Germany">Germany</option>
10 <option value="Russia">Russia</option>
11 <option value="China">China</option>
12 </select>
13 If other, please specify:
14 </datalist>
15 <input id="text" type="text" name="location" list="locations"/>
16 <small class="note">Note about this selection</small>
17 </p>
Note about this selection
form-fieldset-select-checkboxes-captions
1 <form>
2 <fieldset class="select field">
3 <legend>Checkboxes with captions <abbr title="Required">*</abbr></legend>
4 <ul class="list-form">
5 <li>
6 <label for="checkbox11"><input id="checkbox11" name="checkbox" type="checkbox" checked/> Choice A</label>
7 <small class="note">Note about this option</small>
8 </li>
9 <li>
10 <label for="checkbox21"><input id="checkbox21" name="checkbox" type="checkbox"/> Choice B</label>
11 <small class="note">Note about this option</small>
12 </li>
13 <li>
14 <label for="checkbox31"><input id="checkbox31" name="checkbox" type="checkbox"/> Choice C</label>
15 <small class="note">Note about this option</small>
16 </li>
17 </ul>
18 </fieldset>
19 </form>
form-fieldset-select-checkboxes
1 <form>
2 <fieldset class="select field">
3 <legend>Checkboxes <abbr title="Required">*</abbr></legend>
4 <ul class="list-form">
5 <li>
6 <label for="checkbox10"><input id="checkbox10" name="checkbox" type="checkbox" checked/> Choice A</label>
7 </li>
8 <li>
9 <label for="checkbox20"><input id="checkbox20" name="checkbox" type="checkbox"/> Choice B</label>
10 </li>
11 <li>
12 <label for="checkbox30"><input id="checkbox30" name="checkbox" type="checkbox"/> Choice C</label>
13 </li>
14 </ul>
15 <small class="note">Note about these options</small>
16 </fieldset>
17 </form>
form-fieldset-select-radios
1 <form>
2 <fieldset class="select field">
3 <legend>Radios <abbr title="Required">*</abbr></legend>
4 <ul class="list-form">
5 <li>
6 <label for="radio1"><input id="radio1" name="radio" type="radio" checked/> Option 1</label>
7 </li>
8 <li>
9 <label for="radio2"><input id="radio2" name="radio" type="radio"/> Option 2</label>
10 </li>
11 <li>
12 <label for="radio3"><input id="radio3" name="radio" type="radio"/> Option 3</label>
13 </li>
14 </ul>
15 <small class="note">Note about these options</small>
16 </fieldset>
17 </form>
form-fieldset
1 <form>
2 <fieldset>
3 <legend>Legend</legend>
4 <p><small class="note">Required fields are marked <abbr title="Required">*</abbr></small></p>
5 </fieldset>
6 </form>
form-file-multiple
1 <p class="field">
2 <label for="upload-multiple">Upload Files</label>
3 <input name="upload-multiple" type="file" multiple/>
4 </p>
form-file
1 <p class="field">
2 <label for="upload">Upload Files</label>
3 <input name="upload" type="file" />
4 </p>
form-input-checkbox-disabled
1 <p>
2 <label for="checkbox"><input id="checkbox" type="checkbox" disabled/> Disabled checkbox</label>
3 <small class="note">Note about this field</small>
4 <p>
Note about this field
form-input-checkbox
1 <p class="field">
2 <label for="checkbox"><input id="checkbox" type="checkbox"/> Checkbox</label>
3 <small class="note">Note about this field</small>
4 <p>
Note about this field
form-input-color
1 <p class="field">
2 <label for="color">Pick a colour</label>
3 <input name="color" type="color"/>
4 </p>
form-input-date
1 <p class="field">
2 <label for="date">Pick a date</label>
3 <input name="date" type="date"/>
4 </p>
5
6 <p class="field">
7 <label for="date-ranged">Pick a date in 2013</label>
8 <input name="date-ranged" type="date" min="2013-01-01" max="2013-12-31"/>
9 </p>
10
11 <p class="field">
12 <label for="date-month">Pick a month</label>
13 <input name="date-month" type="month"/>
14 </p>
15
16 <p class="field">
17 <label for="date-week">Pick a week</label>
18 <input name="date-week" type="week"/>
19 </p>
20
21 <p class="field">
22 <label for="date-time">Pick a time</label>
23 <input name="date-time" type="time"/>
24 </p>
form-input-email
1 <p class="field">
2 <label for="email">Email address <abbr title="Required">*</abbr></label>
3 <input id="email" type="email" placeholder="you@example.com" required/>
4 <small class="note">Note about this field</small>
5 </p>
Note about this field
form-input-number
1 <p class="field">
2 <label for="number">Pick a number</label>
3 <input name="number" type="number"/>
4 </p>
5
6 <p class="field">
7 <label for="number-ranged">Rate your meal between 0 and 5</label>
8 <input name="number-ranged" type="number" min="0" max="5" step="0.5"/>
9 </p>
form-input-password
1 <p class="field">
2 <label for="password">Password <abbr title="Required">*</abbr></label>
3 <input id="password" type="password" required/>
4 <small class="note">Note about this field</small>
5 </p>
Note about this field
form-input-range
1 <p class="field">
2 <label for="number-range">Pick a number</label>
3 <input name="number-range" type="range" min="1" max="100" value="0"/>
4 </p>
form-input-search
1 <p class="field">
2 <input type="search" placeholder="Search" autocomplete="on" /><input type="submit" value="Go" />
3 </p>
form-input-tel
1 <p class="field">
2 <label for="phone-number">Phone number</label>
3 <input id="phone-number" type="tel" />
4 <small class="note">Note about this field</small>
5 </p>
Note about this field
form-input-text-disabled
1 <p>
2 <label for="text-disabled">Disabled text</label>
3 <input id="text-disabled" type="text" disabled/>
4 <small class="note">Note about this field</small>
5 </p>
Note about this field
form-input-text
1 <p class="field">
2 <label for="text">Text <abbr title="Required">*</abbr></label>
3 <input id="text" type="text" required/>
4 <small class="note">Note about this field</small>
5 </p>
Note about this field
form-input-url
1 <p class="field">
2 <label for="url">Web address <abbr title="Required">*</abbr></label>
3 <input id="url" type="url" placeholder="http://example.com" required/>
4 <small class="note">Note about this field</small>
5 </p>
Note about this field
form-inputs-combined
1 <p>
2 <label for="combined">Combined Input</label>
3 <span class="combined">
4 <input id="combined" class="input" type="text"/><!--
5 --><input type="button" class="button" value="Input Button"/>
6 </span>
7 </p>
form-options.checkboxes-captions
1 <form>
2 <fieldset>
3 <legend>Checkbox <abbr title="Required">*</abbr></legend>
4 <ul class="list-form">
5 <li>
6 <label for="checkbox1" class="check"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"/>Choice A</label>
7 <small class="note">Note about these option</small>
8 </li>
9 <li>
10 <label for="checkbox2" class="check"><input id="checkbox2" name="checkbox" type="checkbox"/>Choice B</label>
11 <small class="note">Note about these option</small>
12 </li>
13 <li>
14 <label for="checkbox3" class="check"><input id="checkbox3" name="checkbox" type="checkbox"/>Choice C</label>
15 <small class="note">Note about these option</small>
16 </li>
17 </ul>
18 </fieldset>
19 </form>
form-options.checkboxes
1 <fieldset>
2 <legend>Checkbox <abbr title="Required">*</abbr></legend>
3 <ul class="list-form">
4 <li>
5 <label for="checkbox1" class="check"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"/>Choice A</label>
6 </li>
7 <li>
8 <label for="checkbox2" class="check"><input id="checkbox2" name="checkbox" type="checkbox"/>Choice B</label>
9 </li>
10 <li>
11 <label for="checkbox3" class="check"><input id="checkbox3" name="checkbox" type="checkbox"/>Choice C</label>
12 </li>
13 </ul>
14 <small class="note">Note about these options</small>
15 </fieldset>
form-options.radios
1 <form>
2 <fieldset>
3 <legend>Radio <abbr title="Required">*</abbr></legend>
4 <ul class="list-form">
5 <li>
6 <label for="radio1" class="check"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"/>Option 1</label>
7 </li>
8 <li>
9 <label for="radio2" class="check"><input id="radio2" name="radio" type="radio" class="radio"/>Option 2</label>
10 </li>
11 <li>
12 <label for="radio3" class="check"><input id="radio3" name="radio" type="radio" class="radio"/>Option 3</label>
13 </li>
14 </ul>
15 <small class="note">Note about these options</small>
16 </fieldset>
17 </form>
form-search-global
1 <form class="search-global" id="search-global">
2 <input type="search" id="search-global-input" class="search-global-input" autocomplete="off" placeholder="Search" name="search-global" />
3 <!-- consider applying autofocus="autofocus" to input -->
4 <button class="search-global-submit" id="search-global-submit" value="Search" type="submit" name="search-global">Search</button>
5 </form>
form-select-disabled
1 <p>
2 <label for="select-disabled">Disabled select <abbr title="Required">*</abbr></label>
3 <select id="select-disabled" disabled>
4 <optgroup label="Option Group A">
5 <option>Option One</option>
6 <option>Option Two</option>
7 <option>Option Three</option>
8 </optgroup>
9 <optgroup label="Option Group B">
10 <option>Option Four</option>
11 <option>Option Five</option>
12 <option>Option Six</option>
13 </optgroup>
14 </select>
15 <small class="note">Note about this selection</small>
16 </p>
Note about this selection
form-select-multiple-disabled
1 <p>
2 <label for="select-multiple-disabled">Disabled multiple select <abbr title="Required">*</abbr></label>
3 <select id="select-multiple-disabled" multiple disabled>
4 <optgroup label="Option Group A">
5 <option>Option One</option>
6 <option>Option Two</option>
7 <option>Option Three</option>
8 </optgroup>
9 <optgroup label="Option Group B">
10 <option>Option Four</option>
11 <option>Option Five</option>
12 <option>Option Six</option>
13 </optgroup>
14 </select>
15 <small class="note">Note about this selection</small>
16 </p>
Note about this selection
form-select-multiple
1 <p class="field">
2 <label for="select-multiple">Multiple select <abbr title="Required">*</abbr></label>
3 <select id="select-multiple" multiple>
4 <optgroup label="Option Group A">
5 <option>Option One</option>
6 <option>Option Two</option>
7 <option>Option Three</option>
8 </optgroup>
9 <optgroup label="Option Group B">
10 <option>Option Four</option>
11 <option>Option Five</option>
12 <option>Option Six</option>
13 </optgroup>
14 </select>
15 <small class="note">Note about this selection</small>
16 </p>
Note about this selection
form-select
1 <p>
2 <label for="select">Select your State <abbr title="Required">*</abbr></label>
3 <select id="state">
4 <option>Alabama</option>
5 <option>Alaska</option>
6 <option>Arizona</option>
7 <option>Arkansas</option>
8 <option>American Samoa</option>
9 <option>California</option>
10 <option>Colorado</option>
11 <option>Connecticut</option>
12 <option>Delaware</option>
13 <option>District of Columbia</option>
14 <option>Florida</option>
15 <option>Georgia</option>
16 <option>Guam</option>
17 <option>Hawaii</option>
18 <option>Idaho</option>
19 <option>Illinois</option>
20 <option>Indiana</option>
21 <option>Iowa</option>
22 <option>Kansas</option>
23 <option>Kentucky</option>
24 <option>Louisiana</option>
25 <option>Maine</option>
26 <option>Maryland</option>
27 <option>Massachusetts</option>
28 <option>Michigan</option>
29 <option>Minnesota</option>
30 <option>Mississippi</option>
31 <option>Missouri</option>
32 <option>Montana</option>
33 <option>Nebraska</option>
34 <option>Nevada</option>
35 <option>New Hampshire</option>
36 <option>New Jersey</option>
37 <option>New Mexico</option>
38 <option>New York</option>
39 <option>North Carolina</option>
40 <option>North Dakota</option>
41 <option>Northern Mariana Islands</option>
42 <option>Ohio</option>
43 <option>Oklahoma</option>
44 <option>Oregon</option>
45 <option>Pennsylvania</option>
46 <option>Puerto Rico</option>
47 <option>Rhode Island</option>
48 <option>South Carolina</option>
49 <option>South Dakota</option>
50 <option>Tennessee</option>
51 <option>Texas</option>
52 <option>United States Virgin Islands</option>
53 <option>Utah</option>
54 <option>Vermont</option>
55 <option>Virginia</option>
56 <option>Washington</option>
57 <option>West Virginia</option>
58 <option>Wisconsin</option>
59 <option>Wyoming</option>
60 </select>
61 <small class="note">Note about this selection</small>
62 </p>
Note about this selection
form-signup
1 <form>
2 <ul class="list-form">
3 <li class="form-field">
4 <input id="text" class="input" type="email" placeholder="email" />
5 <small class="note">Note about this field</small>
6 </li>
7 <li class="form-field">
8 <input id="text" class="input" type="text" placeholder="first name" />
9 </li>
10 <li class="form-field">
11 <select>
12 <option>1</option>
13 <option>2</option>
14 <option>3</option>
15 <option>4</option>
16 <option>5</option>
17 </select>
18 </li>
19 </ul>
20 </form>
form-textarea-disabled
1 <p>
2 <label for="textarea">Disabled textarea</label>
3 <textarea id="textarea" rows="8" cols="32" disabled></textarea>
4 <small class="note">Note about this field</small>
5 </p>
Note about this field
form-textarea
1 <p>
2 <label for="textarea">Textarea <abbr title="Required">*</abbr></label>
3 <textarea id="textarea" class="input" rows="8" cols="32" required></textarea>
4 <small class="note">Note about this field</small>
5 </p>
Note about this field
heading-1
1 <h1>Heading One</h1>
Heading One
heading-2
1 <h2>Heading Two</h2>
Heading Two
heading-3
1 <h3>Heading Three</h3>
Heading Three
heading-4
1 <h4>Heading Four</h4>
Heading Four
heading-5
1 <h5>Heading Five</h5>
Heading Five
heading-6
1 <h6>Heading Six</h6>
Heading Six
lede
1 <p class="lede">A <strong>lede</strong>, or <strong>lead</strong>, paragraph in literature is the opening paragraph of an article, essay, news story or book chapter. It usually occurs together with the headline or title. It precedes the main body of the article, and it gives the reader the main idea of the story. In both spellings, the word rhymes with the word <em>need</em>.</p><!--/.lede-->
A lede, or lead, paragraph in literature is the opening paragraph of an article, essay, news story or book chapter. It usually occurs together with the headline or title. It precedes the main body of the article, and it gives the reader the main idea of the story. In both spellings, the word rhymes with the word need.
list-horizontal
1 <nav role="navigation" class="nav list-horizontal">
2 <ul class="list">
3 <li><a href="#">Lorem link</a></li>
4 <li><a href="#" class="is-active">Active link</a></li>
5 <li><a href="#">Ipsum link</a></li>
6 <li><a href="#">Dolor link</a></li>
7 </ul>
8 </nav><!--/.nav-horizontal-->
list-ordered
1 <ol>
2 <li>Bread</li>
3 <li>Milk</li>
4 <li>Eggs</li>
5 <li>Butter</li>
6 </ol>
- Bread
- Milk
- Eggs
- Butter
list-unordered
1 <ul>
2 <li>Preheat oven to 180°C</li>
3 <li>Mix ingredients together in a bowl</li>
4 <li>Grease a baking tin</li>
5 <li>Pour the mixture into the baking tin</li>
6 <li>Bake in oven for 40-45 minutes</li>
7 </ul>
- Preheat oven to 180°C
- Mix ingredients together in a bowl
- Grease a baking tin
- Pour the mixture into the baking tin
- Bake in oven for 40-45 minutes
media-audio
1 <audio src="/_media/audio/audio.mp3" controls></audio>
media-image
1 <img src="/image/image.jpg" alt="Some alt text"/>

media-video
1 <video controls>
2 <source src="/_media/video/video.webm" type="video/webm"/>
3 <source src="/_media/video/video.mp4" type="video/mp4"/>
4 </video>
table
1 <table>
2 <thead>
3 <tr>
4 <th>State</th>
5 </tr>
6 <tr>
7 <th>Minimum driving age</th>
8 </tr>
9 </thead>
10 <tbody>
11 <tr>
12 <th>South Africa</th>
13 <td>18</td>
14 </tr>
15 <tr>
16 <th>Canada</th>
17 <td>16</td>
18 </tr>
19 <tr>
20 <th>United States</th>
21 <td>14-21</td>
22 </tr>
23 <tr>
24 <th>Bahamas</th>
25 <td>17</td>
26 </tr>
27 <tr>
28 <th>Bangladesh</th>
29 <td>18</td>
30 </tr>
31 <tr>
32 <th>China</th>
33 <td>18</td>
34 </tr>
35 <tr>
36 <th>Ireland</th>
37 <td>17</td>
38 </tr>
39 <tr>
40 <th>Spain</th>
41 <td>18</td>
42 </tr>
43 <tr>
44 <th>Australia</th>
45 <td>16-18</td>
46 </tr>
47 </tbody>
48 </table>
State | |
---|---|
Minimum driving age | |
South Africa | 18 |
Canada | 16 |
United States | 14-21 |
Bahamas | 17 |
Bangladesh | 18 |
China | 18 |
Ireland | 17 |
Spain | 18 |
Australia | 16-18 |
text-abbr
1 <p><abbr title="HyperText Markup Language">HTML</abbr></p>
HTML
text-addr
1 <p class="adr">
2 <span class="street-address">10 Downing Street</span><br/>
3 <span class="locality">London</span><br/>
4 <span class="region">City of London</span><br/>
5 <span class="postal-code">A12 3BC</span><br/>
6 <span class="country-name">United Kingdom</span><br/>
7 </p>
10 Downing Street
London
City of London
A12 3BC
United Kingdom
text-blockquote
1 <blockquote>
2 <p>In matters of truth and justice, there is no difference between large and small problems, for issues concerning the treatment of people are all the same.</p>
3 </blockquote>
In matters of truth and justice, there is no difference between large and small problems, for issues concerning the treatment of people are all the same.
text-caption
1 <p class="note">Your email address will not be published.</p><!--/.caption-->
Your email address will not be published.
text-cite
1 <p><cite>The Guardian</cite>, January 2nd, 2014</p>
The Guardian, January 2nd, 2014
text-code-pre
1 <pre class="language-css">
2 <code>ul li {
3 list-style-type: square;
4 padding-left: 0;
5 }</code>
6 </pre>
ul li {
list-style-type: square;
padding-left: 0;
}
text-code
1 <p>This is some <code>inline code</code>.</p>
This is some inline code
.
text-dfn
1 <p>A <dfn>kernel</dfn> is a softer, usually edible part of a nut, seed, or fruit stone contained within its shell.</p>
A kernel is a softer, usually edible part of a nut, seed, or fruit stone contained within its shell.
text-figure
1 <figure>
2 <img src="image.jpg" alt="Some alt text"/>
3 <figcaption>
4 <p>This is a caption</p>
5 </figcaption>
6 </figure>

This is a caption