Card-grid

Jump To:

Lightweight CSS Grid setup for card components

Demos

Standard Card Grid

A responsive grid that automatically fills rows with cards.

Card 1

Content for the first card.

Card 2

Content for the second card.

Card 3

Content for the third card.

<div class="card-grid">
  <article class="card">
    <div class="card__body">
      <div class="card__main">
        <h3 class="card__title">Card 1</h3>
        <p>Content for the first card.</p>
      </div>
    </div>
  </article>
  <article class="card">
    <div class="card__body">
      <div class="card__main">
        <h3 class="card__title">Card 2</h3>
        <p>Content for the second card.</p>
      </div>
    </div>
  </article>
  <article class="card">
    <div class="card__body">
      <div class="card__main">
        <h3 class="card__title">Card 3</h3>
        <p>Content for the third card.</p>
      </div>
    </div>
  </article>
</div>

Compact Card Grid

A grid with smaller minimum column widths and tighter gaps.

Compact 1

Compact 2

Compact 3

Compact 4

<div class="card-grid card-grid--compact">
  <article class="card">
    <div class="card__body">
      <div class="card__main">
        <h3 class="card__title">Compact 1</h3>
      </div>
    </div>
  </article>
  <article class="card">
    <div class="card__body">
      <div class="card__main">
        <h3 class="card__title">Compact 2</h3>
      </div>
    </div>
  </article>
  <article class="card">
    <div class="card__body">
      <div class="card__main">
        <h3 class="card__title">Compact 3</h3>
      </div>
    </div>
  </article>
  <article class="card">
    <div class="card__body">
      <div class="card__main">
        <h3 class="card__title">Compact 4</h3>
      </div>
    </div>
  </article>
</div>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "gap" : 1.5rem,
  "min-width" : 20rem,
  "compact-gap" : 0.75rem,
  "compact-min-width" : 14rem,
);

File Information

File: _card-grid.scss
Group: card-grid
Type: variable
Lines (comments): 12-17
Lines (code): 19-24

Map Properties

Name	Type	Default	Description
gap	Dimension	1.5rem	The grid gap of the card-grid.
min-width	Dimension	20rem	The min-width for the implicit grid columns.
compact-gap	Dimension	0.75rem	The grid gap of the card-grid--compact.
compact-min-width	Dimension	14rem	The min-width for the implicit grid columns of the card-grid--compact.

Mixins

set()

Mixin

Change modules $config

File Information

File: _card-grid.scss
Group: card-grid
Type: mixin
Lines (comments): 26-29
Lines (code): 31-33

Examples

@include ulu.component-card-grid-set(( "property" : value ));

Parameters

Name	Type	Description
$changes	`Map`	Map of changes

Require

$config

styles()

Mixin

Prints component styles

File Information

File: _card-grid.scss
Group: card-grid
Type: mixin
Lines (comments): 44-46
Lines (code): 48-75

Examples

@include ulu.component-card-grid-styles();

Require

get()

Functions

get()

Function

Get a config option

File Information

File: _card-grid.scss
Group: card-grid
Type: function
Lines (comments): 35-38
Lines (code): 40-42

Examples

@include ulu.component-card-grid-get("property");

Parameters

Name	Type	Description
$name	`Map`	Name of property

Require

$config