Link Grid

Components on this page:

  • 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

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 - Set Columns 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