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
.card { background-color: var(--color-surface); border-radius: var(--rounded-xl); border-width: var(--border); box-shadow: var(--shadow-sm); padding: var(--size-6);}
Java Script is not required or multiple files are needed, check the notes.
No notes provided.