Skip to content
Docs
💻 | Components
Content Cards

Content Cards Component

Content cards in a webpage are graphical elements that display bite-sized information or media, often in a grid layout. They can be used to showcase a variety of content, such as articles, products, or images, and are designed to be easily scannable and engaging for users. Content cards can also include interactive elements, such as buttons or links, to encourage users to take action.

Technology

Technology

542 products

1<div class="w-48 rounded-2xl overflow-hidden bg-white">
2    <img alt="" src="https://live.staticflickr.com/65535/52680080786_b3e38c3798_z.jpg" />
3    <h1 class="py-3 pl-5 text-lg font-bold text-gray-900">Technology</h1>
4    <p class="border-t border-gray-400 py-2.5 pl-5 text-sm font-normal text-gray-800">542 products</p>
5</div>

Card with Badges

images-5

10 June 2023

WaivlyFunds

Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.

1<div class="flex w-fit flex-col items-center gap-10 rounded-2xl bg-white md:flex-row">
2<img src="https://i.ibb.co/RBm1vmK/images-5.png" alt="images-5" border="0" class="h-56" />
3<div class="flex flex-col items-start pb-8 md:pb-0 md:pr-8">
4  <p class="pb-2 text-sm font-bold tracking-wide text-gray-400">10 June 2023</p>
5  <h1 class="pb-1 text-2xl font-bold text-black">WaivlyFunds</h1>
6  <p class="w-56 text-sm font-normal leading-4 tracking-wide md:w-96">Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.</p>
7  <div class="flex gap-4 pt-4">
8    <button class="rounded-full bg-black px-3 py-0.5 text-center text-sm font-medium tracking-wide text-white">Tags</button>
9    <button class="rounded-full bg-black px-3 py-0.5 text-center text-sm font-medium tracking-wide text-white">Google</button>
10    <button class="rounded-full bg-black px-3 py-0.5 text-center text-sm font-medium tracking-wide text-white">Nvidia</button>
11  </div>
12</div>
13</div>

Smoke Background image 1

WaivlyFunds

Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.

1<div class="h-[206px] w-[582px] rounded-3xl bg-[url('https://i.ibb.co/5kwrPtY/bg.png')] bg-contain bg-no-repeat">
2<div class="grid h-full justify-center rounded-3xl bg-black bg-opacity-70 py-8">
3  <h1 class="text-2xl font-bold text-white">WaivlyFunds</h1>
4  <h1 class="text-gray-400">
5    Slate helps you see how many more days you need to <br />
6    work to reach. Slate helps you see how many more days.
7  </h1>
8  <div class="row">
9    <button class="text-md rounded-full bg-white px-3 py-0 text-center font-sans text-black transition-all hover:bg-white/90 disabled:bg-gray-400">Tags</button>
10    <button class="text-md rounded-full bg-white px-3 py-0 text-center font-sans text-black transition-all hover:bg-white/90 disabled:bg-gray-400">Google</button>
11    <button class="text-md rounded-full bg-white px-3 py-0 text-center font-sans text-black transition-all hover:bg-white/90 disabled:bg-gray-400">Nvdia</button>
12  </div>
13</div>
14</div>

Smoke Background image 2

Tax Management
What is Web 3?
1<div class="relative w-fit rounded-2xl">
2<img src="https://i.ibb.co/6H5rk26/61726fe2ea832a058fd9229f-ETHEREUM-Mobile-2-390x844-3.png" alt="" class="relative z-0" width="288" />
3<div class="absolute top-0 z-10 h-96 w-72 rounded-2xl bg-black opacity-[0.67]"></div>
4<div class="absolute bottom-0 z-20 p-6">
5  <div class="text-lg text-gray-400">Tax Management</div>
6  <div class="mb-1 mt-1 text-2xl font-semibold text-white">What is Web 3?</div>
7  <button class="mb-7 mt-3 rounded-full bg-white px-6 py-2 text-sm font-medium text-black transition-all hover:bg-white/90 disabled:bg-gray-400">Button</button>
8</div>
9</div>

Smoke Background image 3

Tax Managment

What is web 3?

Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.

Button
1<div class="relative h-96 w-72 rounded-2xl bg-black/[0.67] bg-[url('https://i.ibb.co/L9GP2gz/eth-pic.jpg')] bg-cover bg-no-repeat bg-blend-darken">
2<h4 class="absolute left-7 top-40 text-sm font-medium text-[#B5B5B5]">Tax Managment</h4>
3
4<p class="absolute left-7 top-48 text-2xl font-semibold leading-8 text-white">What is web 3?</p>
5
6<p class="absolute left-7 top-56 h-14 w-60 font-normal leading-4 tracking-wide text-[#B5B5B5]">Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.</p>
7
8<span class="absolute left-7 top-72 my-4 cursor-pointer rounded-3xl bg-white px-8 py-2 text-sm font-normal tracking-wide text-black hover:bg-gray-300">Button</span>
9</div>

Smoke Background image 4

