Card (Vertical and Horizontal)

Building in the WCMS

Creating a Card

Use the Add Element option to add a card to Visual Composer. In the card Settings, set the card properties and defaults for the card sections. Once you have added the card, click the plus sign inside the card cell in Visual Composer to add a section.

(Card is a single-use content element that must be created in Visual Composer. To create a reusable card or a card that can be inserted into a WYSIWYG field, use the “New Content” option in the WCMS content browser to create a reusable Visual Composer module. Then insert the card into the reusable module.)

Setting Measurement Options

Depending on the layout, a card can have several measurement options, for example: image size, image padding, and section size. The default values work in most cases. When the defaults do not produce the optimal card layout, experimentation is the best approach.

For side-by-side sections, one option you should always check is the section width: 25%, 33%, or 50%. This value depends on the number of sections you are placing in the card (two to four). For example, when you are building two sections, typically you should select 50%; for three sections, select 33%.

Linking Options

Using Clickable Card Subcomponents. You can enter link targets for several card subcomponents: card header, section title, section action button / link text. You can also insert links into a section description using the <a> tag. For “special links” to non-HTML files and external sites, the appropriate link icon and file details automatically display in the subcomponent.

Making Entire Card Clickable. To make an entire card clickable, check “Make Entire Card Clickable” in the card General tab and then enter the link target in the associated field. This disables the link target fields for header and title and strips any links inserted into text. You can include an action button or action link text, but the button /link exhibits no on-hover behavior. If the link is to a non-HTML file or external site, a card footer is automatically displayed with the link decoration and file details, as applicable. Use this option for single-section cards only.

WCMS Quick Facts

To make all cards in the same row the same height, check the row property “Make modules in row same height.” Note that this option does not work as well when the images are below the card text.

When using side-by-side format for a vertical card, don’t forget to set the section width (e.g., if 2 sections, select 50% width to span the full Visual Composer column).

For a vertical card with one section, if you want an image to expand the full width, use the text-box module instead of the card element. In the text-box module settings, check “Enable card styles.”