x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="card flex flex-col overflow-hidden p-0"><figure> <img alt="Card image" src="/assets/unsplash-4-291073d3.webp" /></figure><div class="p-6"> <div class="flex flex-col"> <h3 class="font-semibold leading-none mbe-1">Card Title</h3> </div> <div class="flex flex-col gap mb-2"> A card component has a figure, a body part, and inside body there are title and actions parts </div> <div class="flex items-center justify-end gap"> <button type="button" class="btn btn--primary">Read more</button> </div> <div> </div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="card flex flex-col overflow-hidden p-0"> <figure> <%= image_tag "unsplash-4.webp", alt: "Card image" %> </figure> <div class="p-6"> <div class="flex flex-col"> <h3 class="font-semibold leading-none mbe-1">Card Title</h3> </div> <div class="flex flex-col gap mb-2"> A card component has a figure, a body part, and inside body there are title and actions parts </div> <div class="flex items-center justify-end gap"> <button type="button" class="btn btn--primary">Read more</button> </div> <div></div>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
.card { background-color: var(--color-surface); border-radius: var(--rounded-xl); border-width: var(--border); box-shadow: var(--shadow-sm); padding: var(--size-6); position: relative; &[aria-disabled="true"] { pointer-events: none; } &[aria-disabled="true"]::after { background-color: rgba(0, 0, 0, .3); border-radius: inherit; content: ""; inset: 0; position: absolute; }}.card-check { background-color: var(--color-surface); border-radius: var(--rounded-xl); border-width: var(--border); padding: var(--size-3); &:has(:checked) { background-color: rgb(from var(--color-border-light) r g b / .5); border-color: var(--color-border-dark); }}
Java Script is not required or multiple files are needed, check the notes.
No notes provided.