Presentation Strategies
Search the component library

Presentation Strategies

v1.1.0-beta.1
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.

Fixed Width Grid

In situations where the contents of a grid have both a fixed width and height, the fixed width grid arranges items with a standard gutter and will automatically break them into the appropriate number of columns.

If there are not enough items to fill an entire row, the available items may be centered in the remaining space.

If the number of items does not occupy an entire row, they are centered in the container

Two items still have not filled up an entire row

A maximum of three items will fit into this row, they are still centered within the container however

Once the items wrap to a second row additional items are positioned to the left first

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.1.0-beta.1/#rd-default-strategy)
Centered strategy [](/design/c/presentation-strategies/v1.1.0-beta.1/#rd-centered-strategy)
Left/Right strategy [](/design/c/presentation-strategies/v1.1.0-beta.1/#rd-left-right-strategy)
Basic Grid strategy [](/design/c/presentation-strategies/v1.1.0-beta.1/#rd-basic-grid-strategy)

Changelog

1.1.0-beta.1

  • ADDED: Centered grid strategy

1.0.0

Initial version