# 2 #base Base

These are the base styles applied to HTML elements.

## 2.1 #base.headings Headings

All HTML headings, `<h1>` through `<h6>`, are available. `%h1` through `%h6` classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

Example

# Heading Level 1 (h1)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

## Heading Level 2 (h2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

### Heading Level 3 (h3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

#### Heading Level 4 (h4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

##### Heading Level 5 (h5)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

###### Heading Level 6 (h6)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

# A Heading Level 1 (h1) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

## Heading Level 2 (h2) with enough text to wrap to another line; Heading Level 2 (h2) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

### Heading Level 3 (h3) with enough text to wrap to another line; Heading Level 3 (h3) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

#### Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

##### Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

###### Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

    <h1 class="">Heading Level 1 (h1)</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
    <h2 class="">Heading Level 2 (h2)</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
    <h3 class="">Heading Level 3 (h3)</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
    <h4 class="">Heading Level 4 (h4)</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
    <h5 class="">Heading Level 5 (h5)</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
    <h6 class="">Heading Level 6 (h6)</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>

    <h1 class="">A Heading Level 1 (h1) with enough text to wrap to another line</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
    <h2 class="">Heading Level 2 (h2) with enough text to wrap to another line; Heading Level 2 (h2) with enough text to wrap to another line</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
    <h3 class="">Heading Level 3 (h3) with enough text to wrap to another line; Heading Level 3 (h3) with enough text to wrap to another line</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
    <h4 class="">Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
    <h5 class="">Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
    <h6 class="">Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>

## 2.2 #base.link Links

Hyperlinks are used to allow the user to navigate to other resources or to download a resource.

The order of link states are based on Eric Meyer's article: http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states

Examples
Default styling
This is a link to another web page.
:visited
A link that has already been visited.
This is a link to another web page.
:hover
A link that is being hovered over.
This is a link to another web page.
:focus
A link that has been given keyboard focus.
This is a link to another web page.
:active
A link that is being actively clicked.
This is a link to another web page.

    This is a <a href="#" class="[modifier class]">link to another web page</a>.

## 2.3 #base.grouping Grouping content

### 2.3.1 #base.grouping.blockquote Blockquotes

For quoting blocks of content from another source within your document. Wrap `<blockquote>` around any HTML as the quote. For straight quotes, we recommend a `<p>`.

Optionally, add a `<footer>` to identify the source of the quote. Wrap the name of the source work in `<cite>`.

Example

> Block quote, vehicula a condimentum in, molestie et justo. Nunc lacinia eros sit amet arcu vestibulum pretium sed vel purus. Vivamus tempor mauris nec nulla pellentesque dictum. Morbi fringilla volutpat purus a vulputate. Curabitur metus nunc, mollis a vestibulum ac, mollis a magna. Nunc a mauris gravida, molestie urna non, finibus elit.

> Block quote, vehicula a condimentum in, molestie et justo. Nunc lacinia eros sit amet arcu vestibulum pretium sed vel purus. Vivamus tempor mauris nec nulla pellentesque dictum. Morbi fringilla volutpat purus a vulputate. Curabitur metus nunc, mollis a vestibulum ac, mollis a magna. Nunc a mauris gravida, molestie urna non, finibus elit.

    <blockquote>
      <p>Block quote, vehicula a condimentum in, molestie et justo. Nunc lacinia eros sit amet arcu vestibulum pretium sed vel purus. Vivamus tempor mauris nec nulla pellentesque dictum. Morbi fringilla volutpat purus a vulputate. Curabitur metus nunc, mollis a vestibulum ac, mollis a magna. Nunc a mauris gravida, molestie urna non, finibus elit.</p>
    </blockquote>

    <blockquote>
      <p>Block quote, vehicula a condimentum in, molestie et justo. Nunc lacinia eros sit amet arcu vestibulum pretium sed vel purus. Vivamus tempor mauris nec nulla pellentesque dictum. Morbi fringilla volutpat purus a vulputate. Curabitur metus nunc, mollis a vestibulum ac, mollis a magna. Nunc a mauris gravida, molestie urna non, finibus elit.</p>
      <footer>J. Smith in <cite title="Source Title, 2nd Edition">Source
      Title</cite></footer>
    </blockquote>

### 2.3.2 #base.grouping.figure Figures

The element can thus be used to annotate illustrations, diagrams, photos, code listings, etc.

Optionally, a <figcaption> element inside the <figure> represents the caption of the figure.

