ASCII text
1
.card {
2
box-shadow: var(--shadow-card);
3
margin: var(--margin-card);
4
border-radius: var(--radius-card);
5
background: var(--color-card);
6
color: var(--color-card-text);
7
border: var(--border-card);
8
overflow: hidden; /* So rounded corners can cut through the content */
9
display: flex;
10
flex-flow: column nowrap;
11
height: 100%;
12
}
13
.card > :is(section, header, footer) {
15
padding: var(--padding-card);
16
}
17
.card > figure > figcaption {
19
padding: var(--padding-card-figcaption);
20
}
21
.card:not(:has(figure)) {
23
padding-top: var(--padding-card-top); /* Figures should be flush with the top */
24
}
25
figcaption {
27
color: var(--color-figcaption-text);
28
}
29
.card-outline {
31
box-shadow: none;
32
border: none;
33
border-radius: var(--radius-outlined-card);
34
outline: var(--outline-outlined-card);
35
}
36
.card-horizontal {
38
flex-flow: row nowrap;
39
}
40
.card-horizontal > figure {
42
height: auto;
43
max-width: var(--figure-max-size-horizontal-card);
44
}
45
.card-horizontal > figure + :is(section, header, footer) {
47
/* Beside figure */
48
padding-top: var(--padding-card-top);
49
}