Position, Aspect and Width

Examples

To give flexibility in size and positional we can control the [ card ] aspect, position (e.g. cc, ee) and width on every level to give the widest possible control.

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

Two card grid

With a .group__header and .group__footer

.card [ cc ]
.card__text [ cc ] [ width-80 ]

Amet fringilla tempus tortor sollic itudin non purus

Sit amet

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 ] [ width-70 ]
.card__text [ ee ]

Veniam, quis nostrud exercitation ullamco

Incididunt ut labore

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 [ aspect-square ]
[ ee ]
Asperiores ipsa saepe dolor at qui deserunt earum autem sequi. Facilis rerum ut magni esse voluptatibus expedita provident est placeat saepe dolores!
— Amet Consectetur, Adipisicing Elit
[ aspect-4-3 ] [ ce ]
Asperiores ipsa saepe dolor at qui deserunt earum autem sequi. Facilis rerum ut magni esse voluptatibus expedita provident est placeat saepe dolores!
— Amet Consectetur, Adipisicing Elit