Example
An illustration, diagram, photo, code listing, etc.
An illustration, diagram, photo, code listing, etc.
Figure 1

    <figure>
      An illustration, diagram, photo, code listing, etc.
    </figure>

    <figure>
      An illustration, diagram, photo, code listing, etc.
      <figcaption>Figure 1</figcaption>
    </figure>

### 2.3.3 #base.grouping.hr Horizontal rule

The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

Example

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
    dolor id nibh ultricies vehicula.</p>

    <hr>

    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
    ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>

### 2.3.4 #base.grouping.lists Lists

#### 2.3.4.1 #base.grouping.lists.dl Description list

A list of terms with their associated descriptions.

Example

Description lists
  A description list is perfect for defining terms.
Euismod
  Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
  Donec id elit non mi porta gravida at eget metus.
Malesuada porta
  Etiam porta sem malesuada magna mollis euismod.

    <dl>
      <dt>Description lists</dt>
      <dd>A description list is perfect for defining terms.</dd>
      <dt>Euismod</dt>
      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
      <dd>Donec id elit non mi porta gravida at eget metus.</dd>
      <dt>Malesuada porta</dt>
      <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
    </dl>

#### 2.3.4.2 #base.grouping.lists.ol Ordered list

A list of items in which the order does explicitly matter.

Example

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
   1. Phasellus iaculis neque
   2. Purus sodales ultricies
   3. Vestibulum laoreet porttitor sem
   4. Ac tristique libero volutpat at
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

    <ol>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
      <li>Integer molestie lorem at massa</li>
      <li>Facilisis in pretium nisl aliquet</li>
      <li>Nulla volutpat aliquam velit
        <ol>
          <li>Phasellus iaculis neque</li>
          <li>Purus sodales ultricies</li>
          <li>Vestibulum laoreet porttitor sem</li>
          <li>Ac tristique libero volutpat at</li>
        </ol>
      </li>
      <li>Faucibus porta lacus fringilla vel</li>
      <li>Aenean sit amet erat nunc</li>
      <li>Eget porttitor lorem</li>
    </ol>

#### 2.3.4.3 #base.grouping.lists.ul Unordered list

A list of items in which the order does not explicitly matter.

Example

- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
  - Vestibulum laoreet porttitor sem
  - Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem

    <ul>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
      <li>Integer molestie lorem at massa</li>
      <li>Facilisis in pretium nisl aliquet</li>
      <li>Nulla volutpat aliquam velit
        <ul>
          <li>Phasellus iaculis neque</li>
          <li>Purus sodales ultricies</li>
          <li>Vestibulum laoreet porttitor sem</li>
          <li>Ac tristique libero volutpat at</li>
        </ul>
      </li>
      <li>Faucibus porta lacus fringilla vel</li>
      <li>Aenean sit amet erat nunc</li>
      <li>Eget porttitor lorem</li>
    </ul>

### 2.3.5 #base.grouping.p Body copy

The default `font-size` and `line-height` are applied to the `<body>` and all paragraphs. In addition, `<p>` (paragraphs) receive a top and bottom margin.

Example

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
    dolor id nibh ultricies vehicula.</p>

    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
    ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis,
    est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec
    elit. Donec ullamcorper nulla non metus auctor fringilla.</p>

    <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit
    non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi
    erat porttitor ligula, eget lacinia odio sem nec elit.</p>

### 2.3.6 #base.grouping.pre Preformatted text

The <pre> tag represents a block of preformatted text, such as fragments of computer code, ASCII art, etc.

Example
The following text is preformatted:

    (ノ゜Д゜)ノ ︵ ┻━┻

    The following text is preformatted:
    <pre>
    (ノ゜Д゜)ノ ︵ ┻━┻
    </pre>

## 2.4 #base.text Text-level semantics

