Form Components

Form Example

<form action="" method="post">
    <fieldset>

        <legend>Title</legend>

        <input type="radio" id="radio">
        <label for="radio">Click me</label>

        <label for="radio">
            <input type="radio" id="radio">Click me
        </label>

    </fieldset>
</form>

Text

<input type="text" placeholder="text" />

Text with Label

First Name:

<label>First Name:
    <input type="text" placeholder="Agent" />
</label>

Email

<input type="email" placeholder="email" />

Search

<input type="search" placeholder="search" />

Radio

Option 1

<label><input type="radio" />Option 1</label>

Checkbox

Option 1

<label><input type="checkbox" />Option 1</label>

URL

<input type="url" placeholder="url" />

Number

<input type="number" placeholder="42" />

Tel

<input type="tel" placeholder="01823" />

Color

<input type="color" />

Range

<input type="range" />

Time

<input type="time" />

Date

<input type="date" />

Month

<input type="month" />

Week

<input type="week" />

Datetime

<input type="datetime" />

Datetime Local

<input type="datetime-local" />

Textarea

<textarea placeholder="Text area"></textarea>

Select

<select>
    <optgroup label="Group 1">
        <option>Option 1</option>
    </optgroup>
    <option>Option 2</option>
</select>

Progress

70%

<progress value="70" max="100">70%</progress>

Submit

<input type="submit" value="submit" />

Output

Represents the result of a calculation or user action.

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="b" value="50" /> +
    <input type="number" name="a" value="10" /> =
    <output name="result">60</output>
</form>

Headings

Base Headings

The class structure follows the structure discussed by Harry Roberts in his article practical font sizing in CSS on CSS Wizardry.

The fox

<h1 class="alpha">The fox</h1>
<h2 class="beta">The fox</h2>
<h3 class="gamma">The fox</h3>
<h4 class="delta">The fox</h4>
<h5 class="epsilon">The fox</h5>
<h6 class="zeta">The fox</h6>

Utilities

Style

Use the .is-uppercase class to enforce a heading to be in capitals.

The fox

<h1 class="is-uppercase">The fox</h1>

Spacing

Using .drop class applies only half the regular bottom bottom.

The fox

<h1 class="drop">The fox</h1>
<h1>The fox</h1>
<h1>The fox</h1>

Horizontal Rule

Default Styling

This is the default markup and styling for a horizontal rule.

<hr>

Lists

Use the .is-plain class on any list to remove type-styling, margin, and padding.

Unordered List

This is just a plain unordered list, no special classes have been applied.

List item
List item
List item

<ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

Ordered List

This is just a plain ordered list, no special classes have been applied.

List item
List item
List item

<ol>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ol>

Plain List

Use the .is-plain class on any list to remove type-styling, margin, and padding.

List item
List item
List item

<ul class="is-plain">
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
</ul>

Definition List

Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).

For inline definitions use the dfn element.

Name: Godzilla
Born: 1952
Birthplace: Japan
Color: Green

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

Figure

Usually an image, illustration, diagram, code snippet, etc. followed by a figcaption.

Fig1. MDN Logo

<figure>
  <img
  src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png"
  alt="An awesome picture">
  <figcaption>Fig1. MDN Logo</figcaption>
</figure>

Blockquote

The Block Quotation Element indicates that the enclosed text is an extended quotation.

This is a quotation taken from the Mozilla Developer Center.

<blockquote cite="http://developer.mozilla.org">
  <p>This is a quotation taken from
  the Mozilla Developer Center.</p>
</blockquote>

Quote

This element is intended for short quotations that don't require paragraph breaks.

According to Mozilla's website, Firefox 1.0was released in 2004 and became a big success.

<p>According to Mozilla's website, <q cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0was released in 2004 and became a big success.</q></p>

Cite

Used for referencing external sources.

Bruce Lawson

<cite><a href="http://www.brucelawson.co.uk/2013/on-citing-quotations-again/">Bruce Lawson</a></cite>

Used to denote the main banner area, or a heading group inside a content section.

Main title

Sub title

<header role="banner">Hero Content</header>
<article>
    <header>
        <h1>Main title</h1>
        <p>Sub title</p>
    </header>
</article>

Nav

For major page navigation, including pagination.

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Main

Only one per page, for the main content.

Apples

The apple is the pomaceous fruit of the apple tree.

Red Delicious

These bright red apples are the most common found in many supermarkets.

...

Granny Smith

These juicy, green apples make a great filling for apple pies.

...

