"White Card" Column Content: How-To

While in editing mode for a page your are editing, click the "Toggle Side Panel" option in the upper-left of the browser window. Then click the "VT Components" tab.

Drag over a Container component.

Drag over a "Multi Columns" component.

Create the content that will be in the column. This styling works best with very simple, short content. Example:

• lead image
• heading
• supplementary text

In the example below you see each column has a image, a heading (must be in Heading 3 style) and a paragraph (in this case, showing a job title).

Once content is complete, left click the container component holding the multi columns.

Click the "wrench" icon for configuration options.

In the CSS Class field, type "colwrap".

Click the "checkmark" to accept the changes.

There may be a time you need to hide the white card styling (such as if you only have columns with content and a third column that is blank). In this instance, you will drag a container component to the blank column.

Left click on the container you just dragged over and click the "wrench" icon for configuration options.

In the CSS Class field you will type "hidecol".

Click "Preview" to see your changes.

Example below: two of three columns in a Multi Column component are shown.