Add a split component
To add a split component to a page, you need to:
- Navigate to the page you'd like to add split components to
- Select the 'Add content' button under the 'Main content' area of the page 'Content' tab
- This will open the 'Add content' slide-out panel
- From here, select the 'Split Component'
- Under the 'Content' section, there will now be an area to add content to each split section
- Select 'Add content' next to 'Split section 1'
- Choose the content component you would like to add to that section and follow the instructions for adding a component
- Repeat the process of adding a component and adjusting its settings for 'Split section 2'
Width settings
A unique feature of the split component is the Width settings. These settings do not appear as part of the split component itself, but instead are added to the two child components inside the split component. This arrangement is unique in Govstack.
When going through the settings for the child components you will notice a pair of sliders divided into 12 parts. One setting specifies the column width on desktop size screens, the other on tablet size screen. The width of each column of the split component is set here.
Although the desktop and tablet widths can have different settings, both sliders must total 12 across the 2 components.
As an example, if you have a text component and a gallery component, setting the text component to a width of 4 and the gallery to a width of 8 will result in text taking up 1/3 of the screen space and the gallery taking up 2/3.
The minimum recommended width for any component is 2.