Using modifiers
Modifiers help us customise the look and layout of individual panels and containers, by adjusting things like padding, colours background or alignment. Modifiers bring lots of flexibility but can also bring complexity and inconsistency.
How do modifiers and panel settings work?
Modifiers and panel settings help you customise each panel to fix spacing issues or achieve different styles and layouts. The modifiers you can use are:
- Background theme – the background colour of the panel or container
- Direction – this dictates whether content should stack vertically or sit horizontally
- Span – this controls the width of the page that a panel covers
- Alignment – this controls whether the content is left, centre or right aligned
- Margins – this controls the spacing around the outside of a panel or container
- Padding – this controls the spacing between the outside of a panel or container and the content inside it
Some settings are device specific, so remember to select the individual device you’d like to modifier to apply to, or select ‘all’ if the modifiers should apply to all devices.
Using panels and containers
Modifiers are applied at the panel level and container level, rather than to each individual component. Panels and containers are new to the design system, and might take some getting used to.
Adding components to panels allows you to control the look and feel of each section of the page by adding different backgrounds or changing the spacing between elements. If some content within a panel needs to behave differently, you can put it in a container and adjust the modifiers for the container.
For example, a 50:50 panel is made up of a panel and two containers. At the panel level, the direction is set to horizontal as this will make sure the two containers sit side by side. At the container level, the direction is set to vertical so that the content inside each container stacks vertically.
How to use the modifiers
Background theme
Use this to choose the background colour of the panel or container. The default follows the page background colour (usually white), or if the container sits within a panel, it will follow the panel colour.
There are a few background themes you’re more likely to use when building a page:
- ‘Background’ - this gives the panel a grey background, and can be used to break up the page and make panels easier to distinguish
- ‘Primary’, ‘Primary-variant’ and ‘Secondary’ - these may be different colours for different brands, and should only be used for CTA panels
- ‘Gradient’ - this is a two tone background that blends from one colour to another. We typically only use it with a white container so that the gradient only fills the panel space around the container. There are a few gradient templates you can use to save you building this style from scratch
- ‘Success’, ‘Warning’ and ‘Error’ should be used sparingly, and are more likely to be used as part of a service rather than informative content pages
- ‘Success’ is typically used to confirm a form has been successfully submitted
- ‘Warning’ might be used to highlight a crucial piece of information, or to highlight an action that could have destructive or non-reversible results - like deleting an account or submitting an unfinished application
- ‘Error’ is used on error pages (like a 404 or server error).
Direction
This controls whether the content within the panel should be stacked vertically (in a column) or horizontally (in a row). The default is vertical, but horizontal direction is used in 50:50 panels, where the two containers need to sit side by side in a row. Horizontal is also applied to card containers.
You won’t often need to use this modifier as 50:50 templates and card templates have already been created for you.
If you are using this modifier, pay attention to which direction you're applying to a panel vs a container. For example, your 50:50 panel might look something like this:
- Panel
- Title component
- Container
- Left container
- Content
- Right container
- Content
- Left container
In this example, the direction at the panel level should be vertical, because you want the title component and container to stack vertically. At the container level, it should be set to horizontal, as you want the two containers to sit side by side. At the left and right container levels, it should be set to vertical, as you want the content within each container to stack vertically.
Span
All our pages follow a 12 column grid. The span modifier lets you control how many columns of the grid a panel or container should cover. Varying the width of panels reduces the feeling of looking at a solid wall of information.
A span of 12 should rarely, if ever, be used as it leaves no space at the edges of the page. You should leave panels and containers as ‘default’ unless you want to reduce the span. Check the guidelines for each component to check the rules around spans. The most common ones to look out for are:
- Text panels should have a reduced span of 8 to make sure the line length is readable. This includes accordions and inset text.
- In a 50:50, you can adjust the span of each container to make one side wider than the other. Just make sure the two sides don’t add up to more than 12. It's often easier to adjust the span of one container and leave the other as 'default' to allow it to automatically adjust.
Alignment
Most panels should be set to ‘default’ which will left align content. In some cases, you may also need to centre align content. It’s unlikely you would need to right align content, but this is still available if you need to.
Remember alignment applies to both panels and containers. If you want the cards within a panel to be centre or left aligned, you need to select this at the container level. If you want the title, text and other components within each card to be left or centre aligned, you need to select this at the ‘card’ level.
Margins and padding
- Margins add additional space around the outside of a container to create space between containers. Use it if your panels look too close together.
- Padding adds additional space around the inside of a container to create space between the content in the container and the outside of the container. Use it if the border of your container is too close to the content inside.
In a lot of cases, adding padding or margins will have the same effect. There are lots of ways to achieve the same results, and no one way is ‘correct’. For example, if two panels are too close together, you could either add an extra margin to the bottom of the first panel, or the top of the second.
In our components guidelines, most will suggest using default padding ‘unless required to improve layout’. This just means it’s up to you to check the page and each component on multiple devices, and add or reduce padding wherever components look too close together or there are some large gaps. Medium padding or margins is often a good place to start, but feel free to add smaller or larger if you think it’s needed.
Common places for padding issues
Padding can be applied or removed wherever is necessary to improve the look or layout of the page. However, some places where padding is most commonly an issue include:
- The first text panel underneath the breadcrumbs. The white space is usually too large by default, so you'll likely need to set the top padding to 'none'
- Between two panels of text. If you have a text only panel followed by another text only panel, it's likely that the white space will look too big if padding is set to default. Reducing the top padding of the second panel to 'small' will likely help.
- If the panels have different background colours (i.e a grey background followed by white) you probably won't need this extra padding
- Between containers in a 50:50
- On desktop, you might need to add some left or right padding
- On mobile you might need to add some top or bottom padding
Borders and corners
You won’t often need to use the border setting. It’s used to create a callout box for important information, but a template has been created for this that you can use.
The corners modifier control how rounded the border’s corners are.