2 base Defaults

These are the default base styles applied to HTML elements.

Component classes can override these styles, but if no class applies a style to an HTML element, these styles will be the ones displayed.

Source: styles.scss, line 17

2.1 base.headings Headings

All HTML headings, <h1> through <h6>, are available. %h1 through %h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

Example

Heading Level 1 (h1)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Heading Level 2 (h2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Heading Level 3 (h3)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Heading Level 4 (h4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Heading Level 5 (h5)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Heading Level 6 (h6)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

A Heading Level 1 (h1) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Heading Level 2 (h2) with enough text to wrap to another line; Heading Level 2 (h2) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Heading Level 3 (h3) with enough text to wrap to another line; Heading Level 3 (h3) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

<h1 class="">Heading Level 1 (h1)</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
<h2 class="">Heading Level 2 (h2)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
<h3 class="">Heading Level 3 (h3)</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
<h4 class="">Heading Level 4 (h4)</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
<h5 class="">Heading Level 5 (h5)</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
<h6 class="">Heading Level 6 (h6)</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>

<h1 class="">A Heading Level 1 (h1) with enough text to wrap to another line</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
<h2 class="">Heading Level 2 (h2) with enough text to wrap to another line; Heading Level 2 (h2) with enough text to wrap to another line</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
<h3 class="">Heading Level 3 (h3) with enough text to wrap to another line; Heading Level 3 (h3) with enough text to wrap to another line</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
<h4 class="">Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
<h5 class="">Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
<h6 class="">Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.</p>
Source: base/headings/_headings.scss, line 1

2.2 base.link Links

Hyperlinks are used to allow the user to navigate to other resources or to download a resource.

The order of link states are based on Eric Meyer's article: http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states

Examples
Default styling
This is a link to another web page.
:visited
A link that has already been visited.
This is a link to another web page.
:hover
A link that is being hovered over.
This is a link to another web page.
:focus
A link that has been given keyboard focus.
This is a link to another web page.
:active
A link that is being actively clicked.
This is a link to another web page. 
This is a <a href="#" class="[modifier class]">link to another web page</a>.
Source: base/links/_links.scss, line 1

2.3 base.grouping Grouping content

Source: base/grouping/_grouping.scss, line 5

2.3.1 base.grouping.p Body copy

The default font-size and line-height properties are applied to the <body> element and all paragraphs. In addition, <p> (paragraphs) receive a top and bottom margin.

Example

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p 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>
Source: base/grouping/_grouping.scss, line 155

2.3.2 base.grouping.lists Lists

Source: base/grouping/_grouping.scss, line 32

2.3.2.1 base.grouping.lists.ol Ordered list

The <ol> element is a list of items in which the order does explicitly matter.

Example
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol 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>
Source: base/grouping/_grouping.scss, line 47

2.3.2.2 base.grouping.lists.ul Unordered list

The <ul> element is a list of items in which the order does not explicitly matter.

Example
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<ul 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>
Source: base/grouping/_grouping.scss, line 38

2.3.2.3 base.grouping.lists.dl Description list

The <dl> element is a list of terms with their associated descriptions.

Example
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl 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>
Source: base/grouping/_grouping.scss, line 56

2.3.3 base.grouping.blockquote Block quotes

The <blockquote> element is for quoting blocks of content from another source within your document. Wrap the <blockquote> around any HTML as the quote. For straight quotes, we recommend a <p>.

Optionally, add a <footer> to identify the source of the quote, wrapping the name of the source work in <cite>.

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

J. Smith in Source Title
<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>
Source: base/grouping/_grouping.scss, line 12

2.3.4 base.grouping.figure Figures

The <figure> element can be used to annotate illustrations, diagrams, photos, code listings, etc.

Optionally, a <figcaption> element inside the <figure> represents the caption of the figure.

Example
An illustration, diagram, photo, code listing, etc.
An illustration, diagram, photo, code listing, etc.
Figure 1
<figure class="">
  An illustration, diagram, photo, code listing, etc.
</figure>

<figure class="">
  An illustration, diagram, photo, code listing, etc.
  <figcaption>Figure 1</figcaption>
</figure>
Source: base/grouping/_grouping.scss, line 115

2.3.5 base.grouping.hr Horizontal rule

The <hr> element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

Example

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
dolor id nibh ultricies vehicula.</p>

<hr class="">

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
Source: base/grouping/_grouping.scss, line 136

2.3.6 base.grouping.pre Preformatted text

The <pre> element represents a block of preformatted text, such as fragments of computer code, ASCII art, etc.

Example
The following text is preformatted: 
(ノ゜Д゜)ノ ︵ ┻━┻

The following text is preformatted:
<pre class="">
(ノ゜Д゜)ノ ︵ ┻━┻
</pre>
Source: base/grouping/_grouping.scss, line 173

2.4 base.table Tables

The <table> element displays tabular data in rows, columns, and cells.

Example
Optional table caption.
# First Name Last Name Username
1 Jane Doe jdoe
2 Jamie Morgan jmorgan
3 Jacob Smith jsmith
# First Name Last Name Username 
<table class="">
  <caption>Optional table caption.</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Jane</td>
      <td>Doe</td>
      <td>jdoe</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jamie</td>
      <td>Morgan</td>
      <td>jmorgan</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Jacob</td>
      <td>Smith</td>
      <td>jsmith</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </tfoot>
</table>
Source: base/tables/_tables.scss, line 1

2.5 base.text Text-level semantics

The elements in this section give semantics to inline text.

Source: base/text/_text.scss, line 1

2.5.1 base.text.b Bold

The <strong> element or the <b> element is for emphasizing a snippet of text with a heavier font-weight.

Feel free to use <b> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance.

Example
The following snippets of text are rendered as bold text. Bold text nested inside italic text should still be bold. 
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>.
Source: base/text/_text.scss, line 33

2.5.2 base.text.i Italics

The <em> element or the <i> element is used for emphasizing a snippet of text with italics.

Feel free to use <i> element in HTML5. <i> is meant to convey voice, technical terms, etc.

Example
The following snippets of text are rendered as italic text. Italic text nested inside bold text should still be italic. 
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>.
Source: base/text/_text.scss, line 122

2.5.3 base.text.abbr Abbreviation / Acroynym

The <abbr> element makes the meanings of abbreviations and acronyms visible on hover.

Example
An abbreviation of the word attribute is attr. And HTML is an acroynm. 
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.
Source: base/text/_text.scss, line 9

2.5.4 base.text.cite Cite

The <cite> element represents a reference to a creative work.

Example

Who is your favorite doctor (in Doctor Who)?

Comment by Oli Walberg

<p>Who is your favorite doctor (in <cite class="">Doctor Who</cite>)?</p>

<p>Comment by <cite class=""><a href="#">Oli Walberg</a></cite></p>
Source: base/text/_text.scss, line 62

2.5.5 base.text.code Code

The <code> element represents a fragment of computer code. The <var> element represents a variable. The <samp> element represents (sample) output from a program or computing system. The <kbd> element represents user input (typically keyboard input.)

Example

The code element represents a fragment of computer code.

There are n flavors of ice cream to be available for purchase!

The computer said Too much cheese in tray two but I didn't know what that meant.

To make George eat an apple, select File | Eat Apple…

<p>The <code 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>
Source: base/text/_text.scss, line 74

2.5.6 base.text.del Deleted text

The <del> element indicates blocks of text that have been deleted.

Example
This line of text is meant to be treated as deleted text. 
<del class="">This line of text is meant to be treated as deleted text.</del>
Source: base/text/_text.scss, line 97

2.5.7 base.text.dfn Definition

The <dfn> element represents the defining instance of a term.

Example

The GDO is a device that allows off-world teams to open the iris.

Teal'c activated his GDO and so Hammond ordered the iris to be opened.

<p>The <dfn 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>
Source: base/text/_text.scss, line 109

2.5.8 base.text.ins Inserted text

The <ins> element indicates additions to the document.

Example
This line of text is meant to be treated as an addition to the document. 
<ins class="">This line of text is meant to be treated as an addition to the
document.</ins>
Source: base/text/_text.scss, line 141

2.5.9 base.text.mark Marked text

The <mark> element highlights a run of text due to its relevance in another context.

Example
You can use the mark tag to highlight text like this. New! 
You can use the mark tag to <mark>highlight</mark> text like this.
<mark class="">New!</mark>
Source: base/text/_text.scss, line 153

2.5.10 base.text.q Quote

The <q> element represents an inline quote from another source. Longer quotes should use the <blockquote> element.

Example
The q element represents some phrasing content quoted from another source. 
<q 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>
Source: base/text/_text.scss, line 168

2.5.11 base.text.s Strikethrough text

The <s> element indicates blocks of text that are no longer relevant.

Example
This line of text is meant to be treated as no longer accurate. 
<s class="">This line of text is meant to be treated as no longer accurate.</s>
Source: base/text/_text.scss, line 181

2.5.12 base.text.small Small text

For de-emphasizing inline or blocks of text, use the <small> element to set text at 80% the size of the parent.

Example
This line of text is meant to be treated as fine print. 
<small class="">This line of text is meant to be treated as fine print.</small>
Source: base/text/_text.scss, line 193

2.5.13 base.text.sub Superscript / Subscript

The <sup> element represents a superscript and the <sub> element represents a subscript.

Example
Mlle Gwendoline wrote the equation f(x, n) = log4xn. 
<abbr>M<sup class="">lle</sup></abbr> Gwendoline wrote the equation <code>f(x, n) = log<sub class="">4</sub>x<sup class="">n</sup></code>.
Source: base/text/_text.scss, line 207

2.5.14 base.text.u Underlined text

To underline text use the <u> element. Not recommended since underlines are used by web browsers to style hyperlinks.

Example
This line of text will render as underlined 
<u class="">This line of text will render as underlined</u>
Source: base/text/_text.scss, line 234

2.6 base.embedded Embedded content

Source: base/embedded/_embedded.scss, line 1

2.6.1 base.embedded.img Image

An <img> element represents an image.

Example

An image that is inline with other text.

An image inside a figure.
<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>
Source: base/embedded/_embedded.scss, line 7

2.6.2 base.embedded.svg Scalable vector

A <svg> element represents an image encoded as a Scalable Vector Graphic.

Example

A svg image that is inline with other text.

A svg inside a figure.
<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>
Source: base/embedded/_embedded.scss, line 35