Component documentation

Basics

Components

Objects

Utilities

CSS Grid based grid for laying out cards.

Card grid with auto fitted items

Without configuration (see below) the grid is auto fitted with items. Cards have a minimum width of 25.6rem.

Content

<div class="o-card-grid">
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
</div>

.o-card-grid
    each val in [1,2,3,4,5,6]
        .c-card
            .c-card__body
                p Content

Card grid with predefined columns

To define cell widths within a direction-level, instead of the individual cell level, add the class .[size]-up-[n] to a card-grid, where [n] is the number of cells to display per direction, and [size] is the breakpoint at which to apply the effect.

Available sizes: small, medium, large, extra-large

Max columns: 6 (can be overridden by setting $o-card-grid-max-columns)

Content

<div class="o-card-grid small-up-1 medium-up-2 large-up-3">
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
</div>

.o-card-grid.small-up-1.medium-up-2.large-up-3
    each val in [1,2,3,4,5,6]
        .c-card
            .c-card__body
                p Content

Card grid with statically placed item

You can place items fixed by using wrapping the static item in a .o-card-grid__item container. You can then define the start column/row and the amount of columns/rows the item spans. This is the same syntax as used for defining start/end rows/columns on css grid items.

Examples:

First row, third column

.o-card-grid__item(
    data-row=1,
    data-column=3
)

Second row, spanning 3 columns

.o-card-grid__item(
    data-row=2,
    data-column-span=3
)

Second column, spanning two rows

.o-card-grid__item(
    data-column=2,
    data-row-span=2
)

Last column, spanning 2 rows

.o-card-grid__item(
    data-column=-1,
    data-row-span=2,
)

Content

<div class="o-card-grid">
    <div class="o-card-grid__item" data-row="1" data-column="-1" data-row-span="3" data-column-span="1">
        <div class="c-card c-card--background-gray u-maximize-height">
            <div class="c-card__body">
                <p>Content</p>
            </div>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
    <div class="c-card">
        <div class="c-card__body">
            <p>Content</p>
        </div>
    </div>
</div>

.o-card-grid
    .o-card-grid__item(
        data-row=1,
        data-column=-1,
        data-row-span=3,
        data-column-span=1
    )
        .c-card.c-card--background-gray.u-maximize-height
            .c-card__body
                p Content

    each val in [1,2,3,4,5,6,7,8,9]
        .c-card
            .c-card__body
                p Content