- Home
- Design system
- Elements
- 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>Menu button
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
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>