Previews

No matching results.

Pages

No matching results.

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.