Sidebar Block

Sidebar blocks are a flexible container block in that they do not provide content directly and instead organize other blocks embedded within the sidebar contexts.

Every sidebar block as two contexts, or lists of blocks. The first is of course the main content area and the second is the aside blocks (which are like normal blocks, just smaller and their tag structure is slightly different).

While any type of block can be used in the main context, the aside context allows for inline or finite blocks, like the ones used in Pair blocks.

This content block forces the length of the sidebar block context to be long enough to demonstrate the data-sidebar-sticky attribute, which makes the aside context sticky to the top of the page.

For mobile resolutions, the aside blocks are stacked before the normal blocks by default. Specifying bottom for the data-sidebar-stack block attribute will cause the aside context to be stacked under the main context. This sidebar is configured for bottom stacking while the next sidebar is set to the default.

This example of the sidebar features the aside blocks on the left instead of the right for desktop and stacked on top in mobile.

The aside blocks are also subject to the heading levels policies and so, all the aside blocks in this sidebar example are <h3>(stringtags error: map[string]interface {}) tags.</h3>

Aside blocks with headings are not included in the table of contents and more specifically, the heading tags used within the aside context are in fact <div>(stringtags error: map[string]interface {})s with one of the six heading classes, </div>.h1 through .h6 .

This content block forces the length of the page to be long enough to demonstrate that this sidebar block is configured without the data-sidebar-sticky attribute set to true .

This sidebar's aside context is positioned relative in the page flow.