Layout organizes content and controls space and overlapping surfaces.
Group related information and actions around one topic.
Place a title and tag over a full-background image.
Arrange related items in a vertical list.
Arrange content in consistent columns with even spacing.
Arrange images in a uniform grid with consistent tile sizes.
Arrange original or cropped image ratios in a Pinterest-style column layout.
Preserve image ratios while aligning row heights and filling each row, like Flickr.
Pair a large image with selectable thumbnails for product detail pages.
Browse a sequence of images in one area.
Do
Provide previous and next controls and a position indicator, with keyboard navigation as well as dragging.
Keep slide dimensions stable and give images descriptive alternative text.
Don't
Do not force a slide change while someone is reading. Provide a pause control if autoplay is necessary.
Do not allow keyboard focus into hidden links in inactive slides.
Expand details in the document flow, pushing following content down. Use for accordions or additional form fields.
A panel takes layout space and resizes the main content. Show navigation or supporting tasks without covering the page.
Content grows or shrinks with the browser window while preserving its aspect ratio.
Open contextual information beside a trigger.
Handle a focused editing task on the current page.
Current name: Compass
Open supporting tasks or choices from the bottom of the screen.
Recommended
Show details and supporting tasks beside the page.
Briefly announce the result of an action.
Ask for a decision alongside the current task without blocking it.