Sidebar widgets
Sidebar widgets are flexible containers that provide a lot of patterns that are helpful in a variety of sidebar uses.
Classes
| Class | Description | Parent | Modifies |
|---|---|---|---|
.s-sidebarwidget | Base sidebar widget style. | N/A | N/A |
.s-sidebarwidget--content | Container for the sidebar widget content. | .s-sidebarwidget | N/A |
.s-sidebarwidget--header | Container for the sidebar widget header. | .s-sidebarwidget | N/A |
.s-sidebarwidget--footer | Container for the sidebar widget footer. | .s-sidebarwidget | N/A |
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>