Skip to main content

Card grid

Card grid is a page component that consists of a number of links to pages, displayed in a card format. Links, descriptions, and icons can be customized.

Each row can contain up to 5 cards (columns)—each will be evenly spaced across the page. On smaller screen sizes, the cards will automatically resize to fit in the available space.

Regular content, such as a heading, can be placed in between rows to act as a separator. In the example page below, a list of the used options appear between each card row.



How to

Create multiple rows and columns

  1. Create a new page or edit an existing page.
  2. In the Page type section of the page editor, select the Landing/index page option.
    Choose the landing/index page type
  3. In the Index option section, select Manual
  4. In the Layout option section, select Card grid. The Grid row editor will appear. 
    Choose the Manual index and Card grid layout options
  5. Select the Elements and/or Background styles and/or Content features that you want for the cards in the current row. Note that the options will be the same for each card in the current row.
    Choose your card grid options
    1. If the Link element was chosen: in the Grid row > Card editor, select whether you want to link to an Internal CMS page or an external web page. Select the CMS page or enter the URL of the external page. 
    2. If the Icon element was chosen: in the Grid row > Card editor, select the name of the icon you want to use. View examples of available icons.
    3. If the Title element was chosen: in the Grid row > Card editor, enter a title for the card.
    4. If the Description element was chosen: in the Grid row > Card editor, enter a brief description for the card. 
  6. To create another card, select the green + icon in the Card section heading. Continue adding cards as required.
    Create another card
  7. To create another row of cards, select the green + icon in the Grid row section heading. Continue adding rows as required.
    Create a grid row

Search the CMS User Guide