---
title: Vertical Spacing
date: 2024-10-10T10:42:00-07:00
author: Zaida Jocson
canonical_url: "https://designsystem.umd.edu/foundation/vertical-spacing"
section: Foundation
---
[Layout](https://designsystem.umd.edu/foundation/layout)

#  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

 

 

  

 

    ![Example page with spacing demarcated in yellow](https://umd-design.transforms.svdcdn.com/production/images/vertical-spacing-landing.png?w=1620&h=1520&auto=compress%2Cformat&fit=crop&dm=1780429429&s=b3b94fbfdd38ea9fcde93c90955c78db) [ Home/Landing example ](https://designsystem.umd.edu/template/generic-home-page-2)

  [ See example ](https://designsystem.umd.edu/template/generic-home-page-2)  

   ![screen view of a text based page](https://umd-design.transforms.svdcdn.com/production/images/vertical-spacing-text-landing.png?w=3882&h=3446&auto=compress%2Cformat&fit=crop&dm=1780498607&s=40f1b64c4f7ed94c0d4ec356562df456) [ Text-based landing ](https://designsystem.umd.edu/template/landing-interior-text-2)

  [ See example ](https://designsystem.umd.edu/template/landing-interior-text-2)  

   ![Vertical spacing interior](https://umd-design.transforms.svdcdn.com/production/images/vertical-spacing-landing-copy.jpg?w=1620&h=1520&auto=compress%2Cformat&fit=crop&dm=1781710631&s=b134febf754a21ee71046e3ad5434eaf) [ Interior example ](https://designsystem.umd.edu/template/interior-detail-vertical-spacing)

  [ See example ](https://designsystem.umd.edu/template/interior-detail-vertical-spacing)  

  

  ##  Headings 

Bottom spacing for the most widely used [heading styles](https://designsystem.umd.edu/foundation/type-mapping). *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