-
Notifications
You must be signed in to change notification settings - Fork 1
/
card.css
36 lines (35 loc) · 879 Bytes
/
card.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/**
<h1><section> cards</h1>
A card is paddingless/marginless so you can embed anything in it
<section><img src=https://picsum.photos/200 /></section>
you can even create a modal with it
<section>
<header><h4>However</h4></header>
<p>It support header/footer</p>
<footer>
<span>And it's good</span>
<span>Was this article usefull ?
<menu>
<button>yes 👍</button>
<button>no 👎</button>
</menu>
</span>
</footer>
</section>
**/
section {
margin: var(--padding) calc(var(--padding) * 2);
border-radius: var(--radius);
box-shadow: 0 1px 3px rgba(0,0,0,.3);
background: var(--back);
}
section > header {
background: var(--back-alt);
border-bottom: var(--border-size) solid var(--border-color);
padding: var(--padding) calc(var(--padding) * 2);
}
section > p {
padding: var(--padding) calc(var(--padding) * 2);
}
section > footer {
}