<main>
    <header>
          <h1>Apples</h1>
        <p>The apple is the pomaceous fruit of the apple tree.</p>
    </header>

    <article>
        <h2>Red Delicious</h2>
        <p>These bright red apples are the most common found in many
        supermarkets.</p>
        <p>... </p>
        <p>... </p>
    </article>

    <article>
        <h2>Granny Smith</h2>
        <p>These juicy, green apples make a great filling for
        apple pies.</p>
        <p>... </p>
        <p>... </p>
    </article>
</main>

Aside

Contains complementary content to it's parent section. (often used as a sidebar)

The Disney movie The Little Mermaid was first released to theatres in 1989.

More info about the movie...

<article>
  <p>
    The Disney movie <em>The Little Mermaid</em> was
    first released to theatres in 1989.
  </p>
  <aside>
    <p>
      The movie earned $87 million during its initial release.
    </p>
  </aside>
  <p>
    More info about the movie...
  </p>
</article>

Article

The article element should contain a piece of self-contained content that could be distributed outside the context of the page. This includes things like:

news articles
blog posts
user comments

Jurassic Park

Dinos were great!

Way too scary for me.

I agree, dinos are my favorite.

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>

Section

For groups of content that have headings.

Test

Some content

<section>
    <h1>Test</h1>
    <p>Some content</p>
</section>

A footer typically contains information about the author of the section, copyright data or links to related documents.

<footer>
  Some copyright info or perhaps some author
  info for an &lt;article&gt;?
</footer>

Table

Header content 1	Header content 2
Body content 1	Body content 2
Footer content 1	Footer content 2

<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>

Base Paragraph Styles

All of the spacing throughout the website is based from the type styling, conforming to a rule of 1.5 times the font-size. Here you can see two paragraphs of generated lorem-ipsum to get a feel of the line-height and spacing.

The quick brown fox jumped over the lazy dog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu porttitor mauris. Duis a viverra dolor, lacinia porta massa. Aliquam faucibus libero viverra rhoncus lobortis. Quisque malesuada euismod lorem ac luctus. Sed sit amet nunc tellus. Suspendisse maximus nunc sed mi vehicula rutrum. Praesent lobortis euismod turpis sit amet venenatis. Nullam eu enim suscipit, accumsan arcu ut, fringilla odio. Pellentesque ultrices accumsan leo, sit amet vulputate ipsum feugiat id. Pellentesque a pharetra quam. Aliquam rutrum, turpis hendrerit varius pulvinar, libero nisi congue augue, in condimentum diam urna volutpat lectus. Praesent at ipsum a lacus accumsan accumsan. Integer mollis velit ac urna efficitur, eget ultricies nisl posuere. Nullam elementum nunc ac ante fermentum, ac consequat felis scelerisque. Cras dui lacus, posuere semper magna et, ornare porta arcu.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sit amet erat accumsan, sagittis metus eget, bibendum nisl. Curabitur dolor enim, bibendum id libero non, cursus iaculis libero. Vivamus orci nisl, posuere vel nibh eu, maximus ullamcorper augue. Vivamus scelerisque laoreet tristique. Donec ut urna lacus. Morbi et nisi sit amet leo vehicula pharetra sed ut elit. Pellentesque tincidunt, quam ut viverra tincidunt, lorem risus facilisis sapien, at gravida lorem dui fermentum arcu. Nam varius felis risus. Morbi a ipsum imperdiet, posuere lorem quis, tincidunt augue. Sed sed metus vitae nunc ullamcorper elementum. Vestibulum ornare augue tellus, vel accumsan augue euismod at. Quisque vitae convallis dolor, id tempus ipsum. Phasellus nisl ante, ullamcorper sit amet tortor at, suscipit venenatis sapien. Sed commodo odio in dolor tempus, eget rhoncus mauris bibendum.

