Reactive Graph - Design System

Horizontal Menu: Surface 2 

<div style="padding: var(--size-4);">
    <h1 id="nav-button" class="mexican-pink">
        Horizontal Menu
        <span class="token string" style="font-size: var(--font-size-2)">surface-2</span>
    </h1>
    <hr>
    <h3 class="celestial-blue">Simple</h3>
    <div style="padding: var(--size-4);">
        <nav class="horizontal-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">JSON</a></li>
                <li><a href="#python">Python</a></li>
                <li><a href="#rust">Rust</a></li>
                <li><a href="#toml">TOML</a></li>
                <li><a href="#typescript">TypeScript</a></li>
                <li><a href="#yaml">YAML</a></li>
            </ul>
        </nav>
    </div>
    <hr>
    <h3 class="celestial-blue">Square</h3>
    <div style="padding: var(--size-4);">
        <nav class="horizontal-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">JSON</a></li>
                <li><a href="#python">Python</a></li>
                <li><a href="#rust">Rust</a></li>
                <li><a href="#toml">TOML</a></li>
                <li><a href="#typescript">TypeScript</a></li>
                <li><a href="#yaml">YAML</a></li>
            </ul>
        </nav>
    </div>
    <hr>
    <h3 class="celestial-blue">Pills</h3>
    <div style="padding: var(--size-4);">
        <nav class="horizontal-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">JSON</a></li>
                <li><a href="#python">Python</a></li>
                <li><a href="#rust">Rust</a></li>
                <li><a href="#toml">TOML</a></li>
                <li><a href="#typescript">TypeScript</a></li>
                <li><a href="#yaml">YAML</a></li>
            </ul>
        </nav>
    </div>
    <hr>
    <h3 class="celestial-blue">Size 00</h3>
    <div style="padding: var(--size-4);">
        <nav class="horizontal-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">JSON</a></li>
                <li><a href="#python">Python</a></li>
                <li><a href="#rust">Rust</a></li>
                <li><a href="#toml">TOML</a></li>
                <li><a href="#typescript">TypeScript</a></li>
                <li><a href="#yaml">YAML</a></li>
            </ul>
        </nav>
    </div>
    <hr>
    <h3 class="celestial-blue">Size 0</h3>
    <div style="padding: var(--size-4);">
        <nav class="horizontal-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">JSON</a></li>
                <li><a href="#python">Python</a></li>
                <li><a href="#rust">Rust</a></li>
                <li><a href="#toml">TOML</a></li>
                <li><a href="#typescript">TypeScript</a></li>
                <li><a href="#yaml">YAML</a></li>
            </ul>
        </nav>
    </div>
    <hr>
    <h3 class="celestial-blue">Size 1</h3>
    <div style="padding: var(--size-4);">
        <nav class="horizontal-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">JSON</a></li>
                <li><a href="#python">Python</a></li>
                <li><a href="#rust">Rust</a></li>
                <li><a href="#toml">TOML</a></li>
                <li><a href="#typescript">TypeScript</a></li>
                <li><a href="#yaml">YAML</a></li>
            </ul>
        </nav>
    </div>
    <hr>
    <h3 class="celestial-blue">Size 2</h3>
    <div style="padding: var(--size-4);">
        <nav class="horizontal-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">JSON</a></li>
                <li><a href="#python">Python</a></li>
                <li><a href="#rust">Rust</a></li>
                <li><a href="#toml">TOML</a></li>
                <li><a href="#typescript">TypeScript</a></li>
                <li><a href="#yaml">YAML</a></li>
            </ul>
        </nav>
    </div>
    <hr>
    <h3 class="celestial-blue">Size 3</h3>
    <div style="padding: var(--size-4);">
        <nav class="horizontal-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">JSON</a></li>
                <li><a href="#python">Python</a></li>
                <li><a href="#rust">Rust</a></li>
                <li><a href="#toml">TOML</a></li>
                <li><a href="#typescript">TypeScript</a></li>
                <li><a href="#yaml">YAML</a></li>
            </ul>
        </nav>
    </div>
    <hr>
    <h3 class="celestial-blue">Size 4</h3>
    <div style="padding: var(--size-4);">
        <nav class="horizontal-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">JSON</a></li>
                <li><a href="#python">Python</a></li>
                <li><a href="#rust">Rust</a></li>
                <li><a href="#toml">TOML</a></li>
                <li><a href="#typescript">TypeScript</a></li>
                <li><a href="#yaml">YAML</a></li>
            </ul>
        </nav>
    </div>
</div>
 
