The Suru component can be used to provide a background for hero section of the page or to display a visual separation between two sections of content.
The main variant of suru component provides a visual separation between two sections of content (usually a hero and rest of the page). It has two layout options that align with 25/75 or 50/50 splits of the grid.
Use .p-suru--25-75 to create a hero section with the main 25/75 Suru background. Suru component provides the necessary hero padding, background colour and the Suru image.
Use .p-suru--50-50 to create a hero section with the main 50/50 suru background. Suru component provides the necessary hero padding, background colour and the suru image.
If needed, suru can be used as a standalone component. This is useful when you need to create a visual separation between two sections of content.
If the top section is a hero, please use the proper p-suru--25-75 or p-suru--50-50 section instead.
The corner variant of suru provides the background for the hero section of the page. We provide two styles of the corner suru (a fan and a pyramid suru), both with two possible placements.
Use .p-suru--fan-top or .p-suru--fan-bottom to create a hero section with the fan Suru background. Suru component provides the necessary hero padding, background colour and the suru image.
Use .p-suru--pyramid-left or .p-suru--pyramid-right to create a hero section with the pyramid suru background. Suru component provides the necessary hero padding, background colour and the suru image.
Use .p-suru--divider to create a hero section with the divider suru background. Suru component provides the necessary deep padding around the divider, background colour and the suru image.
To import just this component into your project, copy the snippet below and include it in your main Sass file.
// import Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework';
@include vf-base;
@include vf-p-suru;
For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.