• Don’t use back to back overlap components unless you are alternating images.
• If using back to back overlap components, make sure on mobile that you are setting the frame to “Reverse Columns On Mobile”

Background parameters: (All colors available)

• Top background color
• Bottom background color

Controls:

• Vertical spacing
• Vertical padding (can collapse padding)

Theming:

• Does not have a theme because it can have two different colors. Whatever you put in the placeholder will control the theme for this section

• One column frame
• One column frame - Narrow
• Highlight section component
• Card deck

Image overlaps top and bottom option:

• Image height = copy height + 224px of internal padding + 48px (2) for overlap
• Note that it only overlaps on top when it switches to mobile

Image flush bottom option:

• Image height = copy height + 224px of internal padding + 48px for overlap (hidden overlap on bottom of 48px)
• Desktop: You need the whole image. DO NOT cut off image. It is made to look like that through code. That next, following HSC sits above the image to make it look like its cut off.

• When you change the padding, it applies the padding to the top and bottom of the component
• On mobile, it collapses the same as the HSC.
• By default it loads in a white background color for both top and bottom color properties and looks like an HSC
• Select edit component properties to update these colors
• It was built with the expectation that it would need a block of color behind the main item.