Layout

Styles

Normal

For pages that where we do not want the content to extend to the full width of the page, use a container with a width of 1216px and max-width of 100%.

There should be 32px of surrounding x-padding, so readable content is not flush with the viewport.

Full-width

For special pages, like data-heavy tables and the workflow canvas, extend the layout to the full-width of the viewport.

Maintain 32px of padding for readable content.

When designing for full-width pages, design at 1280px width.

Wide viewports

Wide viewports

Narrow viewports

Narrow viewports

 

Scale

1216px
1216px
normalPageMaxWidth
Collection
ads-breakpoints
1440px
1440px
breakpoints-desktop
Collection
ads-breakpoints
640px
640px
breakpoints-sm
Collection
ads-breakpoints
768px
768px
breakpoints-md
Collection
ads-breakpoints
1024px
1024px
breakpoints-lg
Collection
ads-breakpoints
1280px
1280px
breakpoints-xl
Collection
ads-breakpoints
1536px
1536px
breakpoints-2xl
Collection
ads-breakpoints