cards

Cards Grid

The .cards component displays a collection of card molecules in a responsive grid layout. Mobile: 1 column, Tablet & Desktop: 2 columns by default (configurable with .-columns-N modifiers)

Default Grid (2 columns on tablet & desktop)

Card Title One

Without a count modifier, cards default to 2 columns on tablet and desktop.

Card Title Two

Without a count modifier, cards default to 2 columns on tablet and desktop.

Two Columns (`.-columns-2`)

First Card

Quisque tristique sagittis dignissim. Morbi vitae orci sollicitudin, viverra massa quis.

Second Card

Aenean ac porta nisl. Ut eu bibendum nisi. Vestibulum et consectetur arcu.

Three Columns (`.-columns-3`) - 6 cards shown

Card One

3 columns on desktop. Extra cards flow to next row.

Card Two

3 columns on desktop. Extra cards flow to next row.

Card Three

3 columns on desktop. Extra cards flow to next row.

Card Four

3 columns on desktop. Extra cards flow to next row.

Card Five

3 columns on desktop. Extra cards flow to next row.

Card Six

3 columns on desktop. Extra cards flow to next row.

Four Columns (`.-columns-4`) - 7 cards shown

Card One

4 columns on desktop. Orphan cards align left.

Card Two

4 columns on desktop. Orphan cards align left.

Card Three

4 columns on desktop. Orphan cards align left.

Card Four

4 columns on desktop. Orphan cards align left.

Card Five

4 columns on desktop. Orphan cards align left.

Card Six

4 columns on desktop. Orphan cards align left.

Card Seven

This orphan card stays its natural width, aligned left.

Five Columns (`.-columns-5`)

Card One

Five equal-width cards in a row on desktop.

Card Two

Five equal-width cards in a row on desktop.

Card Three

Five equal-width cards in a row on desktop.

Card Four

Five equal-width cards in a row on desktop.

Card Five

Five equal-width cards in a row on desktop.