Example
An abbreviation of the word attribute is attr. And HTML is an acroynm. The following snippets of text are rendered as bold text. This line of text is meant to be treated as deleted text. This line of text is meant to be treated as an addition to the document. Mlle Gwendoline wrote the equation `f(x, n) = log4xn`. The following snippets of text are rendered as italic text. You can use the mark tag to highlight text like this. New! The `q` element represents some phrasing content quoted from another source. This line of text is meant to be treated as fine print. This line of text is meant to be treated as no longer accurate. This line of text will render as underlined

    An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.
    And <abbr title="HyperText Markup Language">HTML</abbr> is an acroynm.
    The following snippets of text are <strong>rendered</strong> as <b>bold
    text</b>.
    <del>This line of text is meant to be treated as deleted text.</del>
    <ins>This line of text is meant to be treated as an addition to the
    document.</ins>
    <abbr>M<sup>lle</sup></abbr> Gwendoline wrote the equation <code>f(x, n) = log<sub>4</sub>x<sup>n</sup></code>.
    The following snippets of text are <em>rendered</em> as <i>italic text</i>.
    You can use the mark tag to <mark>highlight</mark> text like this.
    <mark>New!</mark>
    <q cite="http://www.w3.org/TR/html5/text-level-semantics.html#the-q-element">The
    <code>q</code> element represents some phrasing content quoted from another
    source.</q>
    <small>This line of text is meant to be treated as fine print.</small>
    <s>This line of text is meant to be treated as no longer accurate.</s>
    <u>This line of text will render as underlined</u>

### 2.4.1 #base.text.abbr Abbreviation / Acroynym

Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a `title` attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover.

Example
An abbreviation of the word attribute is attr. And HTML is an acroynm.

    An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.
    And <abbr title="HyperText Markup Language">HTML</abbr> is an acroynm.

### 2.4.2 #base.text.b Bold

For emphasizing a snippet of text with a heavier font-weight. Either the <strong> tag or the <b> tag can be used.

Feel free to use `<b>` in HTML5. `<b>` is meant to highlight words or phrases without conveying additional importance.

Example
The following snippets of text are rendered as bold text.

    The following snippets of text are <strong>rendered</strong> as <b>bold
    text</b>.

### 2.4.3 #base.text.cite Cite

The cite element represents a reference to a creative work.

Example

Who is your favorite doctor (in Doctor Who)?

Comment by Oli Walberg

    <p>Who is your favorite doctor (in <cite>Doctor Who</cite>)?</p>

    <p>Comment by <cite><a href="#">Oli Walberg</a></cite></p>

### 2.4.4 #base.text.code Code

The `code` element represents a fragment of computer code. The `var` element represents a variable. The `samp` element represents (sample) output from a program or computing system. The `kbd` element represents user input (typically keyboard input.)

Example

The `code` element represents a fragment of computer code.

There are n flavors of ice cream to be available for purchase!

The computer said `Too much cheese in tray two` but I didn't know what that meant.

To make George eat an apple, select `File | Eat Apple…`

    <p>The <code>code</code> element represents a fragment of computer code.</p>

    <p>There are <var>n</var> flavors of ice cream to be available for purchase!</p>

    <p>The computer said <samp>Too much cheese in tray two</samp> but I didn't know
    what that meant.</p>

    <p>To make George eat an apple, select <kbd>File | Eat Apple…</kbd></p>

### 2.4.5 #base.text.del Deleted text

For indicating blocks of text that have been deleted use the `<del>` tag.

Example
This line of text is meant to be treated as deleted text.

    <del>This line of text is meant to be treated as deleted text.</del>

### 2.4.6 #base.text.dfn Definition

The dfn element represents the defining instance of a term.

Example

The GDO is a device that allows off-world teams to open the iris.

Teal'c activated his GDO and so Hammond ordered the iris to be opened.

    <p>The <dfn id="gdo"><abbr title="Garage Door Opener">GDO</abbr></dfn> is a
    device that allows off-world teams to open the iris.</p>

    <p>Teal'c activated his <a href="#gdo"><abbr title="Garage Door Opener">GDO</abbr></a>
    and so Hammond ordered the iris to be opened.</p>

### 2.4.7 #base.text.i Italics

For emphasizing a snippet of text with italics. Either the <em> tag or the <i> tag can be used.

Feel free to use `<i>` in HTML5. `<i>` is meant to convey voice, technical terms, etc.

Example
The following snippets of text are rendered as italic text.

    The following snippets of text are <em>rendered</em> as <i>italic text</i>.

### 2.4.8 #base.text.ins Inserted text

For indicating additions to the document use the `<ins>` tag.

Example
This line of text is meant to be treated as an addition to the document.

    <ins>This line of text is meant to be treated as an addition to the
    document.</ins>

### 2.4.9 #base.text.mark Marked text

For highlighting a run of text due to its relevance in another context, use the `<mark>` tag.

Example
You can use the mark tag to highlight text like this. New!

    You can use the mark tag to <mark>highlight</mark> text like this.
    <mark>New!</mark>

