UX Framework
Templates
Search the component library

Templates

v1.0.0
Download UI Kit v1.9.0

A standard set of page structures for a variety of use cases.

Download UI Kit v1.9.0

Usage Guidelines

Every page should utilize one or more of these templates to create its high level structure.

Features

  • Consistent dimensions for a variety of useful page structures
  • Responsive strategies for each template
  • Accessible implementation

Dependencies

grid v1.0.0-beta.2

breakpoints v1.0.0

Documents

UX Accessibility Checklist

Template usage

Stacking

Multiple templates may be stacked to create a single page.

Spacing

The joints can either abut directly or use the predefined standard/large spacings.

Backgrounds

Each template may specify it’s own full width border (color or image) or let the default background show through.

Borders

Stacked templates may also specify separating borders, either container width or full viewport width.

Presentation Strategies

Templates define set layout areas which are designed to work with the Presentation Strategies component for actually filling them with content.

Responsive Behavior

Templates are designed to work at each breakpoint, adjusting the arrangement of content areas as appropriate. For more complex designs you may specify different templates for each breakpoint.

A page consisting of three stacked layouts. The gray areas are where full width backgrounds would go.

The three spacings available for stacked templates. (Shown with container width borders.)

Single Column

The simplest page template, it takes up the full 12 columns available at every breakpoint.

The single column layout.

Two Column

This template devotes 8 columns to a main content area and the remaining 4 to a sidebar which appears on either side (prefer the right where it makes sense). At medium and smaller breakpoints the content areas stack, with the option to put the sidebar above or below the main content area.

The two column layout at larger breakpoints.

Responsive view with the main content on top.

Sidebar content on top.

Static Column

The static column presents a single column of fixed width which is centered in the page. At smaller breakpoints it transitions to full width fluid behavior. This column comes in two different sizes (small at 480px and large at 800px) and is handy for presenting modals or small pieces of content like sign in forms.

A column of static width at larger viewports.

Redlines

Shared Features

Spacing
  • Directly adjoining templates have no vertical space between them
  • Small Gap is 40px total
  • Large Gap is 80px total
Backgrounds & Borders
  • Each template section may include a full width border (either color or image)
  • Two template sections may be divided with a border that is either full page width or just 12 columns wide

Stacked templates with background areas indicated in gray.

The three types of spacing available with grid width borders.

Single column

Dimensions
Responsive

The single column template.

Two column

Dimensions
  • Main area is 8 grid columns wide, sidebar is 4 columns
  • Prefer to locate the sidebar on the right, but both are acceptable
Responsive
  • At medium and smaller breakpoints stack the two columns
  • Either the main area or sidebar area can come first

The two column template.

Static column

Dimensions
  • The large size is 800px wide at large breakpoints and larger
  • The small size is 480px wide at medium breakpoints and larger
Responsive
  • Below the breakpoints mentioned above, both sizes become 10 grid columns wide and centered
  • Below the small breakpoint both sizes become the full 12 column width

The static column template.

Available Styles Reference As (How do I use this?)
Single column [](/design/c/templates/v1.0.0/#rd-single-column)
Two column [](/design/c/templates/v1.0.0/#rd-two-column)
Static column [](/design/c/templates/v1.0.0/#rd-static-column)

Changelog

1.0.0

Initial version.