Ribbons
Ribbon Slots
Top Ribbon
Top Ribbon
Top Ribbon
HTML
<div class="ss-c-ribbon ss-c-ribbon--top">
<div class="ss-c-ribbon__slot--horizontal_left">Top Ribbon</div>
</div>
<br />
<div class="ss-c-ribbon ss-c-ribbon--top">
<div class="ss-c-ribbon__slot--horizontal_center">Top Ribbon</div>
</div>
<br />
<div class="ss-c-ribbon ss-c-ribbon--top">
<div class="ss-c-ribbon__slot--horizontal_right">Top Ribbon</div>
</div>Ribbon Slots with Dropdown (Ribbon Panel)
Top Ribbon
Top Ribbon
Top Ribbon
HTML
<div class="ss-c-ribbon ss-c-ribbon--top">
<div class="ss-c-ribbon__slot--horizontal_left">
<details>
<summary class="ss-c-flex ss-c-justify--center ss-c-align--center">
Top Ribbon
<span class="ss-c-i" aria-hidden="true">▾</span>
</summary>
<div class="ss-c-ribbon__panel ss-c-left">
<h3 class="ss-c-ribbon__panel__section__header">Projects</h3>
<ul class="ss-c-ribbon__panel__section">
<li class="ss-c-ribbon__panel__section__item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="ss-c-ribbon__panel__section__item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
<hr class="ss-c-ribbon__panel__line" />
<h3 class="ss-c-ribbon__panel__section__header">Studies</h3>
<ul class="ss-c-ribbon__panel__section">
<li class="ss-c-ribbon__panel__section__item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="ss-c-ribbon__panel__section__item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</div>
</details>
</div>
</div>
<br />
<div class="ss-c-ribbon ss-c-ribbon--top">
<div class="ss-c-ribbon__slot--horizontal_center">
<details>
<summary class="ss-c-flex ss-c-justify--center ss-c-align--center">
Top Ribbon
<span class="ss-c-i" aria-hidden="true">▾</span>
</summary>
<div class="ss-c-ribbon__panel ss-c-center">
<h3 class="ss-c-ribbon__panel__section__header">Projects</h3>
<ul class="ss-c-ribbon__panel__section">
<li class="ss-c-ribbon__panel__section__item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="ss-c-ribbon__panel__section__item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
<hr class="ss-c-ribbon__panel__line" />
<h3 class="ss-c-ribbon__panel__section__header">Studies</h3>
<ul class="ss-c-ribbon__panel__section">
<li class="ss-c-ribbon__panel__section__item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="ss-c-ribbon__panel__section__item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</div>
</details>
</div>
</div>
<br />
<div class="ss-c-ribbon ss-c-ribbon--top">
<div class="ss-c-ribbon__slot--horizontal_right">
<details>
<summary class="ss-c-flex ss-c-justify--center ss-c-align--center">
Top Ribbon
<span class="ss-c-i" aria-hidden="true">▾</span>
</summary>
<div class="ss-c-ribbon__panel ss-c-right">
<h3 class="ss-c-ribbon__panel__section__header">Projects</h3>
<ul class="ss-c-ribbon__panel__section">
<li class="ss-c-ribbon__panel__section__item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="ss-c-ribbon__panel__section__item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
<hr class="ss-c-ribbon__panel__line" />
<h3 class="ss-c-ribbon__panel__section__header">Studies</h3>
<ul class="ss-c-ribbon__panel__section">
<li class="ss-c-ribbon__panel__section__item">
<a href="#">Lorem Ipsum</a>
</li>
<li class="ss-c-ribbon__panel__section__item">
<a href="#">Lorem Ipsum</a>
</li>
</ul>
</div>
</details>
</div>
</div>Ribbon Navigation Inline
HTML
<div class="ss-c-ribbon ss-c-ribbon--top">
<div class="ss-c-ribbon__slot--horizontal_left">
<nav id="ribbon__nav--left" class="ss-c-ribbon__nav" aria-label="Ribbon navigation (left)">
<ul id="ribbon__nav__list--left" class="ss-c-ribbon__nav__list">
<li class="ss-c-ribbon__nav__list__item">
<a href="/" class="ss-c-ribbon__nav__list__item__text">
Studio
</a>
</li>
<li class="ss-c-ribbon__nav__list__item">
<a href="/" class="ss-c-ribbon__nav__list__item__text">
Stories
</a>
</li>
<li class="ss-c-ribbon__nav__list__item">
<a href="/" class="ss-c-ribbon__nav__list__item__text">
Services
</a>
</li>
</ul>
</nav>
</div>
</div>
<br />
<div class="ss-c-ribbon ss-c-ribbon--top">
<div class="ss-c-ribbon__slot--horizontal_center">
<nav id="ribbon__nav--center" class="ss-c-ribbon__nav" aria-label="Ribbon navigation (center)">
<ul id="ribbon__nav__list--center" class="ss-c-ribbon__nav__list">
<li class="ss-c-ribbon__nav__list__item">
<a href="/" class="ss-c-ribbon__nav__list__item__text">
Studio
</a>
</li>
<li class="ss-c-ribbon__nav__list__item">
<a href="/" class="ss-c-ribbon__nav__list__item__text">
Stories
</a>
</li>
<li class="ss-c-ribbon__nav__list__item">
<a href="/" class="ss-c-ribbon__nav__list__item__text">
Services
</a>
</li>
</ul>
</nav>
</div>
</div>
<br />
<div class="ss-c-ribbon ss-c-ribbon--top">
<div class="ss-c-ribbon__slot--horizontal_right">
<nav id="ribbon__nav--right" class="ss-c-ribbon__nav" aria-label="Ribbon navigation (right)">
<ul id="ribbon__nav__list--right" class="ss-c-ribbon__nav__list">
<li class="ss-c-ribbon__nav__list__item">
<a href="/" class="ss-c-ribbon__nav__list__item__text">
Studio
</a>
</li>
<li class="ss-c-ribbon__nav__list__item">
<a href="/" class="ss-c-ribbon__nav__list__item__text">
Stories
</a>
</li>
<li class="ss-c-ribbon__nav__list__item">
<a href="/" class="ss-c-ribbon__nav__list__item__text">
Services
</a>
</li>
</ul>
</nav>
</div>
</div>Top Ribbon Menu Inline
HTML
<div class="ss-c-ribbon ss-c-ribbon--top">
<div class="ss-c-ribbon__slot--horizontal_left">
<menu id="ribbon__menu--left" class="ss-c-ribbon__menu" aria-label="Ribbon menu (left)">
<li class="ss-c-ribbon__menu__item">
<button type="button" class="ss-c-ribbon__button" aria-label="Home">
<svg aria-hidden="true" focusable="false" width="16" height="16" style="flex: none" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 14A6 6 0 1 1 14 8c0 2.2-1.8 4-4 4s-3-1.3-3-3 1.3-2.5 2.5-2.5"/></svg>
</button>
</li>
<li class="ss-c-ribbon__menu__item">
<button type="button" class="ss-c-ribbon__button" aria-label="Menu">
<span class="ss-c-i" aria-hidden="true">☰</span>
</button>
</li>
<li class="ss-c-ribbon__menu__item">
<button type="button" class="ss-c-ribbon__button" aria-label="Apps">
<span class="ss-c-i" aria-hidden="true">⊞</span>
</button>
</li>
<li class="ss-c-ribbon__menu__item">
<button type="button" class="ss-c-ribbon__button" aria-label="Commands">
<span class="ss-c-i" aria-hidden="true">⌘</span>
</button>
</li>
</menu>
</div>
</div>
<br />
<div class="ss-c-ribbon ss-c-ribbon--top">
<div class="ss-c-ribbon__slot--horizontal_center">
<menu id="ribbon__menu--center" class="ss-c-ribbon__menu" aria-label="Ribbon menu (center)">
<li class="ss-c-ribbon__menu__item">
<button type="button" class="ss-c-ribbon__button" aria-label="Home">
<svg aria-hidden="true" focusable="false" width="16" height="16" style="flex: none" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 14A6 6 0 1 1 14 8c0 2.2-1.8 4-4 4s-3-1.3-3-3 1.3-2.5 2.5-2.5"/></svg>
</button>
</li>
<li class="ss-c-ribbon__menu__item">
<button type="button" class="ss-c-ribbon__button" aria-label="Menu">
<span class="ss-c-i" aria-hidden="true">☰</span>
</button>
</li>
<li class="ss-c-ribbon__menu__item">
<button type="button" class="ss-c-ribbon__button" aria-label="Apps">
<span class="ss-c-i" aria-hidden="true">⊞</span>
</button>
</li>
<li class="ss-c-ribbon__menu__item">
<button type="button" class="ss-c-ribbon__button" aria-label="Commands">
<span class="ss-c-i" aria-hidden="true">⌘</span>
</button>
</li>
</menu>
</div>
</div>
<br />
<div class="ss-c-ribbon ss-c-ribbon--top">
<div class="ss-c-ribbon__slot--horizontal_right">
<menu id="ribbon__menu--right" class="ss-c-ribbon__menu" aria-label="Ribbon menu (right)">
<li class="ss-c-ribbon__menu__item">
<button type="button" class="ss-c-ribbon__button" aria-label="Home">
<svg aria-hidden="true" focusable="false" width="16" height="16" style="flex: none" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 14A6 6 0 1 1 14 8c0 2.2-1.8 4-4 4s-3-1.3-3-3 1.3-2.5 2.5-2.5"/></svg>
</button>
</li>
<li class="ss-c-ribbon__menu__item">
<button type="button" class="ss-c-ribbon__button" aria-label="Menu">
<span class="ss-c-i" aria-hidden="true">☰</span>
</button>
</li>
<li class="ss-c-ribbon__menu__item">
<button type="button" class="ss-c-ribbon__button" aria-label="Apps">
<span class="ss-c-i" aria-hidden="true">⊞</span>
</button>
</li>
<li class="ss-c-ribbon__menu__item">
<button type="button" class="ss-c-ribbon__button" aria-label="Commands">
<span class="ss-c-i" aria-hidden="true">⌘</span>
</button>
</li>
</menu>
</div>
</div>Top Ribbon Search
HTML
<div class="ss-c-ribbon ss-c-ribbon--top">
<div class="ss-c-ribbon__search">
<form
id="ribbon__search__form--left"
class="ss-c-ribbon__search__form"
role="search"
aria-label="Ribbon search (left)"
>
<button
type="submit"
id="ribbon__search_button--left"
class="ss-c-ribbon__search_button"
aria-label="Search"
style="flex: none"
>
<svg aria-hidden="true" focusable="false" width="16" height="16" style="flex: none" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5 14 14"/></svg>
</button>
<input
type="text"
id="ribbon__search__input--left"
class="ss-c-ribbon__search__input"
aria-label="Search"
placeholder="Search..."
/>
</form>
</div>
</div>
<br />
<div class="ss-c-ribbon ss-c-ribbon--top">
<div class="ss-c-ribbon__slot--horizontal_center">
<div class="ss-c-ribbon__search">
<form
id="ribbon__search__form--center"
class="ss-c-ribbon__search__form"
role="search"
aria-label="Ribbon search (center)"
>
<button
type="submit"
id="ribbon__search_button--center"
class="ss-c-ribbon__search_button"
aria-label="Search"
style="flex: none"
>
<svg aria-hidden="true" focusable="false" width="16" height="16" style="flex: none" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5 14 14"/></svg>
</button>
<input
type="text"
id="ribbon__search__input--center"
class="ss-c-ribbon__search__input"
aria-label="Search"
placeholder="Search..."
/>
</form>
</div>
</div>
</div>
<br />
<div class="ss-c-ribbon ss-c-ribbon--top">
<div class="ss-c-ribbon__slot--horizontal_right">
<div class="ss-c-ribbon__search">
<form
id="ribbon__search__form--right"
class="ss-c-ribbon__search__form"
role="search"
aria-label="Ribbon search (right)"
>
<button
type="submit"
id="ribbon__search_button--right"
class="ss-c-ribbon__search_button"
aria-label="Search"
style="flex: none"
>
<svg aria-hidden="true" focusable="false" width="16" height="16" style="flex: none" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5 14 14"/></svg>
</button>
<input
type="text"
id="ribbon__search__input--right"
class="ss-c-ribbon__search__input"
aria-label="Search"
placeholder="Search..."
/>
</form>
</div>
</div>
</div>