Cards Panel

Add a panel with up to 3 cards, each card contains text, a link and an image.

How to use

  • Add a Heading
  • Optionally add Quick-Nav Text to be picked up the Quick Navigation Bar/Progress Navigation Bar
  • Choose a Background Colour: Orange, Pink, Purple, Teal, Yellow
  • Add 1-3 panels, for each panel:
    • Select a suitable image from the Media Library for the Panel Image 
      Recommend image is at least 840px x 1243px. The image can be any size or aspect ratio, and will be cropped and resized to 840px x 1243px automatically by a service called PXL. Find out how PXL crop and resize works.
    • Add a Panel Title
    • Select a section or content item for the Internal Link (ignore the Use default link text checkbox), or paste the full URL for the External URL (please do not enter both)
  • Optionally add a CTA button. Add CTA Text for the button text and either select a section or content item for the CTA Internal Link (ignore the Use default link text checkbox), or paste the full URL for the CTA External URL (please do not enter both)

Content Type Details

ID: 445
Name: Cards Panels
Description: A panel with up to 3 cards that can output a diverse range of information
Minimum user level: Contributor

Content Type Elements Details

NameDescriptionSizeTypeRequired
NameThe Name Element80 CharactersPlain TextYes
HeadingThis is the content title150 CharactersPlain TextYes
Quick-Nav TextThis text will be used for the Quick Navigation Bar/Progress Navigation24 CharactersPlain TextNo
Background ColourSelect the background colour for the componentN/ASelect Box
(List: Cards Panel Colour)
Yes
Panel 1 ImageSelect an Image from the Media LibraryN/AMediaNo
Panel 1 TitleAdd a Title50 CharactersPlain TextNo
Panel 1 Internal LinkSelect a section/content for an internal linkN/ASection/Content LinkNo
Panel 1 External URLEnter full URL including https:// for external URL, only enter this if you are NOT entering an internal link250 CharactersPlain TextNo
Panel 2 ImageSelect an Image from the Media LibraryN/AMediaNo
Panel 2 TitleAdd a Title50 CharactersPlain TextNo
Panel 2 Internal LinkSelect a section/content for an internal linkN/ASection/Content LinkNo
Panel 2 External URLEnter full URL including https:// for external URL, only enter this if you are NOT entering an internal link250 CharactersPlain TextNo
Panel 3 ImageSelect an Image from the Media LibraryN/AMediaNo
Panel 3 TitleAdd a Title50 CharactersPlain TextNo
Panel 3 Internal LinkSelect a section/content for an internal linkN/ASection/Content LinkNo
Panel 3 External URLEnter full URL including https:// for external URL, only enter this if you are NOT entering an internal link250 CharactersPlain TextNo
CTA TextAdd text for a CTA under the Left Panel50 CharactersPlain TextNo
CTA Internal LinkSelect a section/content for an internal linkN/ASection/Content LinkNo
CTA External URLEnter full URL including https:// for external URL, only enter this if you are NOT entering an internal link250 CharactersPlain TextNo

Examples

Teal

Our research is aligned to three integrating themes

Purple

Our research is aligned to three integrating themes

Pink

Our research is aligned to three integrating themes

Orange

Our research is aligned to three integrating themes

Yellow

Our research is aligned to three integrating themes

Teal, 1 Card

Our research is aligned to three integrating themes

More on our research themes

Purple, 2 Cards

Our research is aligned to three integrating themes

Pink Without CTA

Our research is aligned to three integrating themes