By using this site, you agree to have cookies stored on your device, strictly for functional purposes, such as storing your session and preferences.

Dismiss

 cards.css

View raw Download
text/plain • 1.09 kiB
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
14
.card > :is(section, header, footer) {
15
padding: var(--padding-card);
16
}
17
18
.card > figure > figcaption {
19
padding: var(--padding-card-figcaption);
20
}
21
22
.card:not(:has(figure)) {
23
padding-top: var(--padding-card-top); /* Figures should be flush with the top */
24
}
25
26
figcaption {
27
color: var(--color-figcaption-text);
28
}
29
30
.card-outline {
31
box-shadow: none;
32
border: none;
33
border-radius: var(--radius-outlined-card);
34
outline: var(--outline-outlined-card);
35
}
36
37
.card-horizontal {
38
flex-flow: row nowrap;
39
}
40
41
.card-horizontal > figure {
42
height: auto;
43
max-width: var(--figure-max-size-horizontal-card);
44
}
45
46
.card-horizontal > figure ~ :is(section, header, footer) {
47
/* Beside figure */
48
padding-top: var(--padding-card-top);
49
}