Skip to content
MENU

Soracom

Design System

Header

Options 

Basic usage 

Contents are left aligned in the header by default.

<header class="ds-header">
  <h1 class="ds-logo">Soracom</h1>
</header>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<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
<header class="ds-header">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
</header>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<header class="ds-header">
  <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
<header class="ds-header">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="ds-header__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-basic-user">
      <span>sorao@soracom.jp</span>
    </button>
  </aside>
</header>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<header class="ds-header">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="ds-header__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-basic-user">
      <span>sorao@soracom.jp</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.

<header class="ds-header--color-celeste">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
</header>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<header class="ds-header--color-celeste">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
</header>
<header class="ds-header--color-celeste-lighter">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="ds-header__controls">
    <button class="ds-button --plain --icon-coverage --color-celeste-dark">
      <span>Japan</span>
    </button>
    <button class="ds-button --plain --icon-support --color-celeste-dark">
      <span>Support</span>
    </button>
    <button class="ds-button --primary --icon-basic-user --color-celeste-shade">
      <span>sorao@soracom.jp</span>
    </button>
  </aside>
</header>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<header class="ds-header--color-celeste-lighter">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="ds-header__controls">
    <button class="ds-button --plain --icon-coverage --color-celeste-dark">
      <span>Japan</span>
    </button>
    <button class="ds-button --plain --icon-support --color-celeste-dark">
      <span>Support</span>
    </button>
    <button class="ds-button --primary --icon-basic-user --color-celeste-shade">
      <span>sorao@soracom.jp</span>
    </button>
  </aside>
</header>

Styles 

Custom styles exist for specific use cases.

Dark style 

Example of --dark which remains dark in dark/light mode
<header class="ds-header--dark">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
</header>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<header class="ds-header--dark">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
</header>

Examples 

Example of --dark which remains dark in dark/light mode
<header class="ds-header--dark">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="ds-header__controls">
    <details class="ds-menubutton">
      <summary>
        <span class="ds-button --primary --icon-settings">
          <span>Button label</span>
        </span>
      </summary>
      <div class="ds-menubutton__content">
        <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>

Soracom

User console

<header class="ds-header--dark">
  <h1 class="ds-logo">Soracom</h1>
  <h2 class="ds-text">User console</h2>
  <aside class="ds-header__controls">
    <details class="ds-menubutton">
      <summary>
        <span class="ds-button --primary --icon-settings">
          <span>Button label</span>
        </span>
      </summary>
      <div class="ds-menubutton__content">
        <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>