Row w/ Background Snippet

This snippet creates a row with either a solid color background or an image background that can be used with Touts or a full-width statistic or quote. Content over the image is optional. The text has a predetermined color that meets contrast requirements for accessibility.

Row with background snippet.

View the row with background options in the Style Guide.

  1. Insert the image in the Image field, if desired. Using the Image Editor, crop a Banner image type and insert the largest size created. The image should be at least 1200 wide in the Main Content region or 1600 wide in the Additional Content region to avoid pixilation.
  2. If not using an image, select the desired color in the Background Color field. When using the snippet in an asset you must type in the code instead (without quotation marks):
    1. For Gold enter “yellow”.
    2. For Black enter “black”.
    3. For Dark Gray enter “dark-gray”.
    4. For Light Gray enter “smoke-gray”.
    5. For White enter “white”.
  3. Enter content or the Touts snippet in the Content field. To style the text like the quote in the example image above, select the quote part of the text then choose the Largest Georgia option from the Styles dropdown. To center the content, select it and choose Align Center from the Styles dropdown menu in the toolbar.

(Video has no sound.)