2 Base
These are the base styles applied to HTML elements.
styles.scss
, line 12
2.1 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>
base/headings/headings.scss
, line 4
2.2 Global icons
A collection of SVG icons providing UI elements, social media logos and design elements. Used inline (as shown here as a sprite) their colour can be changed with CSS. Used as a background image, or in an image tag their colour if fixed.
Each icon has a corresponding SVG file which can be used in css like background: icon-url('search.svg')
<svg id="svg-social-email" viewBox="0 0 2048 2048" class="icon"><path d="M1920 838v794q0 66-47 113t-113 47h-1472q-66 0-113-47t-47-113v-794q44 49 101 87 362 246 497 345 57 42 92.5 65.5t94.5 48 110 24.5h2q51 0 110-24.5t94.5-48 92.5-65.5q170-123 498-345 57-39 100-87zm0-294q0 79-49 151t-122 123q-376 261-468 325-10 7-42.5 30.5t-54 38-52 32.5-57.5 27-50 9h-2q-23 0-50-9t-57.5-27-52-32.5-54-38-42.5-30.5q-91-64-262-182.5t-205-142.5q-62-42-117-115.5t-55-136.5q0-78 41.5-130t118.5-52h1472q65 0 112.5 47t47.5 113z"/></svg>
<svg id="svg-social-rss" viewBox="0 0 2048 2048" class="icon"><path d="M704 1472q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm512 123q2 28-17 48-18 21-47 21h-135q-25 0-43-16.5t-20-41.5q-22-229-184.5-391.5t-391.5-184.5q-25-2-41.5-20t-16.5-43v-135q0-29 21-47 17-17 43-17h5q160 13 306 80.5t259 181.5q114 113 181.5 259t80.5 306zm512 2q2 27-18 47-18 20-46 20h-143q-26 0-44.5-17.5t-19.5-42.5q-12-215-101-408.5t-231.5-336-336-231.5-408.5-102q-25-1-42.5-19.5t-17.5-43.5v-143q0-28 20-46 18-18 44-18h3q262 13 501.5 120t425.5 294q187 186 294 425.5t120 501.5z"/></svg>
<svg id="svg-social-facebook" viewBox="0 0 2048 2048" class="icon"><path d="M1471 140v264h-157q-86 0-116 36t-30 108v189h293l-39 296h-254v759h-306v-759h-255v-296h255v-218q0-186 104-288.5t277-102.5q147 0 228 12z"/></svg>
<svg id="svg-social-twitter" viewBox="0 0 2048 2048" class="icon"><path d="M1812 536q-67 98-162 167 1 14 1 42 0 130-38 259.5t-115.5 248.5-184.5 210.5-258 146-323 54.5q-271 0-496-145 35 4 78 4 225 0 401-138-105-2-188-64.5t-114-159.5q33 5 61 5 43 0 85-11-112-23-185.5-111.5t-73.5-205.5v-4q68 38 146 41-66-44-105-115t-39-154q0-88 44-163 121 149 294.5 238.5t371.5 99.5q-8-38-8-74 0-134 94.5-228.5t228.5-94.5q140 0 236 102 109-21 205-78-37 115-142 178 93-10 186-50z"/></svg>
<svg id="svg-social-instragram" viewBox="0 0 2048 2048" class="icon"><path d="M1618 1554v-648h-135q20 63 20 131 0 126-64 232.5t-174 168.5-240 62q-197 0-337-135.5t-140-327.5q0-68 20-131h-141v648q0 26 17.5 43.5t43.5 17.5h1069q25 0 43-17.5t18-43.5zm-284-533q0-124-90.5-211.5t-218.5-87.5q-127 0-217.5 87.5t-90.5 211.5 90.5 211.5 217.5 87.5q128 0 218.5-87.5t90.5-211.5zm284-360v-165q0-28-20-48.5t-49-20.5h-174q-29 0-49 20.5t-20 48.5v165q0 29 20 49t49 20h174q29 0 49-20t20-49zm174-208v1142q0 81-58 139t-139 58h-1142q-81 0-139-58t-58-139v-1142q0-81 58-139t139-58h1142q81 0 139 58t58 139z"/></svg>
<svg id="svg-social-linkedin" viewBox="0 0 2048 2048" class="icon"><path d="M605 753v991h-330v-991h330zm21-306q1 73-50.5 122t-135.5 49h-2q-82 0-132-49t-50-122q0-74 51.5-122.5t134.5-48.5 133 48.5 51 122.5zm1166 729v568h-329v-530q0-105-40.5-164.5t-126.5-59.5q-63 0-105.5 34.5t-63.5 85.5q-11 30-11 81v553h-329q2-399 2-647t-1-296l-1-48h329v144h-2q20-32 41-56t56.5-52 87-43.5 114.5-15.5q171 0 275 113.5t104 332.5z"/></svg>
<svg id="svg-social-youtube" viewBox="0 0 2048 2048" class="icon"><path d="M1408 1024q0-37-30-54l-512-320q-31-20-65-2-33 18-33 56v640q0 38 33 56 16 8 31 8 20 0 34-10l512-320q30-17 30-54zm512 0q0 96-1 150t-8.5 136.5-22.5 147.5q-16 73-69 123t-124 58q-222 25-671 25t-671-25q-71-8-124.5-58t-69.5-123q-14-65-21.5-147.5t-8.5-136.5-1-150 1-150 8.5-136.5 22.5-147.5q16-73 69-123t124-58q222-25 671-25t671 25q71 8 124.5 58t69.5 123q14 65 21.5 147.5t8.5 136.5 1 150z"/></svg>
<svg id="svg-content-book" viewBox="0 0 2048 2048" class="icon"><path d="M1831 606q40 57 18 129l-275 906q-19 64-76.5 107.5t-122.5 43.5h-923q-77 0-148.5-53.5t-99.5-131.5q-24-67-2-127 0-4 3-27t4-37q1-8-3-21.5t-3-19.5q2-11 8-21t16.5-23.5 16.5-23.5q23-38 45-91.5t30-91.5q3-10 .5-30t-.5-28q3-11 17-28t17-23q21-36 42-92t25-90q1-9-2.5-32t.5-28q4-13 22-30.5t22-22.5q19-26 42.5-84.5t27.5-96.5q1-8-3-25.5t-2-26.5q2-8 9-18t18-23 17-21q8-12 16.5-30.5t15-35 16-36 19.5-32 26.5-23.5 36-11.5 47.5 5.5l-1 3q38-9 51-9h761q74 0 114 56t18 130l-274 906q-36 119-71.5 153.5t-128.5 34.5h-869q-27 0-38 15-11 16-1 43 24 70 144 70h923q29 0 56-15.5t35-41.5l300-987q7-22 5-57 38 15 59 43zm-1064 2q-4 13 2 22.5t20 9.5h608q13 0 25.5-9.5t16.5-22.5l21-64q4-13-2-22.5t-20-9.5h-608q-13 0-25.5 9.5t-16.5 22.5zm-83 256q-4 13 2 22.5t20 9.5h608q13 0 25.5-9.5t16.5-22.5l21-64q4-13-2-22.5t-20-9.5h-608q-13 0-25.5 9.5t-16.5 22.5z"/></svg>
<svg id="svg-content-bus" viewBox="0 0 2048 2048" class="icon"><path d="M640 1344q0-53-37.5-90.5t-90.5-37.5-90.5 37.5-37.5 90.5 37.5 90.5 90.5 37.5 90.5-37.5 37.5-90.5zm1024 0q0-53-37.5-90.5t-90.5-37.5-90.5 37.5-37.5 90.5 37.5 90.5 90.5 37.5 90.5-37.5 37.5-90.5zm-46-396l-72-384q-5-23-22.5-37.5t-40.5-14.5h-918q-23 0-40.5 14.5t-22.5 37.5l-72 384q-5 30 14 53t49 23h1062q30 0 49-23t14-53zm-226-612q0-20-14-34t-34-14h-640q-20 0-34 14t-14 34 14 34 34 14h640q20 0 34-14t14-34zm400 725v603h-128v128q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5v-128h-768v128q0 53-37.5 90.5t-90.5 37.5-90.5-37.5-37.5-90.5v-128h-128v-603q0-112 25-223l103-454q9-78 97.5-137t230-89 312.5-30 312.5 30 230 89 97.5 137l105 454q23 102 23 223z"/></svg>
<svg id="svg-content-calendar" viewBox="0 0 2048 2048" class="icon"><path d="M320 1792h1408v-1024h-1408v1024zm384-1216v-288q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v288q0 14 9 23t23 9h64q14 0 23-9t9-23zm768 0v-288q0-14-9-23t-23-9h-64q-14 0-23 9t-9 23v288q0 14 9 23t23 9h64q14 0 23-9t9-23zm384-64v1280q0 52-38 90t-90 38h-1408q-52 0-90-38t-38-90v-1280q0-52 38-90t90-38h128v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h384v-96q0-66 47-113t113-47h64q66 0 113 47t47 113v96h128q52 0 90 38t38 90z"/></svg>
<svg id="svg-theme-cross" viewBox="0 0 2048 2048" class="icon"><path d="M1618 1450q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/></svg>
<svg id="svg-theme-search" viewBox="0 0 2048 2048" class="icon"><path d="M1344 960q0-185-131.5-316.5t-316.5-131.5-316.5 131.5-131.5 316.5 131.5 316.5 316.5 131.5 316.5-131.5 131.5-316.5zm512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124-143 0-273.5-55.5t-225-150-150-225-55.5-273.5 55.5-273.5 150-225 225-150 273.5-55.5 273.5 55.5 225 150 150 225 55.5 273.5q0 220-124 399l343 343q37 37 37 90z"/></svg>
<svg id="svg-theme-comment" viewBox="0 0 2048 2048" class="icon"><path d="M1920 1024q0 174-120 321.5t-326 233-450 85.5q-70 0-145-8-198 175-460 242-49 14-114 22-17 2-30.5-9t-17.5-29v-1q-3-4-.5-12t2-10 4.5-9.5l6-9 7-8.5 8-9q7-8 31-34.5t34.5-38 31-39.5 32.5-51 27-59 26-76q-157-89-247.5-220t-90.5-281q0-130 71-248.5t191-204.5 286-136.5 348-50.5q244 0 450 85.5t326 233 120 321.5z"/></svg>
<svg id="svg-theme-top" viewBox="0 0 2048 2048" class="icon"><path d="M1421 1267l102-102q19-19 19-45t-19-45l-454-454q-19-19-45-19t-45 19l-454 454q-19 19-19 45t19 45l102 102q19 19 45 19t45-19l307-307 307 307q19 19 45 19t45-19zm371-243q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/></svg>
<svg id="svg-theme-burger" viewBox="0 0 2048 2048" class="icon"><path d="M1792 1472v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"/></svg>
<svg id="svg-theme-right" viewBox="0 0 2048 2048" class="icon"><path d="M1299 1088q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z"/></svg>
<svg id="svg-theme-doubleright" viewBox="0 0 2048 2048" class="icon"><path d="M1107 1088q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23zm384 0q0 13-10 23l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23z"/></svg>
<svg id="svg-theme-left" viewBox="0 0 2048 2048" class="icon"><path d="M1331 672q0 13-10 23l-393 393 393 393q10 10 10 23t-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23z"/></svg>
<svg id="svg-theme-doubleleft" viewBox="0 0 2048 2048" class="icon"><path d="M1139 1504q0 13-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23t-10 23l-393 393 393 393q10 10 10 23zm384 0q0 13-10 23l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23t-10 23l-393 393 393 393q10 10 10 23z"/></svg>
base/icons/_icons.scss
, line 1
2.3 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>.
base/links/links.scss
, line 4
base/grouping/grouping.scss
, line 4
2.4.1 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>
.
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>
base/grouping/grouping.scss
, line 10
2.4.2 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>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>
base/grouping/grouping.scss
, line 96
2.4.3 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.
<figure>
An illustration, diagram, photo, code listing, etc.
</figure>
<figure>
An illustration, diagram, photo, code listing, etc.
<figcaption>Figure 1</figcaption>
</figure>
base/grouping/grouping.scss
, line 28
2.4.4 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>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
base/grouping/grouping.scss
, line 48
base/grouping/grouping.scss
, line 114
2.4.5.1 Description list
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>
<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>
base/grouping/grouping.scss
, line 134
2.4.5.2 Ordered list
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>
<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>
base/grouping/grouping.scss
, line 126
2.4.5.3 Unordered list
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>
<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>
base/grouping/grouping.scss
, line 118
2.4.6 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.
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>
base/grouping/grouping.scss
, line 62
2.4.7 Preformatted text
The <pre> tag represents a block of preformatted text, such as fragments of computer code, ASCII art, etc.
(ノ゜Д゜)ノ ︵ ┻━┻
The following text is preformatted:
<pre>
(ノ゜Д゜)ノ ︵ ┻━┻
</pre>
base/grouping/grouping.scss
, line 75
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.
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>
base/text/text.scss
, line 4
2.5.1 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.
An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.
And <abbr title="HyperText Markup Language">HTML</abbr> is an acroynm.
base/text/text.scss
, line 16
2.5.2 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.
The following snippets of text are <strong>rendered</strong> as <b>bold
text</b>.
base/text/text.scss
, line 39
2.5.3 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>Doctor Who</cite>)?</p>
<p>Comment by <cite><a href="#">Oli Walberg</a></cite></p>
base/text/text.scss
, line 56
2.5.4 Deleted text
For indicating blocks of text that have been deleted use the
<del>
tag.
<del>This line of text is meant to be treated as deleted text.</del>
base/text/text.scss
, line 68
2.5.5 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 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>
base/text/text.scss
, line 81
2.5.6 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.
The following snippets of text are <em>rendered</em> as <i>italic text</i>.
base/text/text.scss
, line 93
2.5.7 Inserted text
For indicating additions to the document use the <ins>
tag.
<ins>This line of text is meant to be treated as an addition to the
document.</ins>
base/text/text.scss
, line 110
2.5.8 Marked text
For highlighting a run of text due to its relevance in another context, use
the <mark>
tag.
You can use the mark tag to <mark>highlight</mark> text like this.
<mark>New!</mark>
base/text/text.scss
, line 123
2.5.9 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 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>
base/text/text.scss
, line 136
2.5.10 Strikethrough text
For indicating blocks of text that are no longer relevant use the
<s>
tag.
<s>This line of text is meant to be treated as no longer accurate.</s>
base/text/text.scss
, line 149
2.5.11 Small text
For de-emphasizing inline or blocks of text, use the
<small>
tag to set text at 80% the size of the parent.
<small>This line of text is meant to be treated as fine print.</small>
base/text/text.scss
, line 162
2.5.12 Superscript / Subscript
The <sup> tag represents a superscript and the <sub> tag represents a subscript.
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>.
base/text/text.scss
, line 175
2.5.13 Underlined text
To underline text use the <u>
tag. Not recommended since
underlines are used by web browsers to style hyperlinks.
<u>This line of text will render as underlined</u>
base/text/text.scss
, line 197
base/embedded/embedded.scss
, line 4
2.6.1 Image
An <img> tag represents an image.
An image that is inline with other text.

<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>
base/embedded/embedded.scss
, line 10
2.6.2 Scalable vector
A <svg> tag represents an image encoded as a Scalable Vector Graphic.
A svg image that is inline with other text.
<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>
base/embedded/embedded.scss
, line 23
base/forms/forms.scss
, line 4
2.7.2 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>
base/forms/forms.scss
, line 129
2.7.3 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="[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>
base/forms/forms.scss
, line 59
2.7.4 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>
base/forms/forms.scss
, line 100
2.7.5 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>
base/forms/forms.scss
, line 112
2.7.6 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>
base/forms/forms.scss
, line 146
2.7.7 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>
base/forms/forms.scss
, line 160
2.7.8 Text areas
The <textarea>
element represents a multi-line plain text form field.
<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>
base/forms/forms.scss
, line 176
2.8 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>
<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>
base/tables/tables.scss
, line 4