Skip to main content

Promo Cards

Promo Cards

  • Content: list of individual Promo Card items

  • Layout: specify Card Size (Small or Large)

  • Styles: specify colours for Heading Text, Text, Cards Background

  • Promo Card item: fields for Heading Text, Body Text (RTE), Link, Image, Image Position

Layout issues

  • There is an 1150px breakpoint, below which a promo card’s body text content is forced to align centre, however this does not get applied to the card’s heading text, so overall alignment looks off on mobile

Accessibility issues

  • No errors (WAVE plugin)

Potential improvements

  • Addition of a main component heading, with control over alignment (left or centred)

  • Set an image width percentage. E.g. with an image in position top it would be useful to make it 100%

  • Control over the border radius on a promo card - perhaps we could have a global Site Settings option that affects all Card items across components

Card size small. No Card background colour

Card size large. Card background, heading and text colour selected

× UAT site