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.
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
This is a <a href="#" class="[modifier class]">link to another web page</a>.
2.3.1 #base.grouping.blockquote Block quotes
The <blockquote>
element is for quoting blocks of content from another
source within your document. Wrap the <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, wrapping
the name of the source work in <cite>
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<blockquote class="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
</blockquote>
<blockquote class="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
<footer>J. Smith in <cite title="Source Title, 2nd Edition">Source
Title</cite></footer>
</blockquote>
2.3.2 #base.grouping.figure Figures
The <figure>
element can be used to annotate illustrations, diagrams,
photos, code listings, etc.
Optionally, a <figcaption>
element inside the <figure>
represents the
caption of the figure.
<figure class="">
An illustration, diagram, photo, code listing, etc.
</figure>
<figure class="">
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.
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 class="">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
2.3.4.1 #base.grouping.lists.dl Description list
The <dl>
element is a list of terms with their associated descriptions.
- 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 class="">
<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
The <ol>
element is a list of items in which the order does
explicitly matter.
- 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
<ol class="">
<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 class="">
<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
The <ul>
element is a list of items in which the order does not
explicitly matter.
- 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 class="">
<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 class="">
<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
properties are applied to the
<body>
element and all paragraphs. In addition, <p>
(paragraphs) receive
a top and bottom margin.
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 class="">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 class="">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 class="">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>
element represents a block of preformatted text, such as
fragments of computer code, ASCII art, etc.
(ノ゜Д゜)ノ ︵ ┻━┻
The following text is preformatted:
<pre class="">
(ノ゜Д゜)ノ ︵ ┻━┻
</pre>
2.4 #base.text Text-level semantics
The elements in this section give semantics to inline text.
2.4.1 #base.text.b Bold
The <strong>
element or the <b>
element is for emphasizing a snippet of
text with a heavier font-weight.
Feel free to use <b>
in HTML5. <b>
is meant to highlight words or phrases
without conveying additional importance.
The following snippets of text are <strong class="">rendered</strong> as <b class="">bold
text</b>. Bold text nested inside <i>italic text <b>should</b></i> <em>still be
<strong>bold</strong></em>.
2.4.2 #base.text.i Italics
The <em>
element or the <i>
element is used for emphasizing a snippet of
text with italics.
Feel free to use <i>
element in HTML5. <i>
is meant to convey voice,
technical terms, etc.
The following snippets of text are <em class="">rendered</em> as <i class="">italic text</i>.
Italic text nested inside <b>bold text <i>should</i></b> <strong>still be
<em>italic</em></strong>.
2.4.3 #base.text.abbr Abbreviation / Acroynym
The <abbr>
element makes the meanings of abbreviations and acronyms visible
on hover.
An abbreviation of the word attribute is <abbr class="" title="attribute">attr</abbr>.
And <abbr class="" title="HyperText Markup Language">HTML</abbr> is an acroynm.
2.4.4 #base.text.cite Cite
The <cite>
element represents a reference to a creative work.
Who is your favorite doctor (in Doctor Who)?
Comment by Oli Walberg
<p>Who is your favorite doctor (in <cite class="">Doctor Who</cite>)?</p>
<p>Comment by <cite class=""><a href="#">Oli Walberg</a></cite></p>
2.4.5 #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.)
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 class="">code</code> element represents a fragment of computer code.</p>
<p>There are <var class="">n</var> flavors of ice cream to be available for purchase!</p>
<p>The computer said <samp class="">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 class="">File | Eat Apple…</kbd></p>
2.4.6 #base.text.del Deleted text
The <del>
element indicates blocks of text that have been deleted.
<del class="">This line of text is meant to be treated as deleted text.</del>
2.4.7 #base.text.dfn Definition
The <dfn>
element represents the defining instance of a term.
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 class="" 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.8 #base.text.ins Inserted text
The <ins>
element indicates additions to the document.
<ins class="">This line of text is meant to be treated as an addition to the
document.</ins>
2.4.9 #base.text.mark Marked text
The <mark>
element highlights a run of text due to its relevance in another
context.
You can use the mark tag to <mark>highlight</mark> text like this.
<mark class="">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.
The
q
element represents some phrasing content quoted from another
source.
<q class="" 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
The <s>
element indicates blocks of text that are no longer relevant.
<s class="">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>
element to set
text at 80% the size of the parent.
<small class="">This line of text is meant to be treated as fine print.</small>
2.4.13 #base.text.sub Superscript / Subscript
The <sup>
element represents a superscript and the <sub>
element
represents a subscript.
f(x, n) = log4xn
.
<abbr>M<sup class="">lle</sup></abbr> Gwendoline wrote the equation <code>f(x, n) = log<sub class="">4</sub>x<sup class="">n</sup></code>.
2.4.14 #base.text.u Underlined text
To underline text use the <u>
element. Not recommended since underlines are
used by web browsers to style hyperlinks.
<u class="">This line of text will render as underlined</u>
2.5.1 #base.embedded.img Image
An <img>
element represents an image.
An image that is inline with other text.

