Soracom

Design System
  1. Home
  2. Design system
  3. Elements
  4. Header

Header

Options

Basic usage

Contents are left aligned in the header by default.

Default header with logo

html
Copy 
<header class="ds-header">
  <h1 class="ds-logo">Soracom</h1>
</header>

Text

ds-text elements have specific styling within the header.

Default header with logo and text

html
Copy 
<header class="ds-header">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
</header>

The primary menu button can be included using the following specific styling.

Default

html
Copy 
<header class="ds-header">
  <details class="ds-menubutton" role="menu">
    <summary>
      <span class="ds-button --menu --hide-label">
        <span>Menu</span>
      </span>
    </summary>
    <div class="ds-menu --mid">
      <ul>
        <li><a>...</a></li>
        <li><a>...</a></li>
      </ul>
    </div>
  </details>
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
</header>

Animated menu label

html
Copy 
<header class="ds-header">
  <details class="ds-menubutton" role="menu">
    <summary>
      <span class="ds-button --menu --collapse-label">
        <span>Menu</span>
      </span>
    </summary>
    <div class="ds-menu --mid">
      <ul>
        <li><a>...</a></li>
        <li><a>...</a></li>
      </ul>
    </div>
  </details>
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
</header>

Controls

Controls can include components such as buttons/selects and are right aligned in the header.

Default header with logo, text and controls

html
Copy 
<header class="ds-header">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="__controls">
    <button class="ds-button --plain --icon-coverage">
      <span>Japan</span>
    </button>
    <button class="ds-button --plain --icon-support">
      <span>Support</span>
    </button>
    <button class="ds-button --plain --icon-settings">
      <span>Settings</span>
    </button>
  </aside>
</header>

Component color

Header supports component color, and automatically sets the color of the logo and text based on the chosen color in both dark and light mode to optimize legibility.

In most cases you should use either the default (light) header or dark style header – or use the data-coverage attribute to switch styles.

html
Copy 
<header class="ds-header --color-purple-darker">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="__controls">
    <button class="ds-button --plain --icon-coverage">
      <span>Japan</span>
    </button>
    <button class="ds-button --plain --icon-support">
      <span>Support</span>
    </button>
    <button class="ds-button --plain --icon-settings">
      <span>Settings</span>
    </button>
  </aside>
</header>
<header class="ds-header --color-yellow-dark">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="__controls">
    <button class="ds-button --plain --icon-coverage">
      <span>Japan</span>
    </button>
    <button class="ds-button --plain --icon-support">
      <span>Support</span>
    </button>
    <button class="ds-button --plain --icon-settings">
      <span>Settings</span>
    </button>
  </aside>
</header>
<header class="ds-header --color-celeste">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="__controls">
    <button class="ds-button --plain --icon-coverage">
      <span>Japan</span>
    </button>
    <button class="ds-button --plain --icon-support">
      <span>Support</span>
    </button>
    <button class="ds-button --plain --icon-settings">
      <span>Settings</span>
    </button>
  </aside>
</header>
<header class="ds-header --color-red-lighter">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="__controls">
    <button class="ds-button --plain --icon-coverage">
      <span>Japan</span>
    </button>
    <button class="ds-button --plain --icon-support">
      <span>Support</span>
    </button>
    <button class="ds-button --plain --icon-settings">
      <span>Settings</span>
    </button>
  </aside>
</header>
<header class="ds-header --color-blue-lightest">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="__controls">
    <button class="ds-button --plain --icon-coverage">
      <span>Japan</span>
    </button>
    <button class="ds-button --plain --icon-support">
      <span>Support</span>
    </button>
    <button class="ds-button --plain --icon-settings">
      <span>Settings</span>
    </button>
  </aside>
</header>

Styles

Custom styles exist for specific use cases.

Dark style

html
Copy 
<header class="ds-header --dark">
  <details class="ds-menubutton" role="menu">
    <summary>
      <span class="ds-button --menu --primary --collapse-label">
        <span>Menu</span>
      </span>
    </summary>
    <div class="ds-menu --mid">
      <ul>
        <li><a>...</a></li>
        <li><a>...</a></li>
      </ul>
    </div>
  </details>
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="__controls">
    <details class="ds-menubutton" role="menu">
      <summary>
        <span class="ds-button --icon-coverage --plain">
          <span>Global</span>
          <i class="ds-icon--icon-ui-arrow-down"></i>
        </span>
      </summary>
      <div class="ds-menu --narrow">
        <ul>
          <li><a href="#" data-coverage-value="jp">Japan</a></li>
          <li><a href="#" data-coverage-value="g">Global</a></li>
        </ul>
      </div>
    </details>
    <details class="ds-menubutton ui-menu__root" role="menu">
      <summary>
        <span class="ds-button --icon-support --plain">
          <span>Support</span>
          <i class="ds-icon--icon-ui-arrow-down"></i>
        </span>
      </summary>
      <div class="ds-menu --narrow">
        <ul>
          <li><a>...</a></li>
          <li><a>...</a></li>
        </ul>
      </div>
    </details>
    <details class="ds-menubutton">
      <summary>
        <span class="ds-button --primary --icon-settings">
          <span>Settings</span>
          <i class="ds-icon--icon-ui-arrow-down"></i>
        </span>
      </summary>
      <div class="ds-menu">
        <ul>
          <li>
            <a href="#">Change email</a>
          </li>
          <li>
            <a href="#">Contact information</a>
          </li>
          <li>
            <a href="#">Billing</a>
          </li>
          <li>
            <a href="#">Payment settings</a>
          </li>
        </ul>
      </div>
    </details>
  </aside>
