Content with aside

An article beside a sticky aside, on either side; stacks under 64rem.

.with-asideCSS only

Examples

With aside

article

Anatomy

`.with-aside`	Grid: one column under 64rem, the content plus an `--aside` column above.
`> article`	The content, first in the markup. Any element works; it may shrink below its content width.
`> aside`	Must be an `<aside>` element. From 64rem it sticks a step below the top of the scroller while the content scrolls past.

API

Attribute	Values	Description
`data-side`	`start`	From 64rem, puts the aside before the content. Default end.
`--aside`	`<length>`	Aside column width. Default φ⁶ ≈ 18rem.

Accessibility

data-side="start" moves the aside with order, so it shows first but is still read and tabbed after the article. If it should be read first (a table of contents, say), the markup order is what counts.
An <aside> is a complementary landmark; give it an aria-label when the page has more than one.