Skip to main content
UMDDesign System

Layout

Horizontal Spacing

Horizontal spacing is determined by the content width or “lock” per section or component and whether a left rail is needed. These locks are centered on the page. For spacing between elements on a page, see Grids.

Content Width / Lock

UMD Lock .umd-lock

"Default" (max. content-width: 1488px)

Visual example of the default horizontal lock with blocks of solid color showing a maximum content width of 1488 pixels.

The widest content width contains common components including Pathway, Banner Promo, and Card Grid.

UMD Lock Small .umd-lock-small

Small (max. content-width: 1312px)

Visual example of the small horizontal lock with blocks of solid color showing a maximum content width of 1312 pixels.

This content width is available, but not used widely.

UMD Lock Smaller .umd-lock-smaller

Smaller (max. content-width: 1144px)

Visual example of the smaller horizontal lock with blocks of solid color showing a maximum content width of 1144 pixels.

Used to contain the List and Event List on landing and home pages, Featured Quote, article pages to house both the main article (left) column and right rail elements.

UMD Lock Extra Small .umd-lock-extra-small

Extra Small (max. content-width: 960px)

Visual example of the extra small horizontal lock with blocks of solid color showing a maximum content width of 960 pixels.

This content width is used to contain Accordions on landing pages, Image Carousel

UMD Lock Smallest .umd-lock-smallest

Smallest (max. content-width: 752px)

Visual example of the smallest horizontal lock with blocks of solid color showing a maximum content width of 752 pixels.

This content width is used on interior pages to contain text areas, Accordion, Banner Promo, Card Grid, List.

Site Padding

The Site Lock includes outer padding which adjusts with screen size. Max content-widths above account for site padding.

 

Desktop Wide (1200+) 120px

Desktop (1024 +) 64px

Tablet (767+) 48px

Mobile 24px