Hero Image Text Options Demo

There are 4 new options available for text in the Hero Image widget:

1. Text placement within the widget

2. Text alignment within its container

3. Background color

4. Text color

1. Text placement within the widget

First, we'll change the display context of the parent section element to display:flex. Second, we'll add a div with a class of 'container' inside the section element so that any text box placement we choose will not fall outside of our preset container widths, and therefore maintain good readability/UX.

To adjust the X-axis positioning, we change the justify-content property to one of three options, flex-start, center, or flex-end. The same values apply to the align-items property in order to adjust the text positioning on the Y-axis. This allows for 9 possible positions in which the text box can exist. 

2. Text alignment within its container

To change text alignment, simply change the value of the text-align property on the main text container. The user will be able to do this in the new 'content block' style WYSIWYG.

3. Background color

To change the background color, change the background-color value to one of our pre-approved rgba color choices. The user will be able to do this via dropdown menu. Another option for the user is to choose 'No Background'.

White Transparent: rgba(255,255,255,.7)

White Opaque: rgba(255,255,255,1)

Black Transparent: rgba(0,0,0,.7)

Black Opaque: rgba(0,0,0,1)

Light Gray Opaque: rgba(200, 200, 200, 1)

Dark Gray Opaque: rgba(89, 89, 85, 1)

4. Text color

Text colors are restricted to Black (#000000) or White (#FFFFFF). The site builder's selection of either color is further restricted based on the background color he/she has chosen. In order to maintain appropriate contrast ratios for accessibility purposes, the following text/background color combinations are strictly those listed below: