Section

Section, like Stripe, is used to separate content visually; it might help to think of Section like a "sub-Stripe". While Stripe cuts across the entire page to divide segments of content, Section has left and right margins, so it's contents never touch the edges of the viewport.

Section separates content visually using whitespace and an optional bottom border. There is a variant of Section that has a bottom border and bottom padding.

Sections contain double spacing at the top, and a single space at the bottom. This is because a Section typically contain Chunks, which also have a sinlge space at the bottom.

Section (default), in isolation

Section with bottom separator, in isolation

Sections dividing page content

Section examples

Event home

Group home (v0 of redesign)