Tax Management
What is Web 3?
Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.
1<div class="relative w-fit rounded-2xl">
2<img src="https://i.ibb.co/6H5rk26/61726fe2ea832a058fd9229f-ETHEREUM-Mobile-2-390x844-3.png" alt="" class="relative z-0" width="288" />
3<div class="absolute top-0 z-10 h-96 w-72 rounded-2xl bg-black opacity-[0.67]"></div>
4<div class="absolute bottom-0 z-20 p-6">
5  <div class="text-sm text-gray-400">Tax Management</div>
6  <div class="mb-1 mt-3 text-2xl font-semibold text-white">What is Web 3?</div>
7  <div class="w-52 text-sm font-normal tracking-wide text-gray-400">Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.</div>
8</div>
9</div>

Smoke Background image 5

Tax Managment

What is web 3?

Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.

TagsGoogleNvidia
1<div class="relative h-96 w-72 rounded-2xl bg-black/[0.67] bg-[url('https://i.ibb.co/L9GP2gz/eth-pic.jpg')] bg-cover bg-no-repeat bg-blend-darken">
2<h4 class="absolute left-7 top-40 text-sm font-medium text-[#B5B5B5]">Tax Managment</h4>
3
4<p class="absolute left-7 top-48 text-2xl font-semibold leading-8 text-white">What is web 3?</p>
5
6<p class="absolute left-7 top-56 h-14 w-60 font-normal leading-4 tracking-wide text-[#B5B5B5]">Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.</p>
7
8<span class="absolute left-7 top-72 my-4 rounded-full bg-white px-4 py-1 text-sm font-semibold tracking-wide text-black">Tags</span>
9<span class="absolute left-24 top-72 my-4 rounded-full bg-white px-3 py-1 text-sm font-semibold tracking-wide text-black">Google</span>
10<span class="absolute left-44 top-72 my-4 rounded-full bg-white px-3 py-1 text-sm font-semibold tracking-wide text-black">Nvidia</span>
11</div>

Card with Badges (Mobile View)

img

What is web3?

Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days .

Know more
1<div class='rounded-2xl  w-72 text-white bg-white rounded-t-3xl rounded-b-3xl' >
2<img class="rounded-t-3xl " src="https://live.staticflickr.com/65535/52680953849_d3e9252ca7_z.jpg" alt="img" />
3<div class=' p-6'>
4  <h1 class=' font-bold text-2xl text-black mt-2 leading-8'> What is web3?</h1>
5  <h1 class=' text-sm mb-5 mt-1 	text-gray-600  leading-4'>Slate helps you see how  many more days you need to work to reach. Slate helps you see how many
6      more days .</h1>
7  <button class="bg-slate-900 px-4 py-1 mr-2 rounded-full text-white text-sm font-normal font-sans text-center text-bg-gray-200 hover:bg-black transition-all disabled:bg-gray-400">Tags</button>
8  <button class="bg-slate-900 px-4 py-1 mr-2 rounded-full text-white text-sm font-normal font-sans text-center text-bg-gray-200 hover:bg-black transition-all disabled:bg-gray-400">Google</button>
9  <button class="bg-slate-900 px-4 py-1 rounded-full text-white text-sm font-normal font-sans text-center text-bg-gray-200 hover:bg-black transition-all disabled:bg-gray-400">Nvdia</button>
10  <a href="/" target="_blank">
11    <div class=" h-5 mt-3 mb-4 underline font-normal tracking-tight text-neutral-900">Know more
12      <img
13      class=" -mt-4 ml-20 w-2 h-3 opacity-90"
14      alt=""
15      src="https://live.staticflickr.com/65535/52681660092_5916e32cfc_s.jpg"/>
16    </div>
17  </a>
18</div>
19</div>

Short Intro of Article

img

10 June 2023

WaivlyFunds

Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days .

Know more
1<div class='rounded-2xl  w-72 text-white bg-white rounded-t-3xl rounded-b-3xl' >
2<img class="rounded-t-2xl rounded-b-2xl" src="https://live.staticflickr.com/65535/52681290308_fc93d4ee7b_z.jpg" alt="img" />
3<div class=' p-6'>
4  <h1 class=' font-bold text-sm text-gray-500 opacity-75'>  10 June 2023</h1>
5  <h1 class=' font-bold text-2xl text-black mt-1'> WaivlyFunds</h1>
6  <h1 class=' text-sm mb-3 mt-1 text-black'>Slate helps you see how  many more days you need to work to reach. Slate helps you see how many more days .</h1>
7  <a href="/" target="_blank">
8    <div class=" h-5 mt-2 underline font-normal tracking-tight text-neutral-900">Know more
9      <img
10      class=" -mt-4 ml-20 w-2 h-3 opacity-90"
11      alt=""
12      src="https://live.staticflickr.com/65535/52681660092_5916e32cfc_s.jpg"/>
13    </div>  
14  </a>
15</div>
16</div>

Feature Card

Creative design

1<div class="w-52 overflow-hidden rounded-2xl bg-white">
2<div>
3  <img src="https://live.staticflickr.com/65535/52680953849_d3e9252ca7_z.jpg" alt="" />
4</div>
5<div class="px-5 py-5 text-center">
6  <h2 class="text-xl font-bold">Creative design</h2>
7</div>
8</div>
ButtonsFeature Cards