2 Base

These are the base styles applied to HTML elements.

Source: 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.

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>
Source: 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')

Example
<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>
Source: base/icons/_icons.scss, line 1
Source: 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>.

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.

J. Smith in Source Title
<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>
Source: 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.)

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>
Source: 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.

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>
Source: 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.

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>
Source: base/grouping/grouping.scss, line 48
Source: base/grouping/grouping.scss, line 114

2.4.5.1 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>
Source: base/grouping/grouping.scss, line 134

2.4.5.2 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>
Source: base/grouping/grouping.scss, line 126

2.4.5.3 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>
Source: 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.

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>
Source: 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.

Example
The following text is preformatted:
(ノ゜Д゜)ノ ︵ ┻━┻
The following text is preformatted:
<pre>
(ノ゜Д゜)ノ ︵ ┻━┻
</pre>
Source: base/grouping/grouping.scss, line 75
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>
Source: 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.

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.
Source: 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.

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>.
Source: base/text/text.scss, line 39

2.5.3 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>
Source: base/text/text.scss, line 56

2.5.4 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>
Source: base/text/text.scss, line 68

2.5.5 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>
Source: 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.

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>.
Source: base/text/text.scss, line 93

2.5.7 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>
Source: 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.

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>
Source: 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.

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>
Source: 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.

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>
Source: 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.

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>
Source: base/text/text.scss, line 162

2.5.12 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>.
Source: 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.

Example
This line of text will render as underlined
<u>This line of text will render as underlined</u>
Source: base/text/text.scss, line 197
Source: base/embedded/embedded.scss, line 4

2.6.1 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>
Source: base/embedded/embedded.scss, line 10

2.6.2 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>
Source: base/embedded/embedded.scss, line 23
Source: base/forms/forms.scss, line 4

2.7.1 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>
Source: base/forms/forms.scss, line 22

2.7.2 Fieldsets

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

Example
A fieldset
A disabled fieldset
<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>
Source: 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.

Examples
Default styling
:hover
Hover styling.
<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>
Source: 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.

Example
<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>
Source: 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.

Example
<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>
Source: 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.

Example
<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>
Source: 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.

Example
<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>
Source: base/forms/forms.scss, line 160

2.7.8 Text areas

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

Examples
Default styling
:hover
Hover styling.
<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>
Source: base/forms/forms.scss, line 176

2.8 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>
Source: base/tables/tables.scss, line 4