hackertours-theme/styleguide/section-base.html
Fredrik Jonsson b7977e1c28 First commit.
2017-03-09 14:29:29 +01:00

3413 lines
199 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Hugo Zen Style Guide</title>
<meta name="description" content="">
<meta name="generator" content="kss-node">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="kss-assets/kss.css">
<link rel="stylesheet" href="../static/css/styles.css">
<link rel="stylesheet" href="../static/css/style-guide/chroma-kss-styles.css">
<link rel="stylesheet" href="../static/css/style-guide/kss-only.css">
</head>
<body id="kss-node" >
<div class="kss-sidebar kss-style">
<header class="kss-header">
<h1 class="kss-doc-title">Hugo Zen Style Guide</h1>
</header>
<nav class="kss-nav">
<ul class="kss-nav__menu">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="./">
<span class="kss-nav__ref">0</span
><span class="kss-nav__name">Overview</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-sass.html">
<span class="kss-nav__ref">1</span><span class="kss-nav__name">Colors and Sass</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html">
<span class="kss-nav__ref">2</span><span class="kss-nav__name">Defaults</span>
</a>
<ul class="kss-nav__menu-child">
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-headings">
<span class="kss-nav__ref ">2.1</span
><span class="kss-nav__name">Headings</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-link">
<span class="kss-nav__ref ">2.2</span
><span class="kss-nav__name">Links</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-grouping">
<span class="kss-nav__ref ">2.3</span
><span class="kss-nav__name">Grouping content</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-grouping-p">
<span class="kss-nav__ref kss-nav__ref-child">2.3.1</span
><span class="kss-nav__name">Body copy</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-grouping-lists">
<span class="kss-nav__ref kss-nav__ref-child">2.3.2</span
><span class="kss-nav__name">Lists</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-grouping-blockquote">
<span class="kss-nav__ref kss-nav__ref-child">2.3.3</span
><span class="kss-nav__name">Block quotes</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-grouping-figure">
<span class="kss-nav__ref kss-nav__ref-child">2.3.4</span
><span class="kss-nav__name">Figures</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-grouping-hr">
<span class="kss-nav__ref kss-nav__ref-child">2.3.5</span
><span class="kss-nav__name">Horizontal rule</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-grouping-pre">
<span class="kss-nav__ref kss-nav__ref-child">2.3.6</span
><span class="kss-nav__name">Preformatted text</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-table">
<span class="kss-nav__ref ">2.4</span
><span class="kss-nav__name">Tables</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-text">
<span class="kss-nav__ref ">2.5</span
><span class="kss-nav__name">Text-level semantics</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-b">
<span class="kss-nav__ref kss-nav__ref-child">2.5.1</span
><span class="kss-nav__name">Bold</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-i">
<span class="kss-nav__ref kss-nav__ref-child">2.5.2</span
><span class="kss-nav__name">Italics</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-abbr">
<span class="kss-nav__ref kss-nav__ref-child">2.5.3</span
><span class="kss-nav__name">Abbreviation / Acroynym</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-cite">
<span class="kss-nav__ref kss-nav__ref-child">2.5.4</span
><span class="kss-nav__name">Cite</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-code">
<span class="kss-nav__ref kss-nav__ref-child">2.5.5</span
><span class="kss-nav__name">Code</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-del">
<span class="kss-nav__ref kss-nav__ref-child">2.5.6</span
><span class="kss-nav__name">Deleted text</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-dfn">
<span class="kss-nav__ref kss-nav__ref-child">2.5.7</span
><span class="kss-nav__name">Definition</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-ins">
<span class="kss-nav__ref kss-nav__ref-child">2.5.8</span
><span class="kss-nav__name">Inserted text</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-mark">
<span class="kss-nav__ref kss-nav__ref-child">2.5.9</span
><span class="kss-nav__name">Marked text</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-q">
<span class="kss-nav__ref kss-nav__ref-child">2.5.10</span
><span class="kss-nav__name">Quote</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-s">
<span class="kss-nav__ref kss-nav__ref-child">2.5.11</span
><span class="kss-nav__name">Strikethrough text</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-small">
<span class="kss-nav__ref kss-nav__ref-child">2.5.12</span
><span class="kss-nav__name">Small text</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-sub">
<span class="kss-nav__ref kss-nav__ref-child">2.5.13</span
><span class="kss-nav__name">Superscript / Subscript</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-text-u">
<span class="kss-nav__ref kss-nav__ref-child">2.5.14</span
><span class="kss-nav__name">Underlined text</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-embedded">
<span class="kss-nav__ref ">2.6</span
><span class="kss-nav__name">Embedded content</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-embedded-img">
<span class="kss-nav__ref kss-nav__ref-child">2.6.1</span
><span class="kss-nav__name">Image</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-base.html#kssref-base-embedded-svg">
<span class="kss-nav__ref kss-nav__ref-child">2.6.2</span
><span class="kss-nav__name">Scalable vector</span>
</a>
</li>
</ul>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-layouts.html">
<span class="kss-nav__ref">3</span><span class="kss-nav__name">Layouts</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-components.html">
<span class="kss-nav__ref">4</span><span class="kss-nav__name">Components</span>
</a>
</li>
<li class="kss-nav__menu-item">
<a class="kss-nav__menu-link" href="section-navigation.html">
<span class="kss-nav__ref">5</span><span class="kss-nav__name">Navigation</span>
</a>
</li>
</ul>
</nav>
</div>
<article role="main" class="kss-main">
<div id="kssref-base" class="kss-section kss-section--depth-1 ">
<div class="kss-style">
<h1 class="kss-title kss-title--level-1">
<a class="kss-title__permalink" href="#kssref-base">
<span class="kss-title__ref">
2
<span class="kss-title__permalink-hash">
base
</span>
</span>
Defaults
</a>
</h1>
<div class="kss-description">
<p>These are the default base styles applied to HTML elements.</p>
<p>Component classes can override these styles, but if no class applies a style
to an HTML element, these styles will be the ones displayed.</p>
</div>
</div>
<div class="kss-source kss-style">
Source: <code>styles.scss</code>, line 17
</div>
</div>
<section id="kssref-base-headings" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-base-headings">
<span class="kss-title__ref">
2.1
<span class="kss-title__permalink-hash">
base.headings
</span>
</span>
Headings
</a>
</h2>
<p class="kss-toolbar">
<a href="#kssref-base-headings" data-kss-fullscreen="kssref-base-headings">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-headings.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-headings" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-headings" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code>, are available. <code>%h1</code> through <code>%h6</code>
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.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<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>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/headings/headings-h.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;h1 class=&quot;{{modifier_class}}&quot;&gt;Heading Level 1 (h1)&lt;/h1&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h2 class=&quot;{{modifier_class}}&quot;&gt;Heading Level 2 (h2)&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h3 class=&quot;{{modifier_class}}&quot;&gt;Heading Level 3 (h3)&lt;/h3&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h4 class=&quot;{{modifier_class}}&quot;&gt;Heading Level 4 (h4)&lt;/h4&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h5 class=&quot;{{modifier_class}}&quot;&gt;Heading Level 5 (h5)&lt;/h5&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h6 class=&quot;{{modifier_class}}&quot;&gt;Heading Level 6 (h6)&lt;/h6&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h1 class=&quot;{{modifier_class}}&quot;&gt;A Heading Level 1 (h1) with enough text to wrap to another line&lt;/h1&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h2 class=&quot;{{modifier_class}}&quot;&gt;Heading Level 2 (h2) with enough text to wrap to another line; Heading Level 2 (h2) with enough text to wrap to another line&lt;/h2&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h3 class=&quot;{{modifier_class}}&quot;&gt;Heading Level 3 (h3) with enough text to wrap to another line; Heading Level 3 (h3) with enough text to wrap to another line&lt;/h3&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h4 class=&quot;{{modifier_class}}&quot;&gt;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&lt;/h4&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h5 class=&quot;{{modifier_class}}&quot;&gt;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&lt;/h5&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;h6 class=&quot;{{modifier_class}}&quot;&gt;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&lt;/h6&gt;
&lt;p&gt;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.&lt;/p&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/headings/_headings.scss</code>, line 1
</div>
</section>
<section id="kssref-base-link" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-base-link">
<span class="kss-title__ref">
2.2
<span class="kss-title__permalink-hash">
base.link
</span>
</span>
Links
</a>
</h2>
<p class="kss-toolbar">
<a href="#kssref-base-link" data-kss-fullscreen="kssref-base-link">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-link.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-link" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-link" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>Hyperlinks are used to allow the user to navigate to other resources or to
download a resource.</p>
<p>The order of link states are based on Eric Meyer&#39;s article:
<a href="http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states">http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states</a></p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Examples </div>
<div class="kss-modifier__default-name kss-style">
Default styling
</div>
<div class="kss-modifier__example">
This is a <a href="#" class="">link to another web page</a>.
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
:visited
</div>
<div class="kss-modifier__description kss-style">
A link that has already been visited.
</div>
<div class="kss-modifier__example">
This is a <a href="#" class="pseudo-class-visited">link to another web page</a>.
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
:hover
</div>
<div class="kss-modifier__description kss-style">
A link that is being hovered over.
</div>
<div class="kss-modifier__example">
This is a <a href="#" class="pseudo-class-hover">link to another web page</a>.
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
:focus
</div>
<div class="kss-modifier__description kss-style">
A link that has been given keyboard focus.
</div>
<div class="kss-modifier__example">
This is a <a href="#" class="pseudo-class-focus">link to another web page</a>.
<div class="kss-modifier__example-footer"></div>
</div>
<div class="kss-modifier__name kss-style">
:active
</div>
<div class="kss-modifier__description kss-style">
A link that is being actively clicked.
</div>
<div class="kss-modifier__example">
This is a <a href="#" class="pseudo-class-active">link to another web page</a>.
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/links/links-a.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">This is a &lt;a href=&quot;#&quot; class=&quot;{{modifier_class}}&quot;&gt;link to another web page&lt;/a&gt;.
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/links/_links.scss</code>, line 1
</div>
</section>
<section id="kssref-base-grouping" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-base-grouping">
<span class="kss-title__ref">
2.3
<span class="kss-title__permalink-hash">
base.grouping
</span>
</span>
Grouping content
</a>
</h2>
</div>
<div class="kss-source kss-style">
Source: <code>base/grouping/_grouping.scss</code>, line 5
</div>
</section>
<section id="kssref-base-grouping-p" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-grouping-p">
<span class="kss-title__ref">
2.3.1
<span class="kss-title__permalink-hash">
base.grouping.p
</span>
</span>
Body copy
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-grouping-p" data-kss-fullscreen="kssref-base-grouping-p">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-grouping-p.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-grouping-p" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-grouping-p" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The default <code>font-size</code> and <code>line-height</code> properties are applied to the
<code>&lt;body&gt;</code> element and all paragraphs. In addition, <code>&lt;p&gt;</code> (paragraphs) receive
a top and bottom margin.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<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>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/grouping/grouping-p.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p class=&quot;{{modifier_class}}&quot;&gt;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.&lt;/p&gt;
&lt;p class=&quot;{{modifier_class}}&quot;&gt;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.&lt;/p&gt;
&lt;p class=&quot;{{modifier_class}}&quot;&gt;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.&lt;/p&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/grouping/_grouping.scss</code>, line 155
</div>
</section>
<section id="kssref-base-grouping-lists" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-grouping-lists">
<span class="kss-title__ref">
2.3.2
<span class="kss-title__permalink-hash">
base.grouping.lists
</span>
</span>
Lists
</a>
</h3>
</div>
<div class="kss-source kss-style">
Source: <code>base/grouping/_grouping.scss</code>, line 32
</div>
</section>
<section id="kssref-base-grouping-lists-ol" class="kss-section kss-section--depth-4 ">
<div class="kss-style">
<h4 class="kss-title kss-title--level-4">
<a class="kss-title__permalink" href="#kssref-base-grouping-lists-ol">
<span class="kss-title__ref">
2.3.2.1
<span class="kss-title__permalink-hash">
base.grouping.lists.ol
</span>
</span>
Ordered list
</a>
</h4>
<p class="kss-toolbar">
<a href="#kssref-base-grouping-lists-ol" data-kss-fullscreen="kssref-base-grouping-lists-ol">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-grouping-lists-ol.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-grouping-lists-ol" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-grouping-lists-ol" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;ol&gt;</code> element is a list of items in which the order <em>does</em>
explicitly matter.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<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>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/grouping/grouping-ol.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ol class=&quot;{{modifier_class}}&quot;&gt;
&lt;li&gt;Lorem ipsum dolor sit amet&lt;/li&gt;
&lt;li&gt;Consectetur adipiscing elit&lt;/li&gt;
&lt;li&gt;Integer molestie lorem at massa&lt;/li&gt;
&lt;li&gt;Facilisis in pretium nisl aliquet&lt;/li&gt;
&lt;li&gt;Nulla volutpat aliquam velit
&lt;ol class=&quot;{{modifier_class}}&quot;&gt;
&lt;li&gt;Phasellus iaculis neque&lt;/li&gt;
&lt;li&gt;Purus sodales ultricies&lt;/li&gt;
&lt;li&gt;Vestibulum laoreet porttitor sem&lt;/li&gt;
&lt;li&gt;Ac tristique libero volutpat at&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;Faucibus porta lacus fringilla vel&lt;/li&gt;
&lt;li&gt;Aenean sit amet erat nunc&lt;/li&gt;
&lt;li&gt;Eget porttitor lorem&lt;/li&gt;
&lt;/ol&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/grouping/_grouping.scss</code>, line 47
</div>
</section>
<section id="kssref-base-grouping-lists-ul" class="kss-section kss-section--depth-4 ">
<div class="kss-style">
<h4 class="kss-title kss-title--level-4">
<a class="kss-title__permalink" href="#kssref-base-grouping-lists-ul">
<span class="kss-title__ref">
2.3.2.2
<span class="kss-title__permalink-hash">
base.grouping.lists.ul
</span>
</span>
Unordered list
</a>
</h4>
<p class="kss-toolbar">
<a href="#kssref-base-grouping-lists-ul" data-kss-fullscreen="kssref-base-grouping-lists-ul">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-grouping-lists-ul.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-grouping-lists-ul" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-grouping-lists-ul" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;ul&gt;</code> element is a list of items in which the order does <em>not</em>
explicitly matter.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<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>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/grouping/grouping-ul.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ul class=&quot;{{modifier_class}}&quot;&gt;
&lt;li&gt;Lorem ipsum dolor sit amet&lt;/li&gt;
&lt;li&gt;Consectetur adipiscing elit&lt;/li&gt;
&lt;li&gt;Integer molestie lorem at massa&lt;/li&gt;
&lt;li&gt;Facilisis in pretium nisl aliquet&lt;/li&gt;
&lt;li&gt;Nulla volutpat aliquam velit
&lt;ul class=&quot;{{modifier_class}}&quot;&gt;
&lt;li&gt;Phasellus iaculis neque&lt;/li&gt;
&lt;li&gt;Purus sodales ultricies&lt;/li&gt;
&lt;li&gt;Vestibulum laoreet porttitor sem&lt;/li&gt;
&lt;li&gt;Ac tristique libero volutpat at&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Faucibus porta lacus fringilla vel&lt;/li&gt;
&lt;li&gt;Aenean sit amet erat nunc&lt;/li&gt;
&lt;li&gt;Eget porttitor lorem&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/grouping/_grouping.scss</code>, line 38
</div>
</section>
<section id="kssref-base-grouping-lists-dl" class="kss-section kss-section--depth-4 ">
<div class="kss-style">
<h4 class="kss-title kss-title--level-4">
<a class="kss-title__permalink" href="#kssref-base-grouping-lists-dl">
<span class="kss-title__ref">
2.3.2.3
<span class="kss-title__permalink-hash">
base.grouping.lists.dl
</span>
</span>
Description list
</a>
</h4>
<p class="kss-toolbar">
<a href="#kssref-base-grouping-lists-dl" data-kss-fullscreen="kssref-base-grouping-lists-dl">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-grouping-lists-dl.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-grouping-lists-dl" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-grouping-lists-dl" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;dl&gt;</code> element is a list of terms with their associated descriptions.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<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>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/grouping/grouping-dl.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;dl class=&quot;{{modifier_class}}&quot;&gt;
&lt;dt&gt;Description lists&lt;/dt&gt;
&lt;dd&gt;A description list is perfect for defining terms.&lt;/dd&gt;
&lt;dt&gt;Euismod&lt;/dt&gt;
&lt;dd&gt;Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.&lt;/dd&gt;
&lt;dd&gt;Donec id elit non mi porta gravida at eget metus.&lt;/dd&gt;
&lt;dt&gt;Malesuada porta&lt;/dt&gt;
&lt;dd&gt;Etiam porta sem malesuada magna mollis euismod.&lt;/dd&gt;
&lt;/dl&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/grouping/_grouping.scss</code>, line 56
</div>
</section>
<section id="kssref-base-grouping-blockquote" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-grouping-blockquote">
<span class="kss-title__ref">
2.3.3
<span class="kss-title__permalink-hash">
base.grouping.blockquote
</span>
</span>
Block quotes
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-grouping-blockquote" data-kss-fullscreen="kssref-base-grouping-blockquote">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-grouping-blockquote.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-grouping-blockquote" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-grouping-blockquote" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;blockquote&gt;</code> element is for quoting blocks of content from another
source within your document. Wrap the <code>&lt;blockquote&gt;</code> around any <abbr
title="HyperText Markup Language">HTML</abbr> as the quote. For straight
quotes, we recommend a <code>&lt;p&gt;</code>.</p>
<p>Optionally, add a <code>&lt;footer&gt;</code> to identify the source of the quote, wrapping
the name of the source work in <code>&lt;cite&gt;</code>.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<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>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/grouping/grouping-blockquote.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;blockquote class=&quot;{{modifier_class}}&quot;&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;blockquote class=&quot;{{modifier_class}}&quot;&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.&lt;/p&gt;
&lt;footer&gt;J. Smith in &lt;cite title=&quot;Source Title, 2nd Edition&quot;&gt;Source
Title&lt;/cite&gt;&lt;/footer&gt;
&lt;/blockquote&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/grouping/_grouping.scss</code>, line 12
</div>
</section>
<section id="kssref-base-grouping-figure" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-grouping-figure">
<span class="kss-title__ref">
2.3.4
<span class="kss-title__permalink-hash">
base.grouping.figure
</span>
</span>
Figures
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-grouping-figure" data-kss-fullscreen="kssref-base-grouping-figure">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-grouping-figure.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-grouping-figure" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-grouping-figure" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;figure&gt;</code> element can be used to annotate illustrations, diagrams,
photos, code listings, etc.</p>
<p>Optionally, a <code>&lt;figcaption&gt;</code> element inside the <code>&lt;figure&gt;</code> represents the
caption of the figure.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<figure class="">
An illustration, diagram, photo, code listing, etc.
</figure>
<figure class="">
An illustration, diagram, photo, code listing, etc.
<figcaption>Figure 1</figcaption>
</figure>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/grouping/grouping-figure.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;figure class=&quot;{{modifier_class}}&quot;&gt;
An illustration, diagram, photo, code listing, etc.
&lt;/figure&gt;
&lt;figure class=&quot;{{modifier_class}}&quot;&gt;
An illustration, diagram, photo, code listing, etc.
&lt;figcaption&gt;Figure 1&lt;/figcaption&gt;
&lt;/figure&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/grouping/_grouping.scss</code>, line 115
</div>
</section>
<section id="kssref-base-grouping-hr" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-grouping-hr">
<span class="kss-title__ref">
2.3.5
<span class="kss-title__permalink-hash">
base.grouping.hr
</span>
</span>
Horizontal rule
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-grouping-hr" data-kss-fullscreen="kssref-base-grouping-hr">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-grouping-hr.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-grouping-hr" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-grouping-hr" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;hr&gt;</code> 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.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<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>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/grouping/grouping-hr.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;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.&lt;/p&gt;
&lt;hr class=&quot;{{modifier_class}}&quot;&gt;
&lt;p&gt;Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/grouping/_grouping.scss</code>, line 136
</div>
</section>
<section id="kssref-base-grouping-pre" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-grouping-pre">
<span class="kss-title__ref">
2.3.6
<span class="kss-title__permalink-hash">
base.grouping.pre
</span>
</span>
Preformatted text
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-grouping-pre" data-kss-fullscreen="kssref-base-grouping-pre">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-grouping-pre.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-grouping-pre" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-grouping-pre" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;pre&gt;</code> element represents a block of preformatted text, such as
fragments of computer code, ASCII art, etc.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
The following text is preformatted:
<pre class="">
(ノ゜Д゜)ノ ︵ ┻━┻
</pre>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/grouping/grouping-pre.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">The following text is preformatted:
&lt;pre class=&quot;{{modifier_class}}&quot;&gt;
(ノ゜Д゜)ノ ︵ ┻━┻
&lt;/pre&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/grouping/_grouping.scss</code>, line 173
</div>
</section>
<section id="kssref-base-table" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-base-table">
<span class="kss-title__ref">
2.4
<span class="kss-title__permalink-hash">
base.table
</span>
</span>
Tables
</a>
</h2>
<p class="kss-toolbar">
<a href="#kssref-base-table" data-kss-fullscreen="kssref-base-table">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-table.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-table" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-table" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;table&gt;</code> element displays tabular data in rows, columns, and cells.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<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>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/tables/tables-table.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;table class=&quot;{{modifier_class}}&quot;&gt;
&lt;caption&gt;Optional table caption.&lt;/caption&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;#&lt;/th&gt;
&lt;th&gt;First Name&lt;/th&gt;
&lt;th&gt;Last Name&lt;/th&gt;
&lt;th&gt;Username&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;Jane&lt;/td&gt;
&lt;td&gt;Doe&lt;/td&gt;
&lt;td&gt;jdoe&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;Jamie&lt;/td&gt;
&lt;td&gt;Morgan&lt;/td&gt;
&lt;td&gt;jmorgan&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;3&lt;/td&gt;
&lt;td&gt;Jacob&lt;/td&gt;
&lt;td&gt;Smith&lt;/td&gt;
&lt;td&gt;jsmith&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;tfoot&gt;
&lt;tr&gt;
&lt;th&gt;#&lt;/th&gt;
&lt;th&gt;First Name&lt;/th&gt;
&lt;th&gt;Last Name&lt;/th&gt;
&lt;th&gt;Username&lt;/th&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;
&lt;/table&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/tables/_tables.scss</code>, line 1
</div>
</section>
<section id="kssref-base-text" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-base-text">
<span class="kss-title__ref">
2.5
<span class="kss-title__permalink-hash">
base.text
</span>
</span>
Text-level semantics
</a>
</h2>
<div class="kss-description">
<p>The elements in this section give semantics to inline text.</p>
</div>
</div>
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 1
</div>
</section>
<section id="kssref-base-text-b" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-text-b">
<span class="kss-title__ref">
2.5.1
<span class="kss-title__permalink-hash">
base.text.b
</span>
</span>
Bold
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-text-b" data-kss-fullscreen="kssref-base-text-b">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-text-b.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-text-b" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-text-b" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;strong&gt;</code> element or the <code>&lt;b&gt;</code> element is for emphasizing a snippet of
text with a heavier font-weight.</p>
<p>Feel free to use <code>&lt;b&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases
without conveying additional importance.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
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>.
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/text/text-b.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">The following snippets of text are &lt;strong class=&quot;{{modifier_class}}&quot;&gt;rendered&lt;/strong&gt; as &lt;b class=&quot;{{modifier_class}}&quot;&gt;bold
text&lt;/b&gt;. Bold text nested inside &lt;i&gt;italic text &lt;b&gt;should&lt;/b&gt;&lt;/i&gt; &lt;em&gt;still be
&lt;strong&gt;bold&lt;/strong&gt;&lt;/em&gt;.
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 33
</div>
</section>
<section id="kssref-base-text-i" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-text-i">
<span class="kss-title__ref">
2.5.2
<span class="kss-title__permalink-hash">
base.text.i
</span>
</span>
Italics
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-text-i" data-kss-fullscreen="kssref-base-text-i">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-text-i.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-text-i" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-text-i" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;em&gt;</code> element or the <code>&lt;i&gt;</code> element is used for emphasizing a snippet of
text with italics.</p>
<p>Feel free to use <code>&lt;i&gt;</code> element in HTML5. <code>&lt;i&gt;</code> is meant to convey voice,
technical terms, etc.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
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>.
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/text/text-i.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">The following snippets of text are &lt;em class=&quot;{{modifier_class}}&quot;&gt;rendered&lt;/em&gt; as &lt;i class=&quot;{{modifier_class}}&quot;&gt;italic text&lt;/i&gt;.
Italic text nested inside &lt;b&gt;bold text &lt;i&gt;should&lt;/i&gt;&lt;/b&gt; &lt;strong&gt;still be
&lt;em&gt;italic&lt;/em&gt;&lt;/strong&gt;.
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 122
</div>
</section>
<section id="kssref-base-text-abbr" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-text-abbr">
<span class="kss-title__ref">
2.5.3
<span class="kss-title__permalink-hash">
base.text.abbr
</span>
</span>
Abbreviation / Acroynym
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-text-abbr" data-kss-fullscreen="kssref-base-text-abbr">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-text-abbr.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-text-abbr" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-text-abbr" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;abbr&gt;</code> element makes the meanings of abbreviations and acronyms visible
on hover.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
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.
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/text/text-abbr.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">An abbreviation of the word attribute is &lt;abbr class=&quot;{{modifier_class}}&quot; title=&quot;attribute&quot;&gt;attr&lt;/abbr&gt;.
And &lt;abbr class=&quot;{{modifier_class}}&quot; title=&quot;HyperText Markup Language&quot;&gt;HTML&lt;/abbr&gt; is an acroynm.
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 9
</div>
</section>
<section id="kssref-base-text-cite" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-text-cite">
<span class="kss-title__ref">
2.5.4
<span class="kss-title__permalink-hash">
base.text.cite
</span>
</span>
Cite
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-text-cite" data-kss-fullscreen="kssref-base-text-cite">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-text-cite.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-text-cite" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-text-cite" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;cite&gt;</code> element represents a reference to a creative work.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<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>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/text/text-cite.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;Who is your favorite doctor (in &lt;cite class=&quot;{{modifier_class}}&quot;&gt;Doctor Who&lt;/cite&gt;)?&lt;/p&gt;
&lt;p&gt;Comment by &lt;cite class=&quot;{{modifier_class}}&quot;&gt;&lt;a href=&quot;#&quot;&gt;Oli Walberg&lt;/a&gt;&lt;/cite&gt;&lt;/p&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 62
</div>
</section>
<section id="kssref-base-text-code" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-text-code">
<span class="kss-title__ref">
2.5.5
<span class="kss-title__permalink-hash">
base.text.code
</span>
</span>
Code
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-text-code" data-kss-fullscreen="kssref-base-text-code">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-text-code.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-text-code" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-text-code" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;code&gt;</code> element represents a fragment of computer code. The <code>&lt;var&gt;</code>
element represents a variable. The <code>&lt;samp&gt;</code> element represents (sample)
output from a program or computing system. The <code>&lt;kbd&gt;</code> element represents
user input (typically keyboard input.)</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<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>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/text/text-code.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;The &lt;code class=&quot;{{modifier_class}}&quot;&gt;code&lt;/code&gt; element represents a fragment of computer code.&lt;/p&gt;
&lt;p&gt;There are &lt;var class=&quot;{{modifier_class}}&quot;&gt;n&lt;/var&gt; flavors of ice cream to be available for purchase!&lt;/p&gt;
&lt;p&gt;The computer said &lt;samp class=&quot;{{modifier_class}}&quot;&gt;Too much cheese in tray two&lt;/samp&gt; but I didn&#039;t know
what that meant.&lt;/p&gt;
&lt;p&gt;To make George eat an apple, select &lt;kbd class=&quot;{{modifier_class}}&quot;&gt;File | Eat Apple…&lt;/kbd&gt;&lt;/p&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 74
</div>
</section>
<section id="kssref-base-text-del" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-text-del">
<span class="kss-title__ref">
2.5.6
<span class="kss-title__permalink-hash">
base.text.del
</span>
</span>
Deleted text
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-text-del" data-kss-fullscreen="kssref-base-text-del">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-text-del.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-text-del" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-text-del" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;del&gt;</code> element indicates blocks of text that have been deleted.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<del class="">This line of text is meant to be treated as deleted text.</del>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/text/text-del.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;del class=&quot;{{modifier_class}}&quot;&gt;This line of text is meant to be treated as deleted text.&lt;/del&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 97
</div>
</section>
<section id="kssref-base-text-dfn" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-text-dfn">
<span class="kss-title__ref">
2.5.7
<span class="kss-title__permalink-hash">
base.text.dfn
</span>
</span>
Definition
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-text-dfn" data-kss-fullscreen="kssref-base-text-dfn">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-text-dfn.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-text-dfn" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-text-dfn" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;dfn&gt;</code> element represents the defining instance of a term.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<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>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/text/text-dfn.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;The &lt;dfn class=&quot;{{modifier_class}}&quot; id=&quot;gdo&quot;&gt;&lt;abbr title=&quot;Garage Door Opener&quot;&gt;GDO&lt;/abbr&gt;&lt;/dfn&gt; is a
device that allows off-world teams to open the iris.&lt;/p&gt;
&lt;p&gt;Teal&#039;c activated his &lt;a href=&quot;#gdo&quot;&gt;&lt;abbr title=&quot;Garage Door Opener&quot;&gt;GDO&lt;/abbr&gt;&lt;/a&gt;
and so Hammond ordered the iris to be opened.&lt;/p&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 109
</div>
</section>
<section id="kssref-base-text-ins" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-text-ins">
<span class="kss-title__ref">
2.5.8
<span class="kss-title__permalink-hash">
base.text.ins
</span>
</span>
Inserted text
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-text-ins" data-kss-fullscreen="kssref-base-text-ins">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-text-ins.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-text-ins" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-text-ins" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;ins&gt;</code> element indicates additions to the document.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<ins class="">This line of text is meant to be treated as an addition to the
document.</ins>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/text/text-ins.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;ins class=&quot;{{modifier_class}}&quot;&gt;This line of text is meant to be treated as an addition to the
document.&lt;/ins&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 141
</div>
</section>
<section id="kssref-base-text-mark" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-text-mark">
<span class="kss-title__ref">
2.5.9
<span class="kss-title__permalink-hash">
base.text.mark
</span>
</span>
Marked text
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-text-mark" data-kss-fullscreen="kssref-base-text-mark">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-text-mark.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-text-mark" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-text-mark" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;mark&gt;</code> element highlights a run of text due to its relevance in another
context.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
You can use the mark tag to <mark>highlight</mark> text like this.
<mark class="">New!</mark>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/text/text-mark.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">You can use the mark tag to &lt;mark&gt;highlight&lt;/mark&gt; text like this.
&lt;mark class=&quot;{{modifier_class}}&quot;&gt;New!&lt;/mark&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 153
</div>
</section>
<section id="kssref-base-text-q" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-text-q">
<span class="kss-title__ref">
2.5.10
<span class="kss-title__permalink-hash">
base.text.q
</span>
</span>
Quote
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-text-q" data-kss-fullscreen="kssref-base-text-q">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-text-q.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-text-q" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-text-q" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;q&gt;</code> element represents an inline quote from another source. Longer
quotes should use the <code>&lt;blockquote&gt;</code> element.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<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>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/text/text-q.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;q class=&quot;{{modifier_class}}&quot; cite=&quot;http://www.w3.org/TR/html5/text-level-semantics.html#the-q-element&quot;&gt;The
&lt;code&gt;q&lt;/code&gt; element represents some phrasing content quoted from another
source.&lt;/q&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 168
</div>
</section>
<section id="kssref-base-text-s" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-text-s">
<span class="kss-title__ref">
2.5.11
<span class="kss-title__permalink-hash">
base.text.s
</span>
</span>
Strikethrough text
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-text-s" data-kss-fullscreen="kssref-base-text-s">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-text-s.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-text-s" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-text-s" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;s&gt;</code> element indicates blocks of text that are no longer relevant.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<s class="">This line of text is meant to be treated as no longer accurate.</s>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/text/text-s.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;s class=&quot;{{modifier_class}}&quot;&gt;This line of text is meant to be treated as no longer accurate.&lt;/s&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 181
</div>
</section>
<section id="kssref-base-text-small" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-text-small">
<span class="kss-title__ref">
2.5.12
<span class="kss-title__permalink-hash">
base.text.small
</span>
</span>
Small text
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-text-small" data-kss-fullscreen="kssref-base-text-small">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-text-small.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-text-small" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-text-small" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>For de-emphasizing inline or blocks of text, use the <code>&lt;small&gt;</code> element to set
text at 80% the size of the parent.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<small class="">This line of text is meant to be treated as fine print.</small>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/text/text-small.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;small class=&quot;{{modifier_class}}&quot;&gt;This line of text is meant to be treated as fine print.&lt;/small&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 193
</div>
</section>
<section id="kssref-base-text-sub" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-text-sub">
<span class="kss-title__ref">
2.5.13
<span class="kss-title__permalink-hash">
base.text.sub
</span>
</span>
Superscript / Subscript
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-text-sub" data-kss-fullscreen="kssref-base-text-sub">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-text-sub.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-text-sub" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-text-sub" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>The <code>&lt;sup&gt;</code> element represents a superscript and the <code>&lt;sub&gt;</code> element
represents a subscript.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<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>.
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/text/text-sub.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;abbr&gt;M&lt;sup class=&quot;{{modifier_class}}&quot;&gt;lle&lt;/sup&gt;&lt;/abbr&gt; Gwendoline wrote the equation &lt;code&gt;f(x, n) = log&lt;sub class=&quot;{{modifier_class}}&quot;&gt;4&lt;/sub&gt;x&lt;sup class=&quot;{{modifier_class}}&quot;&gt;n&lt;/sup&gt;&lt;/code&gt;.
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 207
</div>
</section>
<section id="kssref-base-text-u" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-text-u">
<span class="kss-title__ref">
2.5.14
<span class="kss-title__permalink-hash">
base.text.u
</span>
</span>
Underlined text
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-text-u" data-kss-fullscreen="kssref-base-text-u">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-text-u.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-text-u" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-text-u" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>To underline text use the <code>&lt;u&gt;</code> element. Not recommended since underlines are
used by web browsers to style hyperlinks.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<u class="">This line of text will render as underlined</u>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/text/text-u.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;u class=&quot;{{modifier_class}}&quot;&gt;This line of text will render as underlined&lt;/u&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/text/_text.scss</code>, line 234
</div>
</section>
<section id="kssref-base-embedded" class="kss-section kss-section--depth-2 ">
<div class="kss-style">
<h2 class="kss-title kss-title--level-2">
<a class="kss-title__permalink" href="#kssref-base-embedded">
<span class="kss-title__ref">
2.6
<span class="kss-title__permalink-hash">
base.embedded
</span>
</span>
Embedded content
</a>
</h2>
</div>
<div class="kss-source kss-style">
Source: <code>base/embedded/_embedded.scss</code>, line 1
</div>
</section>
<section id="kssref-base-embedded-img" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-embedded-img">
<span class="kss-title__ref">
2.6.1
<span class="kss-title__permalink-hash">
base.embedded.img
</span>
</span>
Image
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-embedded-img" data-kss-fullscreen="kssref-base-embedded-img">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-embedded-img.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-embedded-img" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-embedded-img" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>An <code>&lt;img&gt;</code> element represents an image.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<p>An image <img class="" src="kss-assets/sample-inline.png"> that is inline with other text.</p>
<figure style="width: 50%; max-width: 300px;">
<figcaption>An image inside a figure.</figcaption>
<img class="" src="kss-assets/sample.png">
</figure>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/embedded/embedded-img.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;An image &lt;img class=&quot;{{modifier_class}}&quot; src=&quot;kss-assets/sample-inline.png&quot;&gt; that is inline with other text.&lt;/p&gt;
&lt;figure style=&quot;width: 50%; max-width: 300px;&quot;&gt;
&lt;figcaption&gt;An image inside a figure.&lt;/figcaption&gt;
&lt;img class=&quot;{{modifier_class}}&quot; src=&quot;kss-assets/sample.png&quot;&gt;
&lt;/figure&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/embedded/_embedded.scss</code>, line 7
</div>
</section>
<section id="kssref-base-embedded-svg" class="kss-section kss-section--depth-3 ">
<div class="kss-style">
<h3 class="kss-title kss-title--level-3">
<a class="kss-title__permalink" href="#kssref-base-embedded-svg">
<span class="kss-title__ref">
2.6.2
<span class="kss-title__permalink-hash">
base.embedded.svg
</span>
</span>
Scalable vector
</a>
</h3>
<p class="kss-toolbar">
<a href="#kssref-base-embedded-svg" data-kss-fullscreen="kssref-base-embedded-svg">
<span class="kss-toolbar__tooltip">Toggle full screen</span>
<svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
<svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
</svg>
</a>
<a href="item-base-embedded-svg.html" target="_blank">
<span class="kss-toolbar__tooltip">Open in new window</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect x="0" y="20" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
<rect x="24" y="0" width="40" height="44" fill="#fff"/>
<path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
<rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
</svg>
</a>
<a href="#kssref-base-embedded-svg" data-kss-guides="true">
<span class="kss-toolbar__tooltip">Toggle example guides</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
<rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
<rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
<rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
<rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
</svg>
</a>
<a href="#kssref-base-embedded-svg" data-kss-markup="true">
<span class="kss-toolbar__tooltip">Toggle HTML markup</span>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
<path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
<path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
</svg>
</a>
</p>
<div class="kss-description">
<p>A <code>&lt;svg&gt;</code> element represents an image encoded as a Scalable Vector Graphic.</p>
</div>
</div>
<div class="kss-modifier__wrapper">
<div class="kss-modifier__heading kss-style">
Example </div>
<div class="kss-modifier__example">
<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 svg inside 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>
<div class="kss-modifier__example-footer"></div>
</div>
</div>
<details class="kss-markup kss-style">
<summary>
Markup: <code>base/embedded/embedded-svg.twig</code>
</summary>
<pre class="prettyprint linenums lang-html"><code data-language="html">&lt;p&gt;A svg image &lt;svg class=&quot;{{modifier_class}}&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; version=&quot;1.1&quot; id=&quot;Layer_1&quot; x=&quot;0px&quot; y=&quot;0px&quot; width=&quot;10px&quot; height=&quot;10px&quot; viewBox=&quot;0 0 512 512&quot; enable-background=&quot;new 0 0 512 512&quot; xml:space=&quot;preserve&quot;&gt;&lt;polygon fill=&quot;#bdad94&quot; stroke=&quot;#bdad94&quot; stroke-width=&quot;37.6152&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-miterlimit=&quot;10&quot; points=&quot; 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 &quot;/&gt;&lt;/svg&gt; that is inline with other text.&lt;/p&gt;
&lt;figure style=&quot;width: 50%; max-width: 300px;&quot;&gt;
&lt;figcaption&gt;A svg inside a figure.&lt;/figcaption&gt;
&lt;svg class=&quot;{{modifier_class}}&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; version=&quot;1.1&quot; id=&quot;Layer_1&quot; x=&quot;0px&quot; y=&quot;0px&quot; width=&quot;300px&quot; height=&quot;300px&quot; viewBox=&quot;0 0 512 512&quot; enable-background=&quot;new 0 0 512 512&quot; xml:space=&quot;preserve&quot;&gt;
&lt;polygon fill=&quot;#bdad94&quot; stroke=&quot;#bdad94&quot; stroke-width=&quot;37.6152&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-miterlimit=&quot;10&quot; points=&quot; 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 &quot;/&gt;
&lt;/svg&gt;
&lt;/figure&gt;
</code></pre>
</details>
<div class="kss-source kss-style">
Source: <code>base/embedded/_embedded.scss</code>, line 35
</div>
</section>
</article>
<!-- SCRIPTS -->
<script src="kss-assets/kss.js"></script>
<script src="kss-assets/scrollspy.js"></script>
<script src="kss-assets/prettify.js"></script>
<script src="kss-assets/kss-fullscreen.js"></script>
<script src="kss-assets/kss-guides.js"></script>
<script src="kss-assets/kss-markup.js"></script>
<script>
prettyPrint();
var spy = new ScrollSpy('#kss-node', {
nav: '.kss-nav__menu-child > li > a',
className: 'is-in-viewport'
});
var kssFullScreen = new KssFullScreen({
idPrefix: 'kss-fullscreen-',
bodyClass: 'kss-fullscreen-mode',
elementClass: 'is-fullscreen'
});
var kssGuides = new KssGuides({
bodyClass: 'kss-guides-mode'
});
var kssMarkup = new KssMarkup({
bodyClass: 'kss-markup-mode',
detailsClass: 'kss-markup'
});
</script>
<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>