Base Features

Header RTE
Product List

Header RTE

The header RTE is to be a full featured RTE field for content authors.

It is up to the author (or on request on FE dev) to build out the styles for the header text.

Product List

The product list can have as many products as an author desires.

The features of the list include

Wrapping link to the product page
RTE based Title and description (CA controlled)
Fluid column widths (more details below)

Product list Columns & imagery

The column count at desktop is determined by the size of the product images. They will also automatically wrap at lower breakpoints due to flex box.

Some important notes about images:

All images must have identical dimensions
There is only 2px spacing between each column therefore it is strongly encouraged to create space within the image itself and not rely on the markup/css for spacing, i.e. use png files with transparent backgrounds.

RTE field Note

The header and the product description are both RTE fields and up to the content author to define the text based styles such as color, font weight, text alignment, and etc.

Optional Features

There are 4 optional features:

Background Color - filling fields BgColor field in json
Badges - filling field BadgesList field in json
CTA Link
Footer (footnote & FDA Statement)
Roof - setting field Roof field in json to true and filling field RoofImage fields in json.

All mentioned features/options can be used together or not at all.

Techchnically, all a user needs is the header and the product list for a complete component.

Background Color

Set on the main article.
Can accept linear gradients

Badges

The badge section is meant for 4 badges. However, we can't limit how many an authors.

Luckily the CSS will handle any amount automatically via flex box.

A max-width of 120px is set on the badge images and the columns that they're in will expand accordingly.

CTA Link

Text field to accept hex codes or rgba values for text color.

Footer

Text field to accept hex codes or rgba values for text color.
Border color has separate field for customization

Roof Image

The roof image allows a content author to add a custom image based separator. This image must have 3 qualities:

Top portion must match the background of the previous component
Middle portion must be the stylized imagery
Bottom portion must match the showcase's background color exactly.

There is an option for a mobile variant as well. If this variant isn't used then the desktop image will show on both mobile and desktop.