Virginia Tech® home

MultiColumns

This component can be used to break up chunks of content for better presentation.  It is commonly seen with news feeds, employee listings, and highlighted content.

White Card Columns

The use of this type of content is to visually highlight an item that may include an image, linked heading, and short supplementary text..

Examples include:

  • Employee
  • Initiative
  • Web section highlight

Currently these can be created using a list component, or with a container-housed multi-column component with the appropriate CSS class.

How-To: White Card Columns

In the above example from www.research.vt.edu, a multi-column component has been used to showcase three highlighted stories.

 

In the above example there is a running list of Research and Innovation employees using the list component to pull all child pages of the Contact page.

Creating with a List Component:

This styling is created automatically with a list component when "column" is chosen in the display options.

Creating with a Container and Multi-Column component

Drag over a container component and in its properties, go to the CSS class field and type “colwrap".

Drag over a multi-column component inside of the container you just placed.

Multi-column properties:

  • Number of columns: you can set to 3 or 4 depending on if a right column is present.  3 for with, 4 for without.

Inside of a column:

  • Image component at the top
  • Titles are created with the <h3> Tag.  In the contact page example above, the title is the Employee name.  These titles are linked to a page.
  • Supplementary paragraphs are made with the <p> tag.
  • If a call-to-action button is used, they are primarily set to the right-aligned.  

One thing to note - if you have a running list of columns and there needs to be an odd row of columns due to content not being present, you can drag over a container component to those respective columns and apply the CSS class “hidecol” which will hide the column.

 

In the above example, a listing of experts has an odd number content where the last multi-column can’t be filled with content.  A container with the CSS class of “hidecol” has been placed to create the effect of a column not existing.  Please note - list components automatically hide columns where content doesn’t exist.