Link Grid

The Link Grid component creates a grid of rectangular links.

  • Heading [Short Text] (optional): Heading (h2) displayed above the link grid.
  • ID [Short Text] (optional): Specify an ID to use as a link target. Must be unique on this page, start with a letter, and only use lowercase letters, numbers, and hyphens (-).
  • 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: Auto-select, 2, 3, 4, 5]: The number of columns to be used for the link grid. More details about the Auto-select option are included after the list of component fields.
  • 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)

When Number of Columns is set to Auto-select, 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

Heading

No Heading

Background Color: White

Heading

No Heading

One Link

Two Links

Three

Four

Five

Six

Seven

Eight

Nine

Ten

Eleven

Twelve

Thirteen

Fourteen

Fifteen

Sixteen

Number of Columns

The remaining examples show the use of the Number of Columns field in the Link Grid component to set the number of columns used for the grid, regardless of the number of links entered into the component.

Six Links, Two Columns

Twelve Links, Three Columns

Twenty Links, Four Columns

Fourteen Links, Five Columns