### 2.4.10 #base.text.q Quote

The `q` element represents an inline quote from another source. Longer quotes should use the `blockquote` element.

Example
The `q` element represents some phrasing content quoted from another source.

    <q cite="http://www.w3.org/TR/html5/text-level-semantics.html#the-q-element">The
    <code>q</code> element represents some phrasing content quoted from another
    source.</q>

### 2.4.11 #base.text.s Strikethrough text

For indicating blocks of text that are no longer relevant use the `<s>` tag.

Example
This line of text is meant to be treated as no longer accurate.

    <s>This line of text is meant to be treated as no longer accurate.</s>

### 2.4.12 #base.text.small Small text

For de-emphasizing inline or blocks of text, use the `<small>` tag to set text at 80% the size of the parent.

Example
This line of text is meant to be treated as fine print.

    <small>This line of text is meant to be treated as fine print.</small>

### 2.4.13 #base.text.sub Superscript / Subscript

The <sup> tag represents a superscript and the <sub> tag represents a subscript.

Example
Mlle Gwendoline wrote the equation `f(x, n) = log4xn`.

    <abbr>M<sup>lle</sup></abbr> Gwendoline wrote the equation <code>f(x, n) = log<sub>4</sub>x<sup>n</sup></code>.

### 2.4.14 #base.text.u Underlined text

To underline text use the `<u>` tag. Not recommended since underlines are used by web browsers to style hyperlinks.

Example
This line of text will render as underlined

    <u>This line of text will render as underlined</u>

## 2.5 #base.embedded Embedded content

### 2.5.1 #base.embedded.img Image

An <img> tag represents an image.

Example

An image that is inline with other text.

A figure.

    <p>An image <img src="public/sample-inline.png"> that is inline with other text.</p>

    <figure style="width: 50%; max-width: 300px;">
      <figcaption>A figure.</figcaption>
      <img src="public/sample.png">
    </figure>

### 2.5.2 #base.embedded.svg Scalable vector

A <svg> tag represents an image encoded as a Scalable Vector Graphic.

Example

A svg image
that is inline with other text.

A figure.

    <p>A svg image <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="10px" height="10px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/></svg> that is inline with other text.</p>

    <figure style="width: 50%; max-width: 300px;">
      <figcaption>A figure.</figcaption>
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
      <polygon fill="#bdad94" stroke="#bdad94" stroke-width="37.6152" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="  259.216,29.942 330.27,173.919 489.16,197.007 374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08   29.274,197.007 188.165,173.919 "/>
      </svg>
    </figure>

## 2.6 #base.forms Forms

### 2.6.1 #base.forms.button Buttons

Buttons built with the `<button>` element are the most flexible for styling purposes. But `<input>` elements with `type` set to `submit`, `image`, `reset`, or `button` are also supported.

Below is the default button styling. To see variations on the button styling see the button component.

Examples
Default styling

:hover
Hover styling.

    <p>
      <button type="button" class="[modifier class]">A normal button</button>
      <button type="submit" class="[modifier class]">A submit button</button>
      <button type="reset" class="[modifier class]">A reset button</button>
    </p>
    <p>
      <input type="button" class="[modifier class]" value="Input button">
      <input type="submit" class="[modifier class]" value="Input submit button">
      <input type="reset" class="[modifier class]" value="Input reset button">
    </p>
    <p>
      <button type="button" class="[modifier class]" disabled>A disabled button</button>
      <button type="submit" class="[modifier class]" disabled>A disabled submit button</button>
      <button type="reset" class="[modifier class]" disabled>A disabled reset button</button>
    </p>
    <p>
      <input type="button" class="[modifier class]" value="Disabled input button" disabled>
      <input type="submit" class="[modifier class]" value="Disabled input submit button" disabled>
      <input type="reset" class="[modifier class]" value="Disabled input reset button" disabled>
    </p>

### 2.6.2 #base.forms.fieldset Fieldsets

The `<fieldset>` element groups a set of form fields, optionally under a common name given by the `<legend>` element.

