---
title: Grid and Layout Guidelines
tags: Site Settings
---

# Grid and Layout Guidelines

## Breakpoint & Grid

[Breakpoint & Grid](https://www.figma.com/file/K7ejO2iz7kbjQuRitcI52O/?node-id=2%3A638)

The system is a responsive website with set breakpoints for all viewports, from small to extra-large.

Figma grid styles are set for each breakpoint


## Templates

[Templates](https://www.figma.com/file/K7ejO2iz7kbjQuRitcI52O/?node-id=2%3A28)

Default page templates have been created for all viewports with set locations for navigation, header, Jump links, page content, ISI and footer across break points.

### Site Background

One swatch is used for the entire website background.

Assign any Brand or Universal swatch. In the example below neutral_50 is used for all pages and breakpoints.


### Sections
Reference layouts across breakpoints indicate key locations for navigation, header, Jump links, page content, Important Safety Information (ISI) and footer.

#### Menu

The menu contains links to important top-level pages on the site.

The below table offers guidance on where this menu should sit across breakpoints.

| Breakpoint | Location |
| ---------- | ------------------ |
| SM | Bottom of viewport |
| MD | Bottom of viewport |
| LG | Left of viewport |
| XL | Left of viewport |
| XXL | Left of viewport |

#### Header

The top of the page, or header is reserved for heroes.


#### Page Content

Page content can sit in a responsive container with a max width of 1096px. This container holds all the information and components for each section of the site.


#### ISI

ISI is legally required medication information. It must be displayed and accessible on all pages.


#### Footer

The footer at the bottom of each page contains additional Brand and Novartis Corporation mandatory information and links


### Default Page

Default page layouts have been created for all viewports to jumpstart website creation.