Reactive Graph - Design System

Vertical Menu: Surface 2 

<div style="padding: var(--size-4);">
    <h1 id="nav-button" class="mexican-pink">
        Vertical Menu
        <span class="token string" style="font-size: var(--font-size-2)">surface-2</span>
    </h1>
    <hr>
    <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;">
        <div>
            <h3 class="celestial-blue">Simple</h3>
            <nav class="vertical-menu surface-2">
                <ul>
                    <li><a href="#diff">Diff</a></li>
                    <li><a href="#java">Java</a></li>
                    <li><a href="#javascript">JavaScript</a></li>
                    <li><a href="#json"><i class="ti ti-json"></i> JSON</a></li>
                    <li><a href="#python"><i class="ti ti-brand-python"></i> Python</a></li>
                    <li><a href="#rust"><i class="ti ti-brand-rust"></i> Rust</a></li>
                    <li><a href="#toml"><i class="ti ti-toml"></i> TOML</a></li>
                    <li><a href="#typescript"><i class="ti ti-brand-typescript"></i> TypeScript</a></li>
                    <li><a href="#yaml">YAML</a></li>
                </ul>
            </nav>
        </div>
        <div>
            <h3 class="celestial-blue">Square</h3>
            <nav class="vertical-menu square surface-2">
                <ul>
                    <li><a href="#diff">Diff</a></li>
                    <li><a href="#java">Java</a></li>
                    <li><a href="#javascript">JavaScript</a></li>
                    <li><a href="#json"><i class="ti ti-json"></i> JSON</a></li>
                    <li><a href="#python"><i class="ti ti-brand-python"></i> Python</a></li>
                    <li><a href="#rust"><i class="ti ti-brand-rust"></i> Rust</a></li>
                    <li><a href="#toml"><i class="ti ti-toml"></i> TOML</a></li>
                    <li><a href="#typescript"><i class="ti ti-brand-typescript"></i> TypeScript</a></li>
                    <li><a href="#yaml">YAML</a></li>
                </ul>
            </nav>
        </div>
        <div>
            <h3 class="celestial-blue">Pills</h3>
            <nav class="vertical-menu pills surface-2">
                <ul>
                    <li><a href="#diff">Diff</a></li>
                    <li><a href="#java">Java</a></li>
                    <li><a href="#javascript">JavaScript</a></li>
                    <li><a href="#json"><i class="ti ti-json"></i> JSON</a></li>
                    <li><a href="#python"><i class="ti ti-brand-python"></i> Python</a></li>
                    <li><a href="#rust"><i class="ti ti-brand-rust"></i> Rust</a></li>
                    <li><a href="#toml"><i class="ti ti-toml"></i> TOML</a></li>
                    <li><a href="#typescript"><i class="ti ti-brand-typescript"></i> TypeScript</a></li>
                    <li><a href="#yaml">YAML</a></li>
                </ul>
            </nav>
        </div>
        <div>
            <h3 class="celestial-blue">Size 00</h3>
            <nav class="vertical-menu square size-00 surface-2">
                <ul>
                    <li><a href="#diff">Diff</a></li>
                    <li><a href="#java">Java</a></li>
                    <li><a href="#javascript">JavaScript</a></li>
                    <li><a href="#json"><i class="ti ti-json"></i> JSON</a></li>
                    <li><a href="#python"><i class="ti ti-brand-python"></i> Python</a></li>
                    <li><a href="#rust"><i class="ti ti-brand-rust"></i> Rust</a></li>
                    <li><a href="#toml"><i class="ti ti-toml"></i> TOML</a></li>
                    <li><a href="#typescript"><i class="ti ti-brand-typescript"></i> TypeScript</a></li>
                    <li><a href="#yaml">YAML</a></li>
                </ul>
            </nav>
        </div>
        <div>
            <h3 class="celestial-blue">Size 0</h3>
            <nav class="vertical-menu square size-0 surface-2">
                <ul>
                    <li><a href="#diff">Diff</a></li>
                    <li><a href="#java">Java</a></li>
                    <li><a href="#javascript">JavaScript</a></li>
                    <li><a href="#json"><i class="ti ti-json"></i> JSON</a></li>
                    <li><a href="#python"><i class="ti ti-brand-python"></i> Python</a></li>
                    <li><a href="#rust"><i class="ti ti-brand-rust"></i> Rust</a></li>
                    <li><a href="#toml"><i class="ti ti-toml"></i> TOML</a></li>
                    <li><a href="#typescript"><i class="ti ti-brand-typescript"></i> TypeScript</a></li>
                    <li><a href="#yaml">YAML</a></li>
                </ul>
            </nav>
        </div>
        <div>
            <h3 class="celestial-blue">Size 1</h3>
            <nav class="vertical-menu square size-1 surface-2">
                <ul>
                    <li><a href="#diff">Diff</a></li>
                    <li><a href="#java">Java</a></li>
                    <li><a href="#javascript">JavaScript</a></li>
                    <li><a href="#json"><i class="ti ti-json"></i> JSON</a></li>
                    <li><a href="#python"><i class="ti ti-brand-python"></i> Python</a></li>
                    <li><a href="#rust"><i class="ti ti-brand-rust"></i> Rust</a></li>
                    <li><a href="#toml"><i class="ti ti-toml"></i> TOML</a></li>
                    <li><a href="#typescript"><i class="ti ti-brand-typescript"></i> TypeScript</a></li>
                    <li><a href="#yaml">YAML</a></li>
                </ul>
            </nav>
        </div>
        <div>
            <h3 class="celestial-blue">Size 2</h3>
            <nav class="vertical-menu square size-2 surface-2">
                <ul>
                    <li><a href="#diff">Diff</a></li>
                    <li><a href="#java">Java</a></li>
                    <li><a href="#javascript">JavaScript</a></li>
                    <li><a href="#json"><i class="ti ti-json"></i> JSON</a></li>
                    <li><a href="#python"><i class="ti ti-brand-python"></i> Python</a></li>
                    <li><a href="#rust"><i class="ti ti-brand-rust"></i> Rust</a></li>
                    <li><a href="#toml"><i class="ti ti-toml"></i> TOML</a></li>
                    <li><a href="#typescript"><i class="ti ti-brand-typescript"></i> TypeScript</a></li>
                    <li><a href="#yaml">YAML</a></li>
                </ul>
            </nav>
        </div>
        <div>
            <h3 class="celestial-blue">Size 3</h3>
            <nav class="vertical-menu square size-3 surface-2">
                <ul>
                    <li><a href="#diff">Diff</a></li>
                    <li><a href="#java">Java</a></li>
                    <li><a href="#javascript">JavaScript</a></li>
                    <li><a href="#json"><i class="ti ti-json"></i> JSON</a></li>
                    <li><a href="#python"><i class="ti ti-brand-python"></i> Python</a></li>
                    <li><a href="#rust"><i class="ti ti-brand-rust"></i> Rust</a></li>
                    <li><a href="#toml"><i class="ti ti-toml"></i> TOML</a></li>
                    <li><a href="#typescript"><i class="ti ti-brand-typescript"></i> TypeScript</a></li>
                    <li><a href="#yaml">YAML</a></li>
                </ul>
            </nav>
        </div>
        <div>
            <h3 class="celestial-blue">Size 4</h3>
            <nav class="vertical-menu square size-4 surface-2">
                <ul>
                    <li><a href="#diff">Diff</a></li>
                    <li><a href="#java">Java</a></li>
                    <li><a href="#javascript">JavaScript</a></li>
                    <li><a href="#json"><i class="ti ti-json"></i> JSON</a></li>
                    <li><a href="#python"><i class="ti ti-brand-python"></i> Python</a></li>
                    <li><a href="#rust"><i class="ti ti-brand-rust"></i> Rust</a></li>
                    <li><a href="#toml"><i class="ti ti-toml"></i> TOML</a></li>
                    <li><a href="#typescript"><i class="ti ti-brand-typescript"></i> TypeScript</a></li>
                    <li><a href="#yaml">YAML</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>
 
