Grid

The default grid has 16 columns and expands to a maximum width of 1440 pixels. We use CSS Grid names to mark [start] and [end] positions for full-width display, by default the grid will be at maximum size and aligned to the [wrapper] area horizontally. For tablet the default grids has 8 columns and for mobile four columns.

Two other grids have been created (keeping the same grid-gap throughout). These are for when you have an odd number of equal size cards grid-three-card (yellow) and grid-five-card (pink) these have 15 columns for obvious reasons. Examples of all the equal size card grids are below (from 2 - 5 cards). Use the toggle grid switch (top right) to view them. Update: These grids are all responsive, however work needs to be done on the three, four and five column fold up.

.group [ grid-two-card ] [ aspect-16-9 ] [ cc ]

.card [ cc ]

.card__text [ cc ] [ width-80 ]

Amet fringilla tempus tortor sollic itudin non purus

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

.card [ aspect-4-3 ]

.card__text [ width-70 ] [ ee ]

Veniam, quis nostrud exercitation ullamco

Sed do eiusmod tempor incididunt ut labore. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipiscing elit!

.grid-two-card

Feugiat nullam in facilisis eu lorem ipsum

Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis lorem ipsum dolor sit eu.

Book Now Another link

Feugiat nullam in facilisis eu lorem ipsum

Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis lorem ipsum dolor sit eu.

Book Now Another link

.grid-three-card

Feugiat nullam in facilisis eu lorem ipsum

Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis lorem ipsum dolor sit eu.

Book Now Another link

Feugiat nullam in facilisis eu lorem ipsum

Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis lorem ipsum dolor sit eu.

Book Now Another link

Feugiat nullam in facilisis eu lorem ipsum

Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis lorem ipsum dolor sit eu.

Book Now Another link

.grid-four-card

Feugiat nullam in facilisis eu lorem ipsum

Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis lorem ipsum dolor sit eu.

Book Now Another link

Feugiat nullam in facilisis eu lorem ipsum

Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis lorem ipsum dolor sit eu.

Book Now Another link

Feugiat nullam in facilisis eu lorem ipsum

Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis lorem ipsum dolor sit eu.

Book Now Another link

Feugiat nullam in facilisis eu lorem ipsum

Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis lorem ipsum dolor sit eu.

Book Now Another link

.grid-five-card

Feugiat nullam in facilisis eu lorem ipsum

Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis lorem ipsum dolor sit eu.

Book Now Another link

Feugiat nullam in facilisis eu lorem ipsum

Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis lorem ipsum dolor sit eu.

Book Now Another link

Feugiat nullam in facilisis eu lorem ipsum

Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis lorem ipsum dolor sit eu.

Book Now Another link

Feugiat nullam in facilisis eu lorem ipsum

Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis lorem ipsum dolor sit eu.

Book Now Another link

Feugiat nullam in facilisis eu lorem ipsum

Eu urna sit in sit tempus, montes, sed consectetur cursus. Feugiat nullam in facilisis lorem ipsum dolor sit eu.

Book Now Another link

GROUP HEADER/ FOOTER
A .group can contain .group__header and .group__footer items. This gives administrators the ability to add an introduction and/or a footnote (a very common scenario)

GRID
By default the .group uses the standard grid for placement of cards. The following grids are available:
[ grid-two-card ]
[ grid-three-card ]
[ grid-four-card ]
[ grid-five-card ]

FUNCTIONAL CLASSES
These can be assigned to a .group and these affect the presentation of the .card items within. Examples of these:
[ flush ] (edge to edge)
[ media-* ] (values: start, wrapper-start, end, wrapper-end) for media-text card. [ surface-* ] (values: 1, 2, 3, 4, brand, brand-alt, dark, light) gives background color
[ odd-surface-* ] and [ even-surface-* ]
[ surface-card-only ] ensures only the cards are affected by the surface color
[ bespoke-* ] affects card position (see bespoke section for examples)