Four Across Row

Summary

A component made up of two different components with four product cards, links & CTA. It also has option to add/change background color, background image, cta by editing the Four Across Row Component. Click here to see this component live.

Display

Desktop ^{Desktop Image size 390 x 420}
Tablet ^{Tablet Image size 390 x 420}
Mobile ^{Mobile Image size 390 x 420}

---

Create Component

Steps:

1. Check layout and click View/Edit Layout.

2. Click + Add New Component.

3. Select Four Across Row.

4. Enter component name and component code.

5. Set component as Active.

6. Enter following inputs in admin.

7. Select ••• and click Add Child.

8. Select Promotional Cards.

9. Follow steps 7-8 until you have 4 Promotional Cards.

Attention

Component code should be unique to each component.

---

Admin Display

Components & Component Attributes

Four Across Component

Attribute	Description	Required
Heading	Header text at the top	No
Background Color	Choose a background color for container	No
Background Image	Choose a background image for container	No
Text Color	Choose color for text content	No
CTA Link	Add a link to CTA button	No
CTA Text	The copy to display in the CTA button	No
CTA Style	The style of the CTA button to apply	No

Promotional Card Component

Attribute	Description	Required
Image	The image that will be displayed for the component	Yes
Link	The link for the image and CTA button	No
Heading	Header text below image	No
Text	Text copy below header	No
CTA Text	The copy to display in the CTA button	No
CTA Style	The style of the CTA button to apply	No

Notes

Notes

To build Four Across Row make sure to add (4) Promotional Card components as children.

If looking to use 2-3 Promotional Card Components consider using Side by Side Promotional Row Component.

Background color value should be in Hex Code ex. #FFFFFF.

Components can be set to hide or show using Not Valid Before & Not Valid After.

Default

Default

If left unselected, Four Across Component's CTA Text & CTA Link defaults to Primary style.

If left unselected, Promotional Card Component's CTA Type defaults to Link style.