#  Multiple Card Bands 

 



##  Cards with Photo and Heading (with/without teaser text)

 ![image cards](/sites/g/files/omnuum4921/files/peabody/files/screen_shot_2022-03-17_at_12.17.16_pm.png)

 

 1) Create an HTML widget with the following content and settings based on the selections (annotated) in the style dropdown. *Note:* No special class name(s) are needed in the HTML widget when creating card bands. Save.

 2) Create a Columns widget, give it an Widget Description title (internal purposes only), choose a configuration (typically 50/50% or 33/33/33%), drag the HTML widgets created in Step 1 into the Columns widget, apply the class name "band image-cards" in the css class name at the bottom of the form > Save.

   ![css class name](/sites/g/files/omnuum4921/files/styles/hwp_1_1__720x720_scale/public/peabody/files/screen_shot_2022-03-17_at_1.14.21_pm.png?itok=EvKzJFSB) 

 

 3) Drag the Columns widget created in Step 2 into the page layout > Save.

   ![layout](/sites/g/files/omnuum4921/files/styles/hwp_1_1__960x960_scale/public/peabody/files/screen_shot_2022-03-17_at_1.34.35_pm.png?itok=ukdBobg0)