Page Loading

Panel styles and patterns

Panels can be built in different ways to achieve different layouts and styles for different uses.

Explore our guidelines for different panel styles

  • 50:50

    A split panel that allows different types of content to sit side by side.

  • Hero

    The hero panel is used to introduce a page. There's a different hero style for SE and SDI.

  • Gradient panel

    The gradient panel features a white box on a coloured gradient background. 

  • Callout box

    A bordered container used to highlight important information.