Presentation Strategies
Search the component library

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.

Features

  • Support for common layout patterns
  • Full integration with the standard templates

Dependencies

None

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