• Components provide specific layout and functionality for displaying content on a panel page.
  • Components are inserted in the panes of panel pages which are landing pages or entry pages within a website.
  • Panel pages are suitable for:
    • broad and shallow overview
    • providing links to further detail captured in the content types such as basic pages, structured pages and articles amongst others.

7. Review: card grid component

Compare your edited rich text component with the following exemplar.

  • Overview
    • Site editors can update all the card fields in the card grid.
    • Site editors cannot add more cards or delete existing cards.
    • Aesthetically, it is important that the last line of text across all the cards is consistent to ensure there is balance in the card grid.
    • In terms of consistency for the site user, the cards should share a common theme thus limiting confusion for the site user.
  • The following information applies to the image below.
  1. Image
  • Image size – Images that are too large negatively impact the time it takes for a web page to load.  The image size must be sufficient for the purpose, not necessarily the biggest possible image. Aim for a 100-300KB file size. A file size over 1MB is too large, except in the case of the hero banner where it is likely to be approximately 1MB. 
  • Image relevance -  use images that support the text to reinforce meaning.
  • Avoid text in images - screen readers cannot read text in images.  Thus messages that are conveyed via images such as graphs or cartoons will be missed by screen readers.
  • Copyright restrictions.  Our image fields crop images which may contravene copyright. Thus, if the copyright restrictions prohibit altering the images, do not insert the image into our image fields.
  1. Title and primary link
    When a primary link is inserted for a card, it hyperlinks to the title and image of that card.
  2. Content
    The amount of text in the content field determines the height of the card grid.  Ideally, the amount of text should be equivalent across all the cards in a card grid to ensure a balanced "look" for the card grid component.
  3. Action link
    The link in the action link section of the card is optional.  It is intended for calls to action.

labelled edited card grid


Click the grey button on the right to proceed to the next task.