Example
A fieldset Text input
A disabled fieldset
Disabled text input
Disabled select menu
Can't check this

    <fieldset class="">
      <legend>A fieldset</legend>
      <label for="fieldsetText">Text input</label>
      <input type="text" id="fieldsetText" placeholder="Text input">
    </fieldset>

    <fieldset class="" disabled>
      <legend>A disabled fieldset</legend>
      <div>
        <label for="fieldsetText2">Disabled text input</label>
        <input type="text" id="fieldsetText2" placeholder="Disabled input">
      </div>
      <div>
        <label for="fieldsetSelect">Disabled select menu</label>
        <select id="fieldsetSelect">
          <option>Disabled select</option>
        </select>
      </div>
      <div>
        <label><input type="checkbox"> Can't check this</label>
      </div>
    </fieldset>

### 2.6.3 #base.forms.input Inputs

The `<input>` element is mostly used for text-based inputs that include the HTML5 types: `text`, `search`, `tel`, `url`, `email`, `password`, `date`, `time`, `number`, `range`, `color`, and `file`.

Examples
Default styling
Text
Search
Telephone
URL
Email address
Password
Date
Time
Number
Range
Color
File input
Disabled text
Disabled search
Disabled telephone
Disabled URL
Disabled email address
Disabled password
Disabled date
Disabled time
Disabled number
Disabled range
Disabled color
Disabled file input
:hover
Hover styling.
Text
Search
Telephone
URL
Email address
Password
Date
Time
Number
Range
Color
File input
Disabled text
Disabled search
Disabled telephone
Disabled URL
Disabled email address
Disabled password
Disabled date
Disabled time
Disabled number
Disabled range
Disabled color
Disabled file input

    <div>
      <label for="inputText">Text</label>
      <input type="text" class="[modifier class]" id="inputText" placeholder="Enter some text">
    </div>
    <div>
      <label for="inputSearch">Search</label>
      <input type="search" class="[modifier class]" id="inputSearch" placeholder="Search">
    </div>
    <div>
      <label for="inputTel">Telephone</label>
      <input type="text" class="[modifier class]" id="inputTel" placeholder="Enter some text">
    </div>
    <div>
      <label for="inputURL">URL</label>
      <input type="url" class="[modifier class]" id="inputURL" placeholder="Enter a URL">
    </div>
    <div>
      <label for="inputEmail">Email address</label>
      <input type="email" class="[modifier class]" id="inputEmail" placeholder="Enter email">
    </div>
    <div>
      <label for="inputPassword">Password</label>
      <input type="password" class="[modifier class]" id="inputPassword" placeholder="Password">
    </div>
    <div>
      <label for="inputDate">Date</label>
      <input type="date" class="[modifier class]" id="inputDate" placeholder="Enter a date">
    </div>
    <div>
      <label for="inputTime">Time</label>
      <input type="time" class="[modifier class]" id="inputTime" placeholder="Enter a time">
    </div>
    <div>
      <label for="inputNumber">Number</label>
      <input type="number" class="[modifier class]" id="inputNumber" placeholder="Enter a number">
    </div>
    <div>
      <label for="inputRange">Range</label>
      <input type="range" class="[modifier class]" id="inputRange" placeholder="Enter a range">
    </div>
    <div>
      <label for="inputColor">Color</label>
      <input type="color" class="[modifier class]" id="inputColor" placeholder="Enter a color">
    </div>
    <div>
      <label for="inputFile">File input</label>
      <input type="file" class="[modifier class]" id="inputFile">
    </div>

    <div>
      <label for="inputText">Disabled text</label>
      <input type="text" class="[modifier class]" disabled id="inputText" placeholder="Disabled text">
    </div>
    <div>
      <label for="inputSearch">Disabled search</label>
      <input type="search" class="[modifier class]" disabled id="inputSearch" placeholder="Disabled search">
    </div>
    <div>
      <label for="inputTel">Disabled telephone</label>
      <input type="text" class="[modifier class]" disabled id="inputTel" placeholder="Disabled telephone">
    </div>
    <div>
      <label for="inputURL">Disabled URL</label>
      <input type="url" class="[modifier class]" disabled id="inputURL" placeholder="Disabled URL">
    </div>
    <div>
      <label for="inputEmail">Disabled email address</label>
      <input type="email" class="[modifier class]" disabled id="inputEmail" placeholder="Disabled email">
    </div>
    <div>
      <label for="inputPassword">Disabled password</label>
      <input type="password" class="[modifier class]" disabled id="inputPassword" placeholder="Disabled password">
    </div>
    <div>
      <label for="inputDate">Disabled date</label>
      <input type="date" class="[modifier class]" disabled id="inputDate" placeholder="Disabled date">
    </div>
    <div>
      <label for="inputTime">Disabled time</label>
      <input type="time" class="[modifier class]" disabled id="inputTime" placeholder="Disabled time">
    </div>
    <div>
      <label for="inputNumber">Disabled number</label>
      <input type="number" class="[modifier class]" disabled id="inputNumber" placeholder="Disabled number">
    </div>
    <div>
      <label for="inputRange">Disabled range</label>
      <input type="range" class="[modifier class]" disabled id="inputRange" placeholder="Disabled range">
    </div>
    <div>
      <label for="inputColor">Disabled color</label>
      <input type="color" class="[modifier class]" disabled id="inputColor" placeholder="Disabled color">
    </div>
    <div>
      <label for="inputFile">Disabled file input</label>
      <input type="file" class="[modifier class]" disabled id="inputFile">
    </div>

