Link Grid
Components on this page:
The Link Grid and Link Grid - Set Columns components create a grid of rectangular links. The Link Grid determines the number of columns for the grid based on the number of links to be displayed (a more detailed explanation is included after the description of the component fields). The Link Grid - Set Columns component allows the editor to set the number of columns.
- Heading [Short Text] (optional): Heading (h2) displayed above the link grid.
- Background Color [Radio Buttons: Grey, White]: Set the background color and general style of the component.
- The Grey background will display each link on a black rectangle. If a background image is specified for a link, a 40% opaque black overlay is displayed between the image and link text.
- The White background will display each link on a red rectangle. If a background image is specified for a link, a soft-light mode is used to blend the image and red background color.
- Number of Columns [Dropdown: 2, 3, 4, 5] (Link Grid - Set Columns only): The number of columns to be used for the link grid
- Links [Group]
- Link Text [Short Text]
- Link Destination [File Chooser]
- Image [Image Chooser] (optional): Choose an image to display in the link's square (behind the link)
The number of columns used by the Link Grid component to display the links will be the highest number between 2 and 5 (inclusive) into which the number of links can be evenly divided. For example, 12 links would be divided into 4 columns, 10 links into 5 columns, 6 links into 3 columns, or 14 links into 2 columns. If the number of links can not be evenly divided into 2, 3, 4, or 5 columns, it will be divided into 4 columns with any remaining links displayed within a 4-column grid. Many examples are included on this page.
Background Color: Grey
No Heading
Background Color: White
No Heading
One Link
Number of Columns
The remaining examples show the use of the Number of Columns field in the Link Grid - Set Columns component to set the number of columns used for the grid, regardless of the number of links entered into the component.