<p>The quick brown fox jumped over the lazy dog</p>
<p>The quick brown fox jumped <small>over the lazy dog</small></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu porttitor mauris. Duis a viverra dolor, lacinia porta massa. Aliquam faucibus libero viverra rhoncus lobortis. Quisque malesuada euismod lorem ac luctus. Sed sit amet nunc tellus. Suspendisse maximus nunc sed mi vehicula rutrum. Praesent lobortis euismod turpis sit amet venenatis. Nullam eu enim suscipit, accumsan arcu ut, fringilla odio. Pellentesque ultrices accumsan leo, sit amet vulputate ipsum feugiat id. Pellentesque a pharetra quam. Aliquam rutrum, turpis hendrerit varius pulvinar, libero nisi congue augue, in condimentum diam urna volutpat lectus. Praesent at ipsum a lacus accumsan accumsan. Integer mollis velit ac urna efficitur, eget ultricies nisl posuere. Nullam elementum nunc ac ante fermentum, ac consequat felis scelerisque. Cras dui lacus, posuere semper magna et, ornare porta arcu.
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sit amet erat accumsan, sagittis metus eget, bibendum nisl. Curabitur dolor enim, bibendum id libero non, cursus iaculis libero. Vivamus orci nisl, posuere vel nibh eu, maximus ullamcorper augue. Vivamus scelerisque laoreet tristique. Donec ut urna lacus. Morbi et nisi sit amet leo vehicula pharetra sed ut elit. Pellentesque tincidunt, quam ut viverra tincidunt, lorem risus facilisis sapien, at gravida lorem dui fermentum arcu. Nam varius felis risus. Morbi a ipsum imperdiet, posuere lorem quis, tincidunt augue. Sed sed metus vitae nunc ullamcorper elementum. Vestibulum ornare augue tellus, vel accumsan augue euismod at. Quisque vitae convallis dolor, id tempus ipsum. Phasellus nisl ante, ullamcorper sit amet tortor at, suscipit venenatis sapien. Sed commodo odio in dolor tempus, eget rhoncus mauris bibendum.</p>

Bold and Strong; Italic and Emphasis

The bold and italic elements are used for presentational purposes, whereas the strong and emphasis elements represent structure.

The quick brown fox jumped over the lazy dog

The quick brown fox jumped over the lazy dog

<p>The quick <b>brown</b> fox jumped over the <strong>lazy</strong> dog</p>
<p>The quick <i>brown</i> fox jumped over the <em>lazy</em> dog</p>

Sup

For text that should be displayed, for typographic reasons, higher, and often smaller, than the main span of text.

This text is ^{superscripted}

<p>This text is <sup>superscripted</sup></p>

Sub

For text that should be displayed, for typographic reasons, lower, and often smaller, than the main span of text.

This text is _{superscripted}

<p>This text is <sub>superscripted</sub></p>

Strikethrough

Use the strikethrough element to represent things that are no longer relevant or no longer accurate.

This text is _{superscripted}

<p>This text is <sub>superscripted</sub></p>

Mark

For a run of text marked for reference purpose, due to its relevance in a particular context. For example it can be used in a page showing search results to highlight every instance of the searched-for word.

The <mark> element is used to highlight text

<p>The &lt;mark&gt; element is used to <mark>highlight</mark> text</p>

Code and Pre

The code element is for displaying raw computer code. Note: whitepsace and new lines aren't considered important.

While the pre element is for preformatted text, and it preserves whitespace and line breaks.

This is how we declare a Javascript variable: var i = 0;

body {
  color:red;
}

<p>This is how we declare a Javascript variable:<br\>
    <code>var i = 0;</code>
</p>

<pre>
body {
  color:red;
}
</pre>

Time

The time element represents either a time on a 24-hour clock or a precise date in the Gregorian calendar

The concert starts at 20:00.

<p>The concert starts at <time>20:00</time>.</p>

Address

The address element supplies contact information for its nearest article or body ancestor; in the latter case, it applies to the whole document.

You can contact author at www.somedomain.com.
If you see any bugs, please contact webmaster.
You may also want to visit us:
Mozilla Foundation
1981 Landings Drive
Building K
Mountain View, CA 94043-0801
USA

<address>
    You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
    If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
    You may also want to visit us:<br>
    Mozilla Foundation<br>
    1981 Landings Drive<br>
    Building K<br>
    Mountain View, CA 94043-0801<br>
    USA
</address>

Abbreviation

Use the title attribute to define the full description of the abbreviation. Many user agents present this as a tooltip.

Welcome to the WWW!

<p>Welcome to the <abbr title="World Wide Web">WWW</abbr>!</p>

Utilities

List of Utility Classes

Clearfix

.cf

This is used to apply a clearfix.

Use this on container elements with floated children.

Hidden

.is-hidden

This is used to completely remove an element from the document flow and from screen-readers.

This is usually applied or removed with JavaScript.

.is-visually-hidden

This is still visible to screen-readers, so it is used for accessibility purposes.

Floats

.pull-right

This is used to apply a right float.

.pull-left

This is used to apply a left float.

Alignment

.align-right

This is used to apply text-align: right;

.align-center

This is used to apply text-align: center;

.align-left

This is used to apply text-align: left;