Column Control component
The Column Control component is used to lay out content side-by-side in columns.
Component(s) you might want to use with this one:
- News List
- Events List
- External
- Media Player
- Youtube Video
2 Columns
(50%, 50%)
(75%, 25%)
(25%, 75%)
(33%, 67%)
(67%, 33%)
(60%, 40%)
(40%, 60%)
(70%, 30%)
(30%, 70%)
(55%, 45%)
(45%, 55%)
3 Columns
(33%, 33%, 33%)
(50%, 25%, 25%)
(25%, 50%, 25%)
(25%, 25%, 50%)
4 Columns
(25%, 25%, 25%, 25%)
5 Columns
(16%, 16%, 33%, 16%, 16%)
(20%, 20%, 20%, 20%, 20%)
Vertical separators: apply a vertical line separating the content between columns; this option is rarely used and not typically recommended
No gutter: remove the white space between columns
Double margin: increase the white space between columns (only supported with certain configurations; see the component for details)
Equal height: make components inside columns the same height (only supported with certain components; see the component for details)
Responsive settings: set the number of columns to ‘stack‘ vertically when the page is viewed on a tablet or mobile phone. This depends on the number of columns since tablets can typically accommodate more content on a wider screen vs. a phone. If in doubt, leave the settings at the default values (i.e., “1” for both tablet and mobile).
No side margin: remove white space from the sides of the component when viewed on mobile; if in doubt, leave blank as the default
Additional class: used on a case-by-case basis by UCS designers only
Accessibility
The Column Control component provides a method for laying out content in columns that is both accessible and responsive.
When using the Column Control component, follow accessibility best practices for all of the content in the columns (e.g., heading hierarchy, alt text on images, descriptive link text, etc.).
Four equal-height Buttons in a row
Settings
- Column layout: 4 Columns (25%, 25%, 25%, 25%)
- Double margin: enabled
- Equal height: enabled (applies to Button)
- Stack after (tablet): 2
- Stack after (mobile): 1
All other options left disabled or default (blank)
An Events List and a News List side-by-side
Settings
- Column layout: 2 Columns (33%, 67%)
- Stack after (tablet): 1
- Stack after (mobile): 1
All other options left disabled or default (blank)
Note: The Events List component is set to ‘Limit: 3’ and the News List component is set to ‘Grid size: 2 columns x 1 row’ for an evenly balanced display of items within the Column Control.
Dos
- Do consider whether the content is suitable for and best served by the Column Control component
Don'ts
- Don't nest a Column Control inside another Column Control.
- Don't use a Column Control as a table if in fact a table is needed to present tabular data.
- Don't use a Column Control to lay out Heroes of equal height for the ‘look’ of cards or buttons. This is an outdated technique sometimes seen on older pages that is not recommended since Heroes were developed for a specific purpose. Use the Button component or use Cards in a Card Deck component instead, depending on the content.
- Don't display too many columns in a narrow space.
Helpful tips & "gotchas"
- Once inserted, the component can't be moved using cut-and-paste nor by dragging, UNLESS you previously inserted a Box component to contain the Column Control.
- Vertical separators in a multi-column layout should generally be avoided. They can make content look cramped — they reduce the width of the columns and often simply add visual clutter. Note: The length of the vertical separator is determined by the length of the content to its left.
- If you need six columns in a row, this can be done using the Tiles component but consult a UCS webmaster before doing so to determine if this is the best solution for your use case.
Training
The Column Control component is covered in the Advanced training course.
Need support?
The Web team is here to help.