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)
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)
This content width is available, but not used widely.
UMD Lock Smaller .umd-lock-smaller
Smaller (max. content-width: 1144px)
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)
This content width is used to contain Accordions on landing pages, Image Carousel
UMD Lock Smallest .umd-lock-smallest
Smallest (max. content-width: 752px)
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