Back to the pattern library

Collapse

Collapsed columns have their padding removed. Columns can be collapsed individually, or whole rows can be collapsed at once by adding the class .collapse to a column or row.

More detailed information on how to use our grid can be found in our design guidance.

Example

Example

HTML

<div class="coop-l-row">
    <div class="coop-l-column coop-l-all-6 coop-l-collapse">
        <span class="demo-column-block--collapse">
            <span>.all-6 .collapse</span>
        </span>
    </div>
    <div class="coop-l-column coop-l-all-6">
        <span class="demo-column-block--collapse">
            <span>.all-6</span>
        </span>
    </div>
</div>
<div class="coop-l-row coop-l-collapse">
    <div class="coop-l-column coop-l-all-6">
        <span class="demo-column-block--collapse">
            <span>.all-6 (.collapse on .row)</span>
        </span>
    </div>
    <div class="coop-l-column coop-l-all-6">
        <span class="demo-column-block--collapse">
            <span>.all-6 (.collapse on .row)</span>
        </span>
    </div>
</div>

SCSS

The styles for this pattern can be found in the foundations on github.

JS

There is no javascript needed for this component.

Design and content

There is no design information for this pattern.

Accessibility

We are currently working on this.

For more information see our general guide on accessibility.

Suggest a pattern

Use this form to suggest a new pattern or a change to an existing one.

Suggest a new pattern or a change