Collapsing columns live

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

Example

Example

.coop-l-all-6 .coop-l-collapse
.coop-l-all-6 .coop-l-collapse
.coop-l-all-6 (.coop-l-collapse on .coop-l-row)
.coop-l-all-6 (.coop-l-collapse on .coop-l-row)

HTML

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

                            

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