### 2.6.4 #base.forms.input-checkbox Checkboxes

If an `<input>` element has the `type="checkbox"` attribute set, the form field is displayed as a checkbox.

It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect `box-sizing`, `padding`, or `width`.

Example
Check me out
Option two is disabled

    <div>
      <label><input type="checkbox" class=""> Check me out</label>
    </div>

    <div>
      <label><input type="checkbox" class="" value="" disabled> Option two is disabled</label>
    </div>

### 2.6.5 #base.forms.input-radio Radio buttons

If an `<input>` element has the `type="radio"` attribute set, the form field is displayed as a radio button.

It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect `box-sizing`, `padding`, or `width`.

Example
Option one
Option two
Option three is disabled

    <div>
      <label><input type="radio" class="" value="option1" name="example-radio" checked> Option one</label>
    </div>

    <div>
      <label><input type="radio" class="" value="option2" name="example-radio"> Option two</label>
    </div>

    <div>
      <label><input type="radio" class="" value="option3" name="example-radio" disabled> Option three is disabled</label>
    </div>

### 2.6.6 #base.forms.label Labels

The `<label>` element represents a caption of a form field. The label can be associated with a specific form control by using the `for` attribute or by putting the form control inside the label element itself.

Example
A label for a text input
A label wrapped around a checkbox

    <div>
      <label class="" for="lableInputText">A label for a text input</label>
      <input type="text" id="lableInputText" placeholder="Enter some text">
    </div>

    <div>
      <label class=""><input type="checkbox"> A label wrapped around a checkbox</label>
    </div>

### 2.6.7 #base.forms.select Select list

The `<select>` element represents a form field for selecting amongst a set of options.

Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `<select>`, unless a `border` property is set.

Example
A standard drop-down
A multi-item select field
A disabled drop-down

    <div>
      <label for="selectDropdown">A standard drop-down</label>
      <select class="" id="selectDropdown">
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <optgroup label="More options">
          <option>Option 4</option>
          <option>Option 5</option>
        </optgroup>
      </select>
    </div>

    <div>
      <label for="selectMultiItem">A multi-item select field</label>
      <select class="" id="selectMultiItem" multiple>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <optgroup label="More options">
          <option>Option 4</option>
          <option>Option 5</option>
        </optgroup>
      </select>
    </div>

    <div>
      <label for="selectDisabled">A disabled drop-down</label>
      <select class="" id="selectDisabled" disabled>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
        <optgroup label="More options">
          <option>Option 4</option>
          <option>Option 5</option>
        </optgroup>
      </select>
    </div>

### 2.6.8 #base.forms.textarea Text areas

The `<textarea>` element represents a multi-line plain text form field.

Examples
Default styling
Text area
Disabled text area
:hover
Hover styling.
Text area
Disabled text area

    <div>
      <label for="exampleTextarea">Text area</label>
      <textarea class="[modifier class]" rows="3" id="exampleTextarea"></textarea>
    </div>
    <div>
      <label for="exampleTextarea">Disabled text area</label>
      <textarea class="[modifier class]" rows="3" id="exampleTextarea" disabled></textarea>
    </div>

## 2.7 #base.table Tables

The table element displays tabular data in rows, columns, and cells.

Example

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Jane | Doe | jdoe
2 | Jamie | Morgan | jmorgan
3 | Jacob | Smith | jsmith
# | First Name | Last Name | Username

    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Jane</td>
          <td>Doe</td>
          <td>jdoe</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Jamie</td>
          <td>Morgan</td>
          <td>jmorgan</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Jacob</td>
          <td>Smith</td>
          <td>jsmith</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </tfoot>
    </table>