- Home
- Design system
- Elements
- Header
Header
Options
Basic usage
Contents are left aligned in the header by default.
Default header with logo
<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>
Menu button
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="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
<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
<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>
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="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"
<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
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="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>