Cards
Cards allow you to surface a number of items in a ‘card’ like design in multiple columns. The layout is automatic based on the number of cards and page template chosen. There are 3 types of cards to choose from.
Rules
- Minimum of 2 cards, maximum 12
- Maximum of 2 links per card
- All cards have a set height and must not grow taller
- Card layout is dynamic, based on the number of cards.
- Image ratio is 16:9
Live examples
Content limits
- Content limit varies depending on how many links are used / how long the heading or body text is. Adjust content accordingly to fit within the set height of the cards.
Cards – Fill
To add Cards – Fill to your page, add the “Cards” block and select grey background in the options tab.
Content limit
Heading: 40 characters (Max), 20 characters (Min)
Body: 150 characters (Max), 80 characters (Min)
Card
Heading: 40 characters (Max), 20 characters (Min)
Body: 150 characters (Max), 80 characters (Min)
Cards – No fill
To add Cards – No fill to your page, add the “Cards” block and select transparent background in the options tab.
Content limit
Heading: 50 characters (Max), 20 characters (Min)
Body: 220 characters (Max), 110 characters (Min)
Card
Heading: 50 characters (Max), 20 characters (Min)
Body: 220 characters (Max), 110 characters (Min)
Cards – Image
To add Cards – Image to your page, add the “Cards with media” block.
Content limits
Heading: 50 characters (Max), 20 characters (Min)
Body: 220 characters (Max), 110 characters (Min)
Card
Heading: 50 characters (Max), 20 characters (Min)
Body: 220 characters (Max), 110 characters (Min)
Cards – Event
To add Cards – Event to your page, add the “Event Cards” block.
06 MARCH 2025
Lorem ipsum dolor sit amet consecteur.
Curtin Perth
Lorem ipsum dolor sit amet consectetur. Cursus mattis sed faucibus vitae integer pellentesque gravida nec. At cursus netus pulvinar nunc eu eu. Praesent pellentesque id aliquet enim velit tristique adipiscing consectetur.
09, 10 & 11 MARCH 2025
Lorem ipsum dolor sit amet consecteur.
Curtin Perth
Lorem ipsum dolor sit amet consectetur. Cursus mattis sed faucibus vitae integer pellentesque gravida nec. At cursus netus pulvinar nunc eu eu. Praesent pellentesque id aliquet enim velit tristique adipiscing consectetur.