Sidebar widgets
Sidebar widgets are flexible containers that provide a lot of patterns that are helpful in a variety of sidebar uses.
Basic style
Section titled Basic style
In its simplest form, .s-sidebarwidget is comprised of a .s-sidebarwidget--content section and optional .s-sidebarwidget--header and .s-sidebarwidget--footer sections.
Together these classes create a widget with appropriate inner spacing for you to put whatever you want into it.
By default the content is a flex container. If you require
display: block instead, add the d-block class.
The examples of s-sidebarwidget--header are shown with h2 elements, but the appropriate heading level may differ depending on context.
Please use the appropriate heading level for your context to ensure heading levels only increase by 1.
<div class="s-sidebarwidget">
<div class="s-sidebarwidget--header">
<h2>…</h2>
<a class="s-btn s-btn__xs s-btn__clear s-sidebarwidget--action">…</a>
</div>
<div class="s-sidebarwidget--content">
…
<button class="s-btn s-btn__tonal s-sidebarwidget--action">…</button>
</div>
<div class="s-sidebarwidget--footer">
<button class="s-btn s-btn__tonal s-sidebarwidget--action">…</button>
</div>
</div>This page is useful
This page needs improvement