<div style="padding: var(--size-4);">
  <h1 id="nav-button" class="mexican-pink">
    Horizontal Menu
    {{#if modifier}}<span class="token string" style="font-size: var(--font-size-2)">{{modifier}}</span>{{/if}}
  </h1>
  <hr>
  <h3 class="celestial-blue">Simple</h3>
  <div style="padding: var(--size-4);">
    <nav class="horizontal-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">JSON</a></li>
        <li><a href="#python">Python</a></li>
        <li><a href="#rust">Rust</a></li>
        <li><a href="#toml">TOML</a></li>
        <li><a href="#typescript">TypeScript</a></li>
        <li><a href="#yaml">YAML</a></li>
      </ul>
    </nav>
  </div>
  <hr>
  <h3 class="celestial-blue">Square</h3>
  <div style="padding: var(--size-4);">
    <nav class="horizontal-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">JSON</a></li>
        <li><a href="#python">Python</a></li>
        <li><a href="#rust">Rust</a></li>
        <li><a href="#toml">TOML</a></li>
        <li><a href="#typescript">TypeScript</a></li>
        <li><a href="#yaml">YAML</a></li>
      </ul>
    </nav>
  </div>
  <hr>
  <h3 class="celestial-blue">Pills</h3>
  <div style="padding: var(--size-4);">
    <nav class="horizontal-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">JSON</a></li>
        <li><a href="#python">Python</a></li>
        <li><a href="#rust">Rust</a></li>
        <li><a href="#toml">TOML</a></li>
        <li><a href="#typescript">TypeScript</a></li>
        <li><a href="#yaml">YAML</a></li>
      </ul>
    </nav>
  </div>
  <hr>
  <h3 class="celestial-blue">Size 00</h3>
  <div style="padding: var(--size-4);">
    <nav class="horizontal-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">JSON</a></li>
        <li><a href="#python">Python</a></li>
        <li><a href="#rust">Rust</a></li>
        <li><a href="#toml">TOML</a></li>
        <li><a href="#typescript">TypeScript</a></li>
        <li><a href="#yaml">YAML</a></li>
      </ul>
    </nav>
  </div>
  <hr>
  <h3 class="celestial-blue">Size 0</h3>
  <div style="padding: var(--size-4);">
    <nav class="horizontal-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">JSON</a></li>
        <li><a href="#python">Python</a></li>
        <li><a href="#rust">Rust</a></li>
        <li><a href="#toml">TOML</a></li>
        <li><a href="#typescript">TypeScript</a></li>
        <li><a href="#yaml">YAML</a></li>
      </ul>
    </nav>
  </div>
  <hr>
  <h3 class="celestial-blue">Size 1</h3>
  <div style="padding: var(--size-4);">
    <nav class="horizontal-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">JSON</a></li>
        <li><a href="#python">Python</a></li>
        <li><a href="#rust">Rust</a></li>
        <li><a href="#toml">TOML</a></li>
        <li><a href="#typescript">TypeScript</a></li>
        <li><a href="#yaml">YAML</a></li>
      </ul>
    </nav>
  </div>
  <hr>
  <h3 class="celestial-blue">Size 2</h3>
  <div style="padding: var(--size-4);">
    <nav class="horizontal-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">JSON</a></li>
        <li><a href="#python">Python</a></li>
        <li><a href="#rust">Rust</a></li>
        <li><a href="#toml">TOML</a></li>
        <li><a href="#typescript">TypeScript</a></li>
        <li><a href="#yaml">YAML</a></li>
      </ul>
    </nav>
  </div>
  <hr>
  <h3 class="celestial-blue">Size 3</h3>
  <div style="padding: var(--size-4);">
    <nav class="horizontal-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">JSON</a></li>
        <li><a href="#python">Python</a></li>
        <li><a href="#rust">Rust</a></li>
        <li><a href="#toml">TOML</a></li>
        <li><a href="#typescript">TypeScript</a></li>
        <li><a href="#yaml">YAML</a></li>
      </ul>
    </nav>
  </div>
  <hr>
  <h3 class="celestial-blue">Size 4</h3>
  <div style="padding: var(--size-4);">
    <nav class="horizontal-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">JSON</a></li>
        <li><a href="#python">Python</a></li>
        <li><a href="#rust">Rust</a></li>
        <li><a href="#toml">TOML</a></li>
        <li><a href="#typescript">TypeScript</a></li>
        <li><a href="#yaml">YAML</a></li>
      </ul>
    </nav>
  </div>
</div>
 
{
  "modifier": "surface-2"
}
  • Handle: @horizontal-menu--surface-2
  • Preview:
  • Filesystem Path: components/02-molecules/horizontal-menu/horizontal-menu.hbs

No notes defined.