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 Layout: Larger Horizontal Space .umd-layout-space-horizontal-larger

Sizing: max. content width 1488px

Visual example of the larger 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 Layout: Large Horizontal Space .umd-layout-space-horizontal-large

Sizing: max. content width 1312px

Visual example of the Large 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 Layout: Normal Horizontal Space .umd-layout-space-horizontal-normal

Sizing: max. content width 1144px

Visual example of the Normal 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 Layout: Small Horizontal Space .umd-layout-space-horizontal-small

Sizing: max. content width 960px

Visual example of the 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 Layout: Smallest Horizontal Space .umd-layout-space-horizontal-smallest

Sizing: 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