Skip to content
Design System
  • Home
  • Settings
  • Styles
  • Layouts
  • Components
  • Scripts
  • Templates
  • Access control banner
  • Activity
  • Archived content
  • Breadcrumbs
  • Cards
  • Collapsible containers
  • Columns
  • Content slider (carousel)
  • Crosslinks (You may also like)
  • Disclosure button
  • Evangelists
  • Fifty-fifty
  • Footer
  • Group list
  • Header
  • Hero
  • Image component
  • Members
  • Navigation
  • Navigation with new logo v1
  • Navigation with new logo v2
  • Notes
  • Pagination
  • Pre-footer
  • Quote component
  • RSS
  • Table of contents
  • Tag list
  • Text component
  • Translations
  • Video component

Columns

Columns are used to gather groups of cards into listings. They rely on Flexbox.

¶Columns for cards with images

<div class="component component--columns component--columns--images">
    <div class="component--columns__intro">
        <h2>Section heading for these teasers</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    </div>
    <ul class="clean-list" role="presentation">
        <li>
            [Card markup...]
        </li>
        <li>
            [Card markup...]
        </li>
        <li>
            [Card markup...]
        </li>
    <ul>
</div>

¶Columns for cards with icons

<div class="component component--columns component--columns--icons">
    <div class="component--columns__intro">
        <h2>Section heading for these teasers</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    </div>
    <ul class="clean-list" role="presentation">
        <li>
            [Card markup...]
        </li>
        <li>
            [Card markup...]
        </li>
        <li>
            [Card markup...]
        </li>
    <ul>
</div>

¶Considerations

The examples above use an unordered list to create the spaced columns. Because the cards pattern uses headings that fit in with the surrounding page hierarchy, the unordered list is given role="presentaton" to reduce the verbosity of announcements for users of Assistive Technology.

Note the slightly different classes depending on whether the cards within the columns include an image (.component--columns--images) or an SVG icon (component--columns--icons). This is because of slight differences in the design for each.

CSS quantity queries are used to determine the behaviour of the columns according to the number of cards they contain. Use Quantity Queries Builder to roll your own quantity queries.

Copyright © 2025 W3C - generated 10 Jan 2025, 12:43:28 UTC

Feedback is welcome and can be submitted as a GitHub issue.