</header>

User console style

If the ds-header has a data-coverage attribute, the following styles will be applied.

Use the dark style if data-coverage: "g"

html
Copy 
<header class="ds-header" data-coverage="g">
  <details class="ds-menubutton" role="menu">
    <summary>
      <span
        class="ds-button --menu --primary --collapse-label --color-celeste-lighter"
      >
        <span>Menu</span>
      </span>
    </summary>
    <div class="ds-menu --mid">
      <ul>
        <li><a>...</a></li>
        <li><a>...</a></li>
      </ul>
    </div>
  </details>
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="__controls">
    <details class="ds-menubutton" role="menu">
      <summary>
        <span class="ds-button --icon-coverage --plain">
          <span>Global</span>
          <i class="ds-icon--icon-ui-arrow-down"></i>
        </span>
      </summary>
      <div class="ds-menu --narrow">
        <ul>
          <li><a href="#" data-coverage-value="jp">Japan</a></li>
          <li><a href="#" data-coverage-value="g">Global</a></li>
        </ul>
      </div>
    </details>
    <details class="ds-menubutton ui-menu__root" role="menu">
      <summary>
        <span class="ds-button --icon-support --plain">
          <span>Support</span>
          <i class="ds-icon--icon-ui-arrow-down"></i>
        </span>
      </summary>
      <div class="ds-menu --narrow">
        <ul>
          <li><a>...</a></li>
          <li><a>...</a></li>
        </ul>
      </div>
    </details>
    <details class="ds-menubutton">
      <summary>
        <span class="ds-button --plain --icon-user">
          <span>Settings</span>
          <i class="ds-icon--icon-ui-arrow-down"></i>
        </span>
      </summary>
      <div class="ds-menu">
        <ul>
          <li>
            <a href="#">Change email</a>
          </li>
          <li>
            <a href="#">Contact information</a>
          </li>
          <li>
            <a href="#">Billing</a>
          </li>
          <li>
            <a href="#">Payment settings</a>
          </li>
        </ul>
      </div>
    </details>
  </aside>
</header>
<ul class="ds-breadcrumb">
  <li>Home</li>
  <li>Page</li>
</ul>

Soracom

User console

  • Home
  • Page

Use the default light style if data-coverage: "jp"

html
Copy 
<header class="ds-header" data-coverage="jp">
  <details class="ds-menubutton" role="menu">
    <summary>
      <span
        class="ds-button --menu --primary --collapse-label --color-celeste-lighter"
      >
        <span>Menu</span>
      </span>
    </summary>
    <div class="ds-menu --mid">
      <ul>
        <li><a>...</a></li>
        <li><a>...</a></li>
      </ul>
    </div>
  </details>
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="__controls">
    <details class="ds-menubutton" role="menu">
      <summary>
        <span class="ds-button --icon-coverage --plain">
          <span>Japan</span>
          <i class="ds-icon--icon-ui-arrow-down"></i>
        </span>
      </summary>
      <div class="ds-menu --narrow">
        <ul>
          <li><a href="#" data-coverage-value="jp">Japan</a></li>
          <li><a href="#" data-coverage-value="g">Global</a></li>
        </ul>
      </div>
    </details>
    <details class="ds-menubutton ui-menu__root" role="menu">
      <summary>
        <span class="ds-button --icon-support --plain">
          <span>Support</span>
          <i class="ds-icon--icon-ui-arrow-down"></i>
        </span>
      </summary>
      <div class="ds-menu --narrow">
        <ul>
          <li><a>...</a></li>
          <li><a>...</a></li>
        </ul>
      </div>
    </details>
    <details class="ds-menubutton">
      <summary>
        <span class="ds-button --plain --icon-user">
          <span>Settings</span>
          <i class="ds-icon--icon-ui-arrow-down"></i>
        </span>
      </summary>
      <div class="ds-menu">
        <ul>
          <li>
            <a href="#">Change email</a>
          </li>
          <li>
            <a href="#">Contact information</a>
          </li>
          <li>
            <a href="#">Billing</a>
          </li>
          <li>
            <a href="#">Payment settings</a>
          </li>
        </ul>
      </div>
    </details>
  </aside>
</header>
<ul class="ds-breadcrumb">
  <li>Home</li>
  <li>Page</li>
</ul>

Soracom

User console

  • Home
  • Page