9 kss-example

The examples.

9.1 kss-example-markup

The markup example.

default

<span class="kss-c-icon  kss-c-icon--type-drawer"></span>

<div class="kss-example-markup  kss-c-box  ">
  <!-- highlighted markup -->
  <pre><code class="hljs handlebars html"><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;kss-c-icon  kss-c-icon--type-drawer&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span></code></pre>
  <!-- highlighted markup -->
</div>

9.2 kss-example-variation

The example variation.

default

component-class-name

component description. (attention)

<article class="kss-example-variation  kss-c-box  ">
  <header class="kss-example-variation__header  kss-c-box">
    <code class="kss-example-variation__header__name  kss-c-text  kss-c-text--theme-code">component-class-name</code>
    <div class="kss-example-variation__header__description  kss-c-document  kss-c-document--theme-main">
      <p><code>component</code> description. (<strong>attention</strong>)</p>
    </div>
  </header>
  <div class="kss-example-variation__canvas  kss-c-box  kss-c-box--texture-transparent">
    <!-- rendered markup -->
    <span class="kss-c-icon  kss-c-icon--type-drawer"></span>
    <!-- rendered markup -->
  </div>
</article>