Stripe

A Stripe is used to divide the view into regions of content. A Stripe extends to the edges of the viewport whether it's top-to-bottom or left-to-right.

A Stripe divides the page visually using a top border and a background color, or a background image. By default, Stripe has a white background and a top border.

Every view has at least one Stripe not including the global navigation header and footer - which are also Stripes.

Stripe, in isolation

Two Stripes dividing a page vertically

Two Stripes dividing a page horizontally

Horizontal stripe examples:

Event home

Group home (v0 of redesign)

Vertical stripe examples:

Messages

Photo detail