<div style="padding: var(--size-4);">
  <h1 id="nav-button" class="mexican-pink">
    Vertical Menu
    {{#if modifier}}<span class="token string" style="font-size: var(--font-size-2)">{{modifier}}</span>{{/if}}
  </h1>
  <hr>
  <div style="padding: var(--size-4); display: grid; gap: var(--size-4); grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;">
    <div>
      <h3 class="celestial-blue">Simple</h3>
      <nav class="vertical-menu {{#if modifier}}{{modifier}}{{/if}}">
        <ul>
          <li><a href="#diff">Diff</a></li>
          <li><a href="#java">Java</a></li>
          <li><a href="#javascript">JavaScript</a></li>
          <li><a href="#json"><i class="ti ti-json"></i> JSON</a></li>
          <li><a href="#python"><i class="ti ti-brand-python"></i> Python</a></li>
          <li><a href="#rust"><i class="ti ti-brand-rust"></i> Rust</a></li>
          <li><a href="#toml"><i class="ti ti-toml"></i> TOML</a></li>
          <li><a href="#typescript"><i class="ti ti-brand-typescript"></i> TypeScript</a></li>
          <li><a href="#yaml">YAML</a></li>
        </ul>
      </nav>
    </div>
    <div>
      <h3 class="celestial-blue">Square</h3>
      <nav class="vertical-menu square {{#if modifier}}{{modifier}}{{/if}}">
        <ul>
          <li><a href="#diff">Diff</a></li>
          <li><a href="#java">Java</a></li>
          <li><a href="#javascript">JavaScript</a></li>
          <li><a href="#json"><i class="ti ti-json"></i> JSON</a></li>
          <li><a href="#python"><i class="ti ti-brand-python"></i> Python</a></li>
          <li><a href="#rust"><i class="ti ti-brand-rust"></i> Rust</a></li>
          <li><a href="#toml"><i class="ti ti-toml"></i> TOML</a></li>
          <li><a href="#typescript"><i class="ti ti-brand-typescript"></i> TypeScript</a></li>
          <li><a href="#yaml">YAML</a></li>
        </ul>
      </nav>
    </div>
    <div>
      <h3 class="celestial-blue">Pills</h3>
      <nav class="vertical-menu pills {{#if modifier}}{{modifier}}{{/if}}">
        <ul>
          <li><a href="#diff">Diff</a></li>
          <li><a href="#java">Java</a></li>
          <li><a href="#javascript">JavaScript</a></li>
          <li><a href="#json"><i class="ti ti-json"></i> JSON</a></li>
          <li><a href="#python"><i class="ti ti-brand-python"></i> Python</a></li>
          <li><a href="#rust"><i class="ti ti-brand-rust"></i> Rust</a></li>
          <li><a href="#toml"><i class="ti ti-toml"></i> TOML</a></li>
          <li><a href="#typescript"><i class="ti ti-brand-typescript"></i> TypeScript</a></li>
          <li><a href="#yaml">YAML</a></li>
        </ul>
      </nav>
    </div>
    <div>
      <h3 class="celestial-blue">Size 00</h3>
      <nav class="vertical-menu square size-00 {{#if modifier}}{{modifier}}{{/if}}">
        <ul>
          <li><a href="#diff">Diff</a></li>
          <li><a href="#java">Java</a></li>
          <li><a href="#javascript">JavaScript</a></li>
          <li><a href="#json"><i class="ti ti-json"></i> JSON</a></li>
          <li><a href="#python"><i class="ti ti-brand-python"></i> Python</a></li>
          <li><a href="#rust"><i class="ti ti-brand-rust"></i> Rust</a></li>
          <li><a href="#toml"><i class="ti ti-toml"></i> TOML</a></li>
          <li><a href="#typescript"><i class="ti ti-brand-typescript"></i> TypeScript</a></li>
          <li><a href="#yaml">YAML</a></li>
        </ul>
      </nav>
    </div>
    <div>
      <h3 class="celestial-blue">Size 0</h3>
      <nav class="vertical-menu square size-0 {{#if modifier}}{{modifier}}{{/if}}">
        <ul>
          <li><a href="#diff">Diff</a></li>
          <li><a href="#java">Java</a></li>
          <li><a href="#javascript">JavaScript</a></li>
          <li><a href="#json"><i class="ti ti-json"></i> JSON</a></li>
          <li><a href="#python"><i class="ti ti-brand-python"></i> Python</a></li>
          <li><a href="#rust"><i class="ti ti-brand-rust"></i> Rust</a></li>
          <li><a href="#toml"><i class="ti ti-toml"></i> TOML</a></li>
          <li><a href="#typescript"><i class="ti ti-brand-typescript"></i> TypeScript</a></li>
          <li><a href="#yaml">YAML</a></li>
        </ul>
      </nav>
    </div>
    <div>
      <h3 class="celestial-blue">Size 1</h3>
      <nav class="vertical-menu square size-1 {{#if modifier}}{{modifier}}{{/if}}">
        <ul>
          <li><a href="#diff">Diff</a></li>
          <li><a href="#java">Java</a></li>
          <li><a href="#javascript">JavaScript</a></li>
          <li><a href="#json"><i class="ti ti-json"></i> JSON</a></li>
          <li><a href="#python"><i class="ti ti-brand-python"></i> Python</a></li>
          <li><a href="#rust"><i class="ti ti-brand-rust"></i> Rust</a></li>
          <li><a href="#toml"><i class="ti ti-toml"></i> TOML</a></li>
          <li><a href="#typescript"><i class="ti ti-brand-typescript"></i> TypeScript</a></li>
          <li><a href="#yaml">YAML</a></li>
        </ul>
      </nav>
    </div>
    <div>
      <h3 class="celestial-blue">Size 2</h3>
      <nav class="vertical-menu square size-2 {{#if modifier}}{{modifier}}{{/if}}">
        <ul>
          <li><a href="#diff">Diff</a></li>
          <li><a href="#java">Java</a></li>
          <li><a href="#javascript">JavaScript</a></li>
          <li><a href="#json"><i class="ti ti-json"></i> JSON</a></li>
          <li><a href="#python"><i class="ti ti-brand-python"></i> Python</a></li>
          <li><a href="#rust"><i class="ti ti-brand-rust"></i> Rust</a></li>
          <li><a href="#toml"><i class="ti ti-toml"></i> TOML</a></li>
          <li><a href="#typescript"><i class="ti ti-brand-typescript"></i> TypeScript</a></li>
          <li><a href="#yaml">YAML</a></li>
        </ul>
      </nav>
    </div>
    <div>
      <h3 class="celestial-blue">Size 3</h3>
      <nav class="vertical-menu square size-3 {{#if modifier}}{{modifier}}{{/if}}">
        <ul>
          <li><a href="#diff">Diff</a></li>
          <li><a href="#java">Java</a></li>
          <li><a href="#javascript">JavaScript</a></li>
          <li><a href="#json"><i class="ti ti-json"></i> JSON</a></li>
          <li><a href="#python"><i class="ti ti-brand-python"></i> Python</a></li>
          <li><a href="#rust"><i class="ti ti-brand-rust"></i> Rust</a></li>
          <li><a href="#toml"><i class="ti ti-toml"></i> TOML</a></li>
          <li><a href="#typescript"><i class="ti ti-brand-typescript"></i> TypeScript</a></li>
          <li><a href="#yaml">YAML</a></li>
        </ul>
      </nav>
    </div>
    <div>
      <h3 class="celestial-blue">Size 4</h3>
      <nav class="vertical-menu square size-4 {{#if modifier}}{{modifier}}{{/if}}">
        <ul>
          <li><a href="#diff">Diff</a></li>
          <li><a href="#java">Java</a></li>
          <li><a href="#javascript">JavaScript</a></li>
          <li><a href="#json"><i class="ti ti-json"></i> JSON</a></li>
          <li><a href="#python"><i class="ti ti-brand-python"></i> Python</a></li>
          <li><a href="#rust"><i class="ti ti-brand-rust"></i> Rust</a></li>
          <li><a href="#toml"><i class="ti ti-toml"></i> TOML</a></li>
          <li><a href="#typescript"><i class="ti ti-brand-typescript"></i> TypeScript</a></li>
          <li><a href="#yaml">YAML</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>
 
{
  "modifier": "surface-2"
}
  • Handle: @vertical-menu--surface-2
  • Preview:
  • Filesystem Path: components/02-molecules/vertical-menu/vertical-menu.hbs

No notes defined.