Skip to main content

Call To Action Grid

Call To Action Grid

  • Content: field for Intro Text (singe RTE, no heading and text separation), and then CTA Grid items

  • The intro text defaults to being centred

  • Styles: Specify colours for Heading (within a card), Text (affects both intro text and that within card), Card Background, Button One and Button Two

  • Button One automatically has a border colour that matches the Button Text colour, so it should ideally be set to display as an outline button - e.g. with a background similar to the card background

  • CTA item content: fields for Image, Content (single RTE), Button One Link, Button Two Link

  • CTA item styles: these seem to be redundant and actually correspond with Accordions styles - GO BUG LOGGED

Layout issues

Accessibility issues

  • No errors (WAVE plugin)

Potential improvements

  • Button styles on this component seem to be independent of the main primary-button style, for example a different border colour and border-radius is applied. Suggest this is addressed, perhaps by adding a Button Border Radius value into Site Settings, that is then applied to ALL buttons?

Default

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Styles applied

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Even number of items

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

× UAT site