Skip to content

Soracom

Design System
Home Design System Elements Header

Header

dev dark-mode component-colors short-class-names

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>

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

Default  

<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="__content --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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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="__content --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  

<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="__content --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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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="__content --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 
<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>
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="__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. 
<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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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  

<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="__content --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="__content --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="__content --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="__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>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<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="__content --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="__content --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="__content --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="__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>

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' 
<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="__content --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="__content --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="__content --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="__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>
<ul class="ds-breadcrumb">
  <li>Home</li>
  <li>Page</li>
</ul>

Soracom

User console

  • Home
  • Page
<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="__content --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="__content --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="__content --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="__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>
<ul class="ds-breadcrumb">
  <li>Home</li>
  <li>Page</li>
</ul>
Use the default light style if data-coverage='jp' 
<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="__content --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="__content --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="__content --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="__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>
<ul class="ds-breadcrumb">
  <li>Home</li>
  <li>Page</li>
</ul>

Soracom

User console

  • Home
  • Page
<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="__content --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="__content --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="__content --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="__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>
<ul class="ds-breadcrumb">
  <li>Home</li>
  <li>Page</li>
</ul>
Copyright © 2015-2024 Soracom, Inc.
Last page update: June 30, 2022
679ed8df