Presentation Strategies

v1.0.0

Download UI Kit v1.9.0

This component provides several standard strategies for presenting content within a layout template.

Download UI Kit v1.9.0

Usage Guidelines

All content within a template should specify a presentation strategy to use.

Overview
Default
Centered
Left/Right
Basic Grid
Redlines
Changelog

Features

Support for common layout patterns
Full integration with the standard templates

Dependencies

None

Documents

UX Accessibility Checklist

Overview

Content areas

Each strategy defines the location of one or more content areas which should each contain a single piece of content.

Stacking

Similarly to the templates themselves, strategies can be combined into stacks within a given template area.

Spacing

Stacked strategies have the same spacing options as templates: Directly Adjoining, Small Gap, and Large Gap.

Responsive behavior

Strategies don’t include inherent responsive behavior, preferring instead to leave that up to their containing templates. More advanced designs may change between various strategies at the standard breakpoints, however.

Examples of presentation strategies (the dashed boxes) being stacked in a single column template (green box). The content areas are denoted as pink boxes.

Strategies are designed to work regardless of their container size, as seen in this two column example.

Default

The default strategy is the normal browser layout flow of left aligning content.

Centered

The centered strategy simply centers its contents within the containing area.

Left/Right

This strategy aligns one chunk of content to the left and another chunk to the right.

Basic Grid

The basic grid strategy arranges equally sized chunks of content into two, three, or four rows. Each chunk should maintain the same height. The gutter size is configurable to be either small (10px) or large (20px). Chunks fill the content area in a left-to-right, top-to-bottom pattern.

Redlines

Default Strategy

Apply no specific positioning, just follow the standard left-aligned browser flow

Centered Strategy

Center the content item horizontally within the container

Left/Right Strategy

One content item is left aligned and the other is right aligned
Both content items are vertically aligned to their top edges

Basic Grid Strategy

Each content area is either 50%, 33.333333%, or 25% wide (including a gutter’s width)
Small gutters are 10px, large are 20px
Negative margins or a similar technique should be used to position the left and right edges of the content areas directly against the edge of the container
Each item should have the same height
Items are filled in a left-to-right and then top-to-bottom order

Spacing

Directly adjoining strategies should have no gap between them
Small Gap is 40px total
Large gap is 80px total

The default presentation strategy.

The centered presentation strategy.

The left/right presentation strategy.

The basic grid presentation strategy in a four column mode with small gutters.

Available Styles	Reference As (How do I use this?)
Default strategy	`[](/design/c/presentation-strategies/v1.0.0/#rd-default-strategy)`
Centered strategy	`[](/design/c/presentation-strategies/v1.0.0/#rd-centered-strategy)`
Left/Right strategy	`[](/design/c/presentation-strategies/v1.0.0/#rd-left-right-strategy)`
Basic Grid strategy	`[](/design/c/presentation-strategies/v1.0.0/#rd-basic-grid-strategy)`

Changelog

1.0.0

Initial version