---
title: Sticky Columns
date: 2024-11-14T12:23:00-08:00
author: Zaida Jocson
canonical_url: "https://designsystem.umd.edu/components/sticky-columns"
section: Components
---
# 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.
A 2-column layout option where one column "sticks" as a user scrolls down the page
## 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

[View component playground: Sticky Columns](https://playground.designsystem.umd.edu/?path=/story/components-sticky-columns--events-with-feature)

## 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.

[View Figma design: Sticky Columns](https://www.figma.com/design/YqgNlOMETaJbcI67sv8HUp/Downloadable-Components-File?node-id=70467-1120&t=qokajdVmiEN53xIx-1)