BRAID
Braid Design System
GuidesFoundationsComponentsPatternsStyles

Wide-screen layouts

How to tailor page width and layout to balance readability, scannability, and adaptability across devices.

Accessibility

  • Keep line lengths to around 12–15 words (size standard Text naturally wraps to this length in a small content width). This improves focus, reading speed, and comfort for users with low vision, dyslexia, or cognitive load sensitivities, including on mobile or when zoomed in.
  • Horizontal scrolling should always be intentional. Keep focus states for keyboard navigation, and avoid scrolling continuous text horizontally.

Best practices

General best practice

  • Limit content width on large screens so line lengths stay readable.
  • Test with customers and align related products for consistency.
  • On smaller screens, stack content or move it into a Drawer, sheet, or page.
  • Use horizontal scroll only when it adds value.
  • Use PageBlock as the top-level page container. Nest ContentBlock when a section needs a narrower measure, for example body copy inside a full-width layout.

Examples

The examples below are a small sample of wide-screen layouts. The principles can be combined to meet your particular requirements. Resize the browser window to see how they adapt.

Full-width responsive — collapsing to stack

  • Content runs full width on all screen sizes
  • Content stacks vertically on smaller screens
  • Avoid long line lengths in wider views
This area expands to full screen width on all screen sizes
Content area 1
Content area 2
Content area 3
 
Open in Playroom

Full-width responsive — moving content to a drawer

  • Content runs full width on all screen sizes
  • Sections that can’t be stacked on smaller screens can be moved to a Drawer or separate page
This area expands to full screen width on all screen sizes
Content area 1
Content area 2
Content area 3
 
Open in Playroom

Full-width horizontal scroll

  • Content runs full width on all screen sizes
  • Content scrolls horizontally on all screen sizes
  • Ideal for connected horizontal content, such as Kanban boards
This area expands to full screen width on all screen sizes
Content area 1
Content area 2
Content area 3
Content area 4
Content area 5
Content area 6
Content area 7
Content area 8
Content area 9
Content area 10
 
Open in Playroom

Constrained max width

  • The page extends to a maximum width determined by the product team as optimal for their experience
  • If the window is narrower than the max width, the page runs full width
  • The optimal max width will vary by product. Teams should explore and test what works with their content.
Maximum width set to 1400px
Content area 1
Content area 2
Content area 3
Content area 4
 
Open in Playroom

Full width split view

  • Content area is divided into summary and detail
  • Summary cards can wrap from two columns on wide screens to one column on smaller screens
  • Detail areas can be moved to a Drawer or separate page on smaller screens
This area expands to full screen width on all screen sizes
Content area 1A
Content area 1B
Content area 1C
Content area 1D
Content area 1E
Content area 1F
Content area 1G
Content area 1H
Content area 2
 
Open in Playroom
Maximum width set to 2000px
Content area 1A
Content area 1B
Content area 1C
Content area 1D
Content area 1E
Content area 1F
Content area 1G
Content area 1H
Content area 2
 
Open in Playroom

Responsive grid layout

  • Content area is divided into columns
  • The number of columns changes based on screen width
  • Breakpoints and column counts can be configured as needed. Tiles supports Braid breakpoints; additional large-screen columns can be handled in product CSS if required.
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11
Card 12
Card 13
Card 14
Card 15
Card 16
Card 17
Card 18
Card 19
Card 20
 
Open in Playroom

Related

  • layout — Foundations document that outlines all available layout components and how to use them.
On this page