Web services

Columns

About this component

Columns align content side-by-side and can include any content component. The default is 2 columns, but there can also be 3 or 4 columns. Be careful when using 3- or 4-column layouts – the content can get really narrow at some screen sizes!

If you want to align an image to the side, use an image sizing and alignment method instead of columns.

Styling

Columns don’t have any decoration (border, background, etc.), but allow for text and other components to display side-by-side across the screen.

Responsive behavior for Columns

Columns have the number set in the shortcode on large screens (2, 3, or 4), 2 columns on medium screens, and 1 column on small screens.

How to use for Columns

Use the pcc-columns and pcc-column shortcodes.

Development info for Columns

Stylesheet location: /_source/styles/components/_columns.scss

  • For making columns in the HTML, learn more about making Foundation columns using the XY Grid. small-x should pretty much always be small-12 (100% width).
  • Don’t use the sizing classes size-percent-50 or size-percent-25. These classes are for sizing images. Also, columns with these classes won’t float next to each other because they have margin and padding.
<div class="grid-x grid-margin-x">
  <div class="small-12 medium-x large-x cell"> <!-- whichever sizes -->
    Content
  </div>
  ...
</div>
Example of Columns

Column 1. This column appears first in the row and will be on top on small screens.

Column 2. This column appears second in the row, in the middle on large screens.

Column 3. This column appears third and will wrap to a second line on medium screens.