Choosing the card size

By default, cards display three across on desktop. To change the layout, add one additional class alongside theme-logic-cards.

Three size options:

cards-sm — small cards
Five cards across at desktop width. Wraps to fewer columns on narrower screens. Best for logos, small icons, or tight content.

cards-md — medium cards (default)
Three cards across at desktop width. This is what you get if you don't add a size class. Best for most use cases.

cards-lg — large cards
Two cards across at desktop width. Gives each card more room to breathe. Best for featured content with longer descriptions or larger images.

Example combinations:

• theme-logic-cards cards-sm
• theme-logic-cards cards-md
• theme-logic-cards cards-lg

Using images in cards

Images work great inside cards — they anchor the card visually and give each one a distinct identity. To make sure they render correctly, follow two rules:

1. The image must be the first thing in the widget — before any heading, paragraph, or other content.
2. Wrap the image in a Heading 6 (<h6>), not a paragraph (<p>). In the HL rich-text editor, click the image, open the paragraph-format dropdown, and choose Heading 6. The plugin uses this wrapper to identify the image as the card's lead visual and style it appropriately.

Example — correct structure:

<h6><img src="..." alt="..."></h6>
<h3>Annual Conference</h3>
<p>Three days of sessions, networking, and keynotes.</p>