Page Loading

Gradient panel

The gradient panel features a white box on a coloured gradient background. It’s typically used to add visual interest to a panel and to break up sections of text.

Examples

Standard text gradient panel

  • Here's a heading

    This is an example of a gradient panel, with some text inside. It can hold longer text, like this paragraph of lorem ipsum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare pulvinar libero interdum malesuada. Sed in bibendum erat, accumsan consequat sapien. In quis mauris vehicula, viverra lectus in, feugiat orci. Donec convallis convallis mi eu lobortis. Fusce euismod facilisis fringilla. Nullam cursus bibendum massa sed ornare. Nunc ornare leo nec feugiat euismod.

Two column gradient panel

  • Here's a heading

    Here's some summary text to introduce the text that's coming next. 

    Here's a bit more text about the same topic. It's longer than the left hand column, but not too much longer. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare pulvinar libero interdum malesuada. Sed in bibendum erat, accumsan consequat sapien. In quis mauris vehicula, viverra lectus in, feugiat orci. Donec convallis convallis mi eu lobortis. Fusce euismod facilisis fringilla. Nullam cursus bibendum massa sed ornare. 

Gradient download panel

How to use the gradient panel

Only use text components in a gradient panel, such as paragraph text, bullets, headings and links. You can also add a button CTA , but avoid other components like cards, accordions, inset text, images and callout boxes.

If you’re using two columns, these can be slightly different lengths, but avoid having one side much longer than the other. This causes a lot of wasted white space. For example, if the only component in the left side is a heading, with all the text in the right column, consider just switching to the single column layout. 

Adding a gradient panel in the CMS

The best way to add a gradient panel is to use one of the templates provided. Once you’ve added a template, you can then add additional text components and links as you need.  

The colour of the gradient panel will depend on the site colours of the site you’re working on. Once you’ve selected the gradient background in the CMS (which is preselected for you in the gradient templates), the correct colour for that site will be applied. 

Gradient panel modifier rules

  • Background: gradient (colours depend on site theme)
  • Grid span: default for panel, 10 for content within the white container 
  • Padding: default, unless needed to improve layout
  • Alignment: middle centre for panel, top centre for white container

If you use a template, these modifiers will be applied for you.

Accessibility

There are no additional accessibility features to note for this panel, as it’s just a combination of background colour and containers. Make sure you follow the accessibility guidance for the different types for text or links you may be adding to the panel.

Full width examples examples

This is how these panels should appear on pages that don't use left hand navigation.

Standard text gradient panel

  • Here's a heading

    This is an example of a gradient panel, with some text inside. It can hold longer text, like this paragraph of lorem ipsum.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare pulvinar libero interdum malesuada. Sed in bibendum erat, accumsan consequat sapien. In quis mauris vehicula, viverra lectus in, feugiat orci. Donec convallis convallis mi eu lobortis. Fusce euismod facilisis fringilla. Nullam cursus bibendum massa sed ornare. Nunc ornare leo nec feugiat euismod.

Two column gradient panel

  • Here's a heading

    Here's some summary text to introduce the text that's coming next. 

    Here's a bit more text about the same topic. It's longer than the left hand column, but not too much longer. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare pulvinar libero interdum malesuada. Sed in bibendum erat, accumsan consequat sapien. In quis mauris vehicula, viverra lectus in, feugiat orci. Donec convallis convallis mi eu lobortis. Fusce euismod facilisis fringilla. Nullam cursus bibendum massa sed ornare. 

Gradient download panel