| Category | Value |
|---|---|
| May contain | Call to action, Icon button, Image card, Text card, Video card |
| May be placed in | Content region, Region 2, Region 3, Container, Two column split |
| Field | Description |
|---|---|
| Components per row | Number of components 1 to 4 (default) across in a single row. |
| Maximum component width | Fill (default), 1/2, 1/3 or 1/4. |
| Components | The field into which the Component grid's components will be added. See permitted components in the previous table. |
How to add a Component grid
Select Component grid from the Component type drop down list and click the Add new Component or Add another Component button.
Decide how many components should be in each row of the grid.
Decide how much space each component in a row should occupy.
Select a type of component and click the Add new Component or Add another Component button.
Things worth mentioning
The value selected for Components per row reflects the appearance of the Component grid on larger devices and screen sizes. On medium sized devices, a row of four components will become two rows, each two components abreast. On small devices, components will always stack beneath each other and be shown one component abreast, regardless of the chosen value.
When Components per row is set to 1 and an image card or video card has been added to the grid, its title and text will be displayed to the right of its image instead of below it.
If the number of components that have been added to the grid is less than the value selected for Components per row, then the Components per row value is effectively reduced to the number of components that have been added.
If the denominator of the value selected for Maximum component width is less than both the number of components that have been added to the grid and the value selected for Components per row, then the Maximum component width value is effectively fill. For example, you cannot have four components in a single row each occupying 1/2 of the available space.
Be sure to check the individual guide pages for each specific component type you are adding to the grid. Call to actions, Icon buttons, Image cards, Text cards and Video cards each have their own specific attributes.
Examples
This is an example of a component grid consisting of four call to action components with the Components per row set to 4 and Maximum component width set to fill.
This is an example of a component grid consisting of three icon button components with the Components per row set to 3 and Maximum component width set to fill.
The next example is a component grid of two image card components with the Components per row set to 2 and Maximum component width set to fill.
The next example is a component grid of two image card components with the Components per row set to 2 and Maximum component width set to 1/4.
The next example is a component grid of three text card components with the Components per row set to 3 and Maximum component width set to 1/4.
25%
25%
25%
The next example is a component grid of one video card component with the Components per row set to 1 and Maximum component width set to fill.