Two Button Hero

Two Button Hero

• Content: fields for Eyebrow Heading Text, Use Page Name As Eyebrow (switch), Heading Text, Body Text (RTE), Hero Image, Background Image, Background Video, Background Video URL, Button One Link, Button Two Link, Button Colours, Text Colour, Footer Text, Button Icon (media picker)

• Layout: settings for Minimum Height (Desktop), Minimum Height (Small Screen), Minimum Height (Mobile), Content Vertical Alignment, Add Pause Button to Background Video

Layout issues

• Left and right containers have no gap, so the text and image elements sit too close to one another without custom styling being introduced

Styling issues

• The Eyebrow text element has font size and weight styling that already have the '!important' declaration, making it difficult to apply new style rules

• It's not possible to specify a background colour for the component, only a background image or video

Accessibility issues

• No errors (WAVE plugin)

Potential improvements

• Option to set the width of the left and right containers, and a gap between them (similar to the Left-Right Content component)

• Option to centre align the Left Container content (Text and Buttons) on mobile - when Left and Right Containers are stacked

• Include the usual Background Styles tab to allow setting of a Background Gradient and Background Gradient Colour - being careful not to clash with the Background Image and Video options already on this component