Card: Quote

[data-type="quote"]

Examples of the Quote .card used in a number of different .group configurations.

CMS implementation: The user will need to have the ability to assign a .surface-* class to a Quote card. The options should initially use all the available .surface-* classes and also a default value being 'none' (in case a .surface-* class is assigned at .group level). If a background-image is used then it will be necessary for the user to set a surface class, i.e. .surface-light or .surface-dark. This is because the .surface-* classes control child attributes like text and link color.

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
.grid-three-card
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
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 from card__media

Saepe dolores

.grid-three-card
aspect from group
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 from card
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 from card__media

Saepe dolores

.grid-two-card [ aspect-square ]
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
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
[ flush ] [ aspect-4-3 ] [ blend-luminosity ] [ surface-helper-red ]
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
[ flush ] [ surface-helper-blue ] [ aspect-16-9 ] [ add-gap ]
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
.group .surface-dark
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
.group .flush
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