Vertical Spacing
Codifying vertical spacing enables us to apply consistent rules for spacing, making the design and development processes more efficient.
Full Width/Landing Page
Section .umd-layout-vertical-landing
Vertical spacing between sections
Desktop 120px
Tablet 80px
Mobile 56px
In Section .umd-layout-vertical-landing-child
Vertical spacing between items within sections
Desktop 48px
Tablet 40px
Mobile 32px
Interior Page
Page Content .umd-layout-vertical-interior
Vertical page margins under hero/breadcrumbs and above footer
Desktop 80px
Tablet 56px
Mobile 56px
In Section .umd-layout-vertical-interior-child
Vertical spacing between items within sections
Desktop 32px
Tablet 32px
Mobile 32px
Headings
Bottom spacing for the most widely used heading styles. Note: some values may have component-specific overrides.
Sans Largest Uppercase .umd-layout-headline-large
Titling in Pathway, Intro, Card Carousel
Desktop 24px
Tablet 16px
Mobile 16px
Sans Extra Large Bold .umd-layout-headline-large
Used for wider Overlay Cards, rich text headlines
Desktop 24px
Tablet 16px
Mobile 16px
Sans Larger Bold .umd-layout-headline-large
Used in Standard and Overlay Cards, Lists, rich text headlines
Desktop 24px
Tablet 16px
Mobile 16px
Sans Large Bold .umd-layout-headline-medium
Used in rich text headlines
Desktop 16px
Tablet 16px
Mobile 16px