x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="card flex flex-col overflow-hidden p-0"> <figure> <img alt="Card image" src="/assets/unsplash-4-291073d3.webp" /> </figure> <div class="flex flex-col gap p-4"> <div class="flex flex-col"> <h3 class="font-medium leading-none mbe-1">Card Title</h3> <p class="text-sm text-subtle">A card component has a figure, a body part, and inside body there are title and actions parts</p> </div> <div class="flex items-center gap"> <button type="button" class="btn btn--primary flex-1">Read more</button> </div> </div></div>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> <%= image_tag "unsplash-4.webp", alt: "Card image" %> </figure> <div class="flex flex-col gap p-4"> <div class="flex flex-col"> <h3 class="font-medium leading-none mbe-1">Card Title</h3> <p class="text-sm text-subtle">A card component has a figure, a body part, and inside body there are title and actions parts</p> </div> <div class="flex items-center gap"> <button type="button" class="btn btn--primary flex-1">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-4);}
Java Script is not required or multiple files are needed, check the notes.
No notes provided.