<p>An image <img class="" src="public/sample-inline.png"> that is inline with other text.</p>
<figure style="width: 50%; max-width: 300px;">
<figcaption>A figure.</figcaption>
<img class="" src="public/sample.png">
</figure>
2.5.2 #base.embedded.svg Scalable vector
A <svg>
element represents an image encoded as a Scalable Vector Graphic.
A svg image that is inline with other text.
<p>A svg image <svg class="" 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 class="" 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.2 #base.forms.fieldset Fieldsets
The <fieldset>
element groups a set of form fields, optionally under a
common name given by the <legend>
element.
<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
.
<div>
<label for="inputText">Text</label>
<input type="text" class="" id="inputText" placeholder="Enter some text">
</div>
<div>
<label for="inputSearch">Search</label>
<input type="search" class="" id="inputSearch" placeholder="Search">
</div>
<div>
<label for="inputTel">Telephone</label>
<input type="text" class="" id="inputTel" placeholder="Enter some text">
</div>
<div>
<label for="inputURL">URL</label>
<input type="url" class="" id="inputURL" placeholder="Enter a URL">
</div>
<div>
<label for="inputEmail">Email address</label>
<input type="email" class="" id="inputEmail" placeholder="Enter email">
</div>
<div>
<label for="inputPassword">Password</label>
<input type="password" class="" id="inputPassword" placeholder="Password">
</div>
<div>
<label for="inputDate">Date</label>
<input type="date" class="" id="inputDate" placeholder="Enter a date">
</div>
<div>
<label for="inputTime">Time</label>
<input type="time" class="" id="inputTime" placeholder="Enter a time">
</div>
<div>
<label for="inputNumber">Number</label>
<input type="number" class="" id="inputNumber" placeholder="Enter a number">
</div>
<div>
<label for="inputRange">Range</label>
<input type="range" class="" id="inputRange" placeholder="Enter a range">
</div>
<div>
<label for="inputColor">Color</label>
<input type="color" class="" id="inputColor" placeholder="Enter a color">
</div>
<div>
<label for="inputFile">File input</label>
<input type="file" class="" id="inputFile">
</div>
<div>
<label for="inputText">Disabled text</label>
<input type="text" class="" disabled id="inputText" placeholder="Disabled text">
</div>
<div>
<label for="inputSearch">Disabled search</label>
<input type="search" class="" disabled id="inputSearch" placeholder="Disabled search">
</div>
<div>
<label for="inputTel">Disabled telephone</label>
<input type="text" class="" disabled id="inputTel" placeholder="Disabled telephone">
</div>
<div>
<label for="inputURL">Disabled URL</label>
<input type="url" class="" disabled id="inputURL" placeholder="Disabled URL">
</div>
<div>
<label for="inputEmail">Disabled email address</label>
<input type="email" class="" disabled id="inputEmail" placeholder="Disabled email">
</div>
<div>
<label for="inputPassword">Disabled password</label>
<input type="password" class="" disabled id="inputPassword" placeholder="Disabled password">
</div>
<div>
<label for="inputDate">Disabled date</label>
<input type="date" class="" disabled id="inputDate" placeholder="Disabled date">
</div>
<div>
<label for="inputTime">Disabled time</label>
<input type="time" class="" disabled id="inputTime" placeholder="Disabled time">
</div>
<div>
<label for="inputNumber">Disabled number</label>
<input type="number" class="" disabled id="inputNumber" placeholder="Disabled number">
</div>
<div>
<label for="inputRange">Disabled range</label>
<input type="range" class="" disabled id="inputRange" placeholder="Disabled range">
</div>
<div>
<label for="inputColor">Disabled color</label>
<input type="color" class="" disabled id="inputColor" placeholder="Disabled color">
</div>
<div>
<label for="inputFile">Disabled file input</label>
<input type="file" 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
.
<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
.
<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.
<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.
<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.
<div>
<label for="exampleTextarea">Text area</label>
<textarea class="" rows="3" id="exampleTextarea"></textarea>
</div>
<div>
<label for="exampleTextarea">Disabled text area</label>
<textarea class="" rows="3" id="exampleTextarea" disabled></textarea>
</div>
2.7 #base.table Tables
The <table>
element displays tabular data in rows, columns, and cells.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Jane | Doe | jdoe |
2 | Jamie | Morgan | jmorgan |
3 | Jacob | Smith | jsmith |
# | First Name | Last Name | Username |
<table class="">
<caption>Optional table caption.</caption>
<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>