Layout & utility

Layout patterns and utility classes in HUB Design system organise content in as consistent interfaces across group products that can adapt to any device or screen size.

Baseline Grid

Layouts use a baseline 4-pixel grid. The 4-pixel grid should be used for overall page layouts to define page sections and component placements.

Spacing and gap tokens are all defined off the 4px grid.

Page containers & breakpoints

Containers are the outer layer that hold the contents of an application. The HUB Design System supports fluid and fixed containers. A fluid container spans the entire width of the screen throughout all breakpoints. A fixed container has a maximum width set (typically 1440px) to contain designs on very large screens and are typically fluid at smaller breakpoints. Containers should always be used in conjunction with breakpoints and layout columns.

• More to come with a Page component for layouts

Utility classes

Utility classes are derived from HDS Design Systems tokens and layout patterns across flex-box and grid. They help with setting layouts and customising components.