Customize with content cards in Composer

Misty Flowers

May 08, 2025 15:44

Content cards are used in web design to grab attention, highlight key information, and improve readability. They help guide users through content by making important details stand out. You might see them labeled as "callouts" in your Style Guide.

This article will help you understand how you can use content cards on your Composer pages to vary the layout of your content and make your pages more visually appealing and engaging!

Step 1: Become familiar with all of your content cards

Each site's Style Guide comes with a variety of content cards that can be placed on Composer pages and edited in many different ways.

Important Note

Content cards are styled content elements created with custom classes. The custom classes for each content card can only be applied to Content elements. It's not possible to apply them to other element types in Composer.

Before you jump in, navigate to your Production Branch > Style Guide and find the section called "Blockquotes and Callouts."

style guide showing content cards 2.gif

Important Notes

Each site follows the structure of the theme or custom design in which it was created.
The number and variety of content cards may vary depending on theme or design.

Step 2: Select a content card you'd like to try out

Maybe you found a content card that you'd like to place onto your Composer page and customize with your own content? Here's how it works:

Browse through your content card options, remembering that you will be able to change the size, width, image, and text once you have made a copy and pasted this element onto your composer page.
Once you select one to use, enter into Compose mode by toggling the Composer button in the bottom left corner of your Style Guide page.
Click the Copy button on the Content element settings icons for the content card you'd like to use. It will now be retained in the clipboard to be used on another page.

Step 3: Paste the content card onto your Composer page

Once you return to your other page, click Add element in the spot where you want to paste this new content card that is now visible in the clipboard.

Step 4: Modify and customize the content and styling for your needs

Now you can go in to this new styled element and do so many fun things to add engagement onto a Composer page.

Change hidden text or images

Having trouble finding the way to modify or update text or an image in a Content element or content card? Here's where it might be hiding!

Click into the Content Element settings.
Expand out the Design settings.
Click into Header Content or Footer Content to swap out images and/or text.

Best practices for content cards

Click Edit content and add your own text into the space.
Use Page Layout and Appearance and/or Column Layout elements to vary the structure of a page, which will in turn change the width of your content cards.
Alternate blank or lined content cards with solid-colored cards to add variety.
Add buttons into content cards as call-to-actions for your visitors.
Consider using the Shared elements feature to save content card colors to the Shared elements tab of your Element library.