<section class="kss-section-inline  kss-c-box  ">
  <header class="kss-section-inline__header  kss-c-box">
    <h2 class="kss-section-inline__label  kss-c-text">THEME</h2>
  </header>
  <div class="kss-section-inline__container  kss-c-box">
    <!-- nest -->
    <div class="kss-navi-icon  kss-c-box  ">
      <button class="kss-navi-icon__button  kss-c-button  is-kss-current" type="button" data-kss-theme-value="system">
        <svg class="kss-navi-icon__button__icon" width="20" height="20" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M41.008,19.488a9.5,9.5,0,1,1,9.5-9.5A9.5,9.5,0,0,1,41.008,19.488ZM41,2.875c0,1.741-.008,4.442-0.008,7.147s0,5.376.006,7.1A7.124,7.124,0,0,0,41,2.875Z" transform="translate(-31)"/></svg>
      </button>
      <button class="kss-navi-icon__button  kss-c-button" type="button" data-kss-theme-value="light">
        <svg class="kss-navi-icon__button__icon" width="20" height="20" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M19,10.993H17a1,1,0,1,1,0-2h2A1,1,0,1,1,19,10.993ZM15.652,5.752a1,1,0,0,1-1.414-1.414l1.414-1.414a1,1,0,1,1,1.414,1.414ZM10,14.994a5,5,0,1,1,5-5A5,5,0,0,1,10,14.994Zm0-8a3,3,0,1,0,3,3A3,3,0,0,0,10,7ZM9.993,4a1,1,0,0,1-1-1V1a1,1,0,1,1,2,0V3A1,1,0,0,1,9.993,4ZM4.348,5.753L2.934,4.339A1,1,0,0,1,4.348,2.924L5.763,4.339A1,1,0,1,1,4.348,5.753ZM4,9.993a1,1,0,0,1-1,1H1a1,1,0,1,1,0-2H3A1,1,0,0,1,4,9.993Zm0.338,4.244a1,1,0,1,1,1.414,1.414L4.339,17.066a1,1,0,1,1-1.414-1.414ZM9.993,16a1,1,0,0,1,1,1v2a1,1,0,1,1-2,0V17A1,1,0,0,1,9.993,16Zm5.669-1.761,1.414,1.414a1,1,0,1,1-1.414,1.414l-1.414-1.414A1,1,0,0,1,15.662,14.238Z" /></svg>
      </button>
      <button class="kss-navi-icon__button  kss-c-button" type="button" data-kss-theme-value="dark">
        <svg class="kss-navi-icon__button__icon" width="20" height="20" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M80.522,14.1A9.486,9.486,0,1,1,70.506.617l0.005,0.009A0.453,0.453,0,0,1,70.6.608a0.474,0.474,0,0,1,.474.474,0.466,0.466,0,0,1-.178.362A7.51,7.51,0,0,0,79.92,13.414l0,0a0.464,0.464,0,0,1,.216-0.058,0.474,0.474,0,0,1,.474.474A0.462,0.462,0,0,1,80.522,14.1Z" transform="translate(-62)"/></svg>
      </button>
    </div>
<!-- nest -->
  </div>
</section>

<article class="kss-section-main  kss-c-box  ">
  <!-- nest -->
  <header class="kss-heading-section  kss-heading-section--depth-3  kss-c-box  ">
    <h1 class="kss-heading-section__label  kss-c-text">
      <span class="kss-heading-section__label__reference  kss-c-text">9.9</span>
      <a class="kss-heading-section__label__link  kss-c-text__link" href="javascript:;">component-name</a>
    </h1>
    <p class="kss-heading-section__deprecated  kss-c-text">DEPRECATED!</p>
    <p class="kss-heading-section__experimental  kss-c-text">EXPERIMENTAL!</p>
    <div class="kss-heading-section__description  kss-c-document  kss-c-document--theme-main">
      <p>Lorem ipsum <strong>dolor sit amet</strong>, consectetur <b>adipiscing elit</b>,sed do eiusmod <em>tempor incididunt</em> ut labore et dolore <i>magna aliqua</i>.</p>
      <p>Lorem ipsum <u>dolor sit amet</u>, consectetur <del>adipiscing elit</del>,sed do eiusmod <s>tempor incididunt</s> ut labore et dolore <code>magna aliqua</code>.</p>
      <p>Lorem ipsum <span>dolor sit amet</span>, consectetur <a href="javascript:;">adipiscing elit</a>.</p>
    </div>
  </header><!-- nest -->
  <!-- contents -->
</article>

<aside class="kss-section-menu  kss-c-box  ">
  <header class="kss-section-menu__header  kss-c-box">
    <h2 class="kss-section-menu__label  kss-c-text">COMPONENTS</h2>
  </header>
  <div class="kss-section-menu__container  kss-c-box">
    <!-- nest -->
    <nav class="kss-navi-tree  kss-c-box  ">
      <ul class="kss-navi-tree__list  kss-c-list">
        <li class="kss-navi-tree__list__item  kss-c-list__item  kss-c-text">
          <span class="kss-navi-tree__list__item__reference  kss-c-text">1</span>
          <a class="kss-navi-tree__list__item__name  kss-c-text__link" href="javascript:;">
            component-name
          </a>
        </li>
        <li class="kss-navi-tree__list__item  kss-c-list__item  kss-c-text">
          <span class="kss-navi-tree__list__item__reference  kss-c-text">2</span>
          <a class="kss-navi-tree__list__item__name  kss-c-text__link" href="javascript:;">
            component-name
          </a>
          <span class="kss-navi-tree__list__item__deprecated  kss-c-text">
            DEPRECATED!
          </span>
        </li>
        <li class="kss-navi-tree__list__item  kss-c-list__item  kss-c-text">
          <span class="kss-navi-tree__list__item__reference  kss-c-text  is-kss-current">3</span>
          <a class="kss-navi-tree__list__item__name  kss-c-text__link" href="javascript:;">
            component-name
          </a>
          <!-- nest -->
          <nav class="kss-navi-tree  kss-c-box  ">
            <ul class="kss-navi-tree__list  kss-c-list">
              <li class="kss-navi-tree__list__item  kss-c-list__item  kss-c-text">
                <span class="kss-navi-tree__list__item__reference  kss-c-text">3.1</span>
                <a class="kss-navi-tree__list__item__name  kss-c-text__link" href="javascript:;">
                  component-child-name
                </a>
              </li>
              <li class="kss-navi-tree__list__item  kss-c-list__item  kss-c-text">
                <span class="kss-navi-tree__list__item__reference  kss-c-text">3.2</span>
                <a class="kss-navi-tree__list__item__name  kss-c-text__link" href="javascript:;">
                  component-child-name
                </a>
                <span class="kss-navi-tree__list__item__experimental  kss-c-text">
                  EXPERIMENTAL!
                </span>
              </li>
              <li class="kss-navi-tree__list__item  kss-c-list__item  kss-c-text">
                <span class="kss-navi-tree__list__item__reference  kss-c-text">3.3</span>
                <a class="kss-navi-tree__list__item__name  kss-c-text__link" href="javascript:;">
                  component-child-name
                </a>
              </li>
            </ul>
          </nav>
          <!-- nest -->
        </li>
        <li class="kss-navi-tree__list__item  kss-c-list__item  kss-c-text">
          <span class="kss-navi-tree__list__item__reference  kss-c-text">4</span>
          <a class="kss-navi-tree__list__item__name  kss-c-text__link" href="javascript:;">
            component-name
          </a>
        </li>
      </ul>
    </nav>
<!-- nest -->
  </div>
</aside>