Sticky Columns

Sticky Columns is a flexible option for a 2-column layout that allows either column to stick as a user scrolls down the page. It works best when the non-sticky column contains longer content.

Lines representing a title and text block next to cards with images

Dos

Use to vary layouts. Results in a less "boxy" design.

Left or right column may be sticky, but for text blocks, left column is recommended

Don'ts

Don't use long text in title areas

Don't mix component types in the non-sticky column

Variations

Left Featured Event

A Featured Event should only be used with an Event List.

Open in a new window

Right Featured Card

A featured Overlay Card can also be used with Lists and People (Contact Table variation).

Sticky effect will not be visible until the height of the non-sticky column is at least 1000px - use the "Load more" button to engage.

Open in a new window

Most components can use a light or dark theme. A sticky text block feature can be used with many component types, including Overlay Cards, Statistics, Accordions, and Icon Cards.

Open in a new window

A sticky text block feature can be used with many component types, including Overlay Cards, Statistics, Accordions, and Icon Cards.

Open in a new window

Content

Sticky Column - Recommended Components

Featured Event, Overlay Card, or Text Block feature (with title, text block, and call to action)

Static Column - Recommended Components

List, Event List, Overlay Cards, Standard Cards, Icon Cards, Accordions, Statistics, People Cards (Contact Table)

Layout

Left or right column may stick. Left is typically recommended.