Skip to content
Docs
💻 | Components
Feature Cards

Feature Cards Component

Feature cards in a webpage are graphical elements that highlight the key features or benefits of a product, service, or website. They often include a title, description, and visual elements such as icons or images. Feature cards can be used to convey important information to users in a visually appealing and easy-to-digest manner.

Brand Intro Card

Brand Name

Slate helps you see how many more days you need ve helps you see how many more days.

1<div class="flex w-fit flex-row items-center gap-8 rounded-2xl bg-white px-8 py-9">
2<svg width="66" height="84" viewBox="0 0 66 84" fill="none" xmlns="http://www.w3.org/2000/svg">
3  <path d="M65.5 20.3354V76.6603C65.5 79.087 64.1654 81.2878 62.0161 82.4145C61.0627 82.9128 60.0313 83.1646 58.9956 83.1646C57.7 83.1646 56.4086 82.7743 55.295 82.0029L34.2221 67.4128C33.4854 66.8972 32.4974 66.8972 31.7564 67.4128L10.7007 82.0029C8.70735 83.3853 6.1376 83.5368 3.98394 82.4145C1.8346 81.2878 0.5 79.0827 0.5 76.6603V20.3354C0.5 9.58445 9.249 0.835449 20 0.835449H46C59 0.835449 65.5 7.33333 65.5 20.3354Z" fill="black" />
4</svg>
5<div>
6  <p class="text-2xl font-bold leading-8 text-black">Brand Name</p>
7  <p class="mt-2 h-12 w-60 font-normal leading-4 text-gray-600">Slate helps you see how many more days you need ve helps you see how many more days.</p>
8</div>
9</div>

New Feature Launch Card 1

At your fingertips

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 cursor-default flex-col items-center justify-center gap-2 rounded-2xl bg-white px-6 py-8 transition-all duration-500 ease-in-out hover:shadow-slate-900/20">
2<svg width="70" height="70" viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg">
3  <path d="M65.8883 27.3637L63.8099 25.2851C62.8066 24.2817 62.2332 22.9199 62.2332 21.4865V18.548C62.2332 12.5996 57.3959 7.76209 51.4476 7.76209H48.5092C47.0759 7.76209 45.7142 7.2248 44.7109 6.18563L42.6325 4.10702C38.44 -0.0854787 31.5958 -0.0854787 27.3675 4.10702L25.2891 6.18563C24.2858 7.2248 22.9241 7.76209 21.4908 7.76209H18.5524C12.6041 7.76209 7.76675 12.5996 7.76675 18.548V21.4865C7.76675 22.9199 7.22924 24.2817 6.19008 25.2851L4.11168 27.3637C2.06918 29.4062 0.958332 32.1291 0.958332 34.9958C0.958332 37.8624 2.06918 40.5854 4.11168 42.6279L6.19008 44.7065C7.22924 45.7098 7.76675 47.0717 7.76675 48.505V51.4436C7.76675 57.3919 12.6041 62.2295 18.5524 62.2295H21.4908C22.9241 62.2295 24.2858 62.7668 25.2891 63.8059L27.3675 65.8845C29.4816 67.9987 32.2408 69.0374 35 69.0374C37.7592 69.0374 40.5183 67.9987 42.6325 65.8845L44.7109 63.8059C45.7142 62.7668 47.0759 62.2295 48.5092 62.2295H51.4476C57.3959 62.2295 62.2332 57.3919 62.2332 51.4436V48.505C62.2332 47.0717 62.8066 45.7098 63.8099 44.7065L65.8883 42.6279C67.9308 40.5854 69.0417 37.8624 69.0417 34.9958C69.0417 32.1291 67.9308 29.4062 65.8883 27.3637ZM26.0417 21.5583C28.5142 21.5583 30.5208 23.5649 30.5208 26.0374C30.5208 28.5099 28.5142 30.5166 26.0417 30.5166C23.5692 30.5166 21.5625 28.5099 21.5625 26.0374C21.5625 23.5649 23.5692 21.5583 26.0417 21.5583ZM43.9583 48.4333C41.4858 48.4333 39.4792 46.4266 39.4792 43.9541C39.4792 41.4816 41.4858 39.4749 43.9583 39.4749C46.4308 39.4749 48.4375 41.4816 48.4375 43.9541C48.4375 46.4266 46.4308 48.4333 43.9583 48.4333ZM48.2942 26.7898L26.7942 48.2898C26.0776 48.9706 25.1817 49.3291 24.25 49.3291C23.3542 49.3291 22.4224 48.9706 21.7058 48.2898C20.3083 46.8923 20.3083 44.5993 21.7058 43.2017L43.2057 21.7017C44.6391 20.3042 46.8967 20.3042 48.2942 21.7017C49.6917 23.0992 49.6917 25.3923 48.2942 26.7898Z" fill="#101010" />
4</svg>
5
6<h1 class="mt-6 text-2xl font-bold leading-8 text-black">At your fingertips</h1>
7<p class="mt-2 w-60 text-center text-sm font-normal leading-4 text-gray-600">Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.</p>
8<button class="mt-2 rounded-full bg-slate-900 px-8 py-2 text-center font-sans text-lg font-normal text-gray-400 transition-all disabled:bg-gray-400">Try for free</button>
9<img class="mt-8 h-48" src="https://i.postimg.cc/HLs81xSY/Frame-1.png" alt="" />
10</div>

New Feature Launch Card 2

At your fingertips

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="w-72 rounded-2xl bg-white px-9 py-10 transition-all duration-500 hover:scale-105 hover:shadow-xl hover:shadow-slate-900/30">
2<svg width="53" height="47" viewBox="0 0 53 47" fill="none" xmlns="http://www.w3.org/2000/svg">
3  <path d="M52.2291 38.7747V40.1559C52.2291 42.1601 51.552 44.0831 50.3062 45.6268C49.8458 46.2227 49.0875 46.5208 48.302 46.5208H41.0437C42.1541 44.5979 42.75 42.4039 42.75 40.1559V38.7747C42.75 34.8747 41.3146 31.2732 38.8771 28.5377C39.0667 28.4836 39.2292 28.375 39.3917 28.2938C40.6375 27.5896 42.1813 27.373 43.6438 27.7251C48.6813 28.998 52.2291 33.5205 52.2291 38.7747ZM33.2708 0.479126C32.4041 0.479126 31.5646 0.56064 30.7521 0.750224C33.975 3.70231 35.9791 7.95413 35.9791 12.6666C35.9791 17.3791 33.975 21.6309 30.7521 24.583C31.5646 24.7726 32.4041 24.8541 33.2708 24.8541C39.9875 24.8541 45.4583 19.3833 45.4583 12.6666C45.4583 5.94996 39.9875 0.479126 33.2708 0.479126ZM19.7291 0.479126C13.0125 0.479126 7.54165 5.94996 7.54165 12.6666C7.54165 19.3833 13.0125 24.8541 19.7291 24.8541C26.4458 24.8541 31.9166 19.3833 31.9166 12.6666C31.9166 5.94996 26.4458 0.479126 19.7291 0.479126ZM30.1021 27.7251C29.6146 27.6168 29.1541 27.5625 28.6666 27.5625C27.6645 27.5625 26.6896 27.8063 25.85 28.2938C23.9542 29.3229 21.8416 29.8377 19.7291 29.8377C17.6166 29.8377 15.5313 29.323 13.6625 28.3209C12.7688 27.8334 11.7667 27.5625 10.7646 27.5625C10.3312 27.5625 9.92493 27.6168 9.51868 27.698C4.37284 28.8897 0.770813 33.4663 0.770813 38.7747V40.1559C0.770813 42.1601 1.44796 44.0831 2.69379 45.6268C3.15421 46.2227 3.91251 46.5208 4.69793 46.5208H34.7604C35.5458 46.5208 36.3041 46.2227 36.7645 45.6268C38.0103 44.0831 38.6875 42.1601 38.6875 40.1559V38.7747C38.6875 33.5205 35.1396 28.998 30.1021 27.7251Z" fill="#000" />
4</svg>
5<p class="mt-5 text-2xl font-bold leading-8 text-black">At your fingertips</p>
6<p class="mt-2.5 w-52 text-sm font-normal leading-4 text-black">Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.</p>
7<button class="mt-6 rounded-full border-2 border-black px-8 py-2.5 text-sm font-semibold text-black transition-all duration-300 hover:bg-black hover:text-white hover:shadow-lg hover:shadow-black/30">Button</button>
8</div>

Small Feature Card for Grid view

Job Security

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

1<div class="w-fit rounded-2xl bg-white px-6 py-7 transition-all duration-500 ease-in-out">
2<h1 class="mb-5 text-2xl font-bold leading-8 text-black">Job Security</h1>
3<p class="word-wrap: break-word mb-5 w-44 leading-4 text-gray-600">Slate helps you see how many more days you need to work to reach.</p>
4<button class="rounded-full border-2 border-black px-8 py-1.5 text-lg font-medium text-black transition-all hover:bg-black hover:text-white/90 hover:shadow-lg hover:shadow-black/30 disabled:bg-gray-400 disabled:text-white disabled:opacity-75">Button</button>
5</div>

Card to show mini stats 1

2680

Happy Clients

1<div class="flex w-fit rounded-2xl bg-white py-5 pl-5 pr-8">
2<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-14 w-14 fill-black">
3  <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
4</svg>
5<div>
6  <p class="ml-5 mt-1 text-3xl font-bold leading-8 text-black">2680</p>
7  <p class="ml-5 text-sm font-normal leading-4 tracking-wide text-gray-600">Happy Clients</p>
8</div>
9</div>

Card to show mini stats 2

45%

Case Dismissed

1<div class="flex w-fit cursor-default flex-col items-center justify-center rounded-2xl bg-white px-7 pb-6 transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-xl hover:shadow-white/25">
2<svg class="mt-5 w-10 fill-slate-900" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
3  <path d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z" />
4</svg>
5<h1 class="mt-3 text-3xl font-bold leading-8 text-black">45%</h1>
6<h3 class="mt-3 text-sm font-normal leading-4 tracking-wide text-gray-600">Case Dismissed</h3>
7</div>
8

Newly Launched Feature Card

Job Security

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

1<div class="grid w-fit place-items-center rounded-3xl border border-white bg-white px-5 pb-7 pt-5 shadow dark:border-white dark:bg-white">
2<svg width="53" height="59" viewBox="0 0 54 60" fill="none" xmlns="http://www.w3.org/2000/svg">
3  <path d="M53.2083 14.5901C53.2083 40.3699 49.4868 52.9375 27.4255 59.2367C27.2868 59.2768 27.1448 59.2985 27.003 59.2985C26.8612 59.2985 26.7195 59.2768 26.5807 59.2367C4.51638 52.9313 0.791672 40.4929 0.791672 14.9876C0.791672 14.2969 1.25113 13.6927 1.91405 13.5046C13.7633 10.1592 22.7882 4.28891 25.964 1.15624C26.2569 0.869491 26.67 0.647359 27.0585 0.712109C27.4655 0.715192 27.8571 0.881463 28.1438 1.1713C31.0144 4.08196 43.1321 10.1129 52.1539 13.1222C52.7829 13.3381 53.2083 13.9272 53.2083 14.5901Z" fill="#121225" />
4</svg>
5<h5 class="mb-2.5 mt-3.5 place-self-center text-2xl font-bold tracking-wide text-black dark:text-black">Job Security</h5>
6<p class="mb-5 w-44 text-center text-sm font-normal leading-4 tracking-wide text-gray-600">Slate helps you see how many more days you need to work to reach.</p>
7<button class="rounded-full border-2 border-black bg-transparent px-8 py-2 text-sm font-semibold text-black hover:bg-black hover:text-white">Button</button>
8</div>

Message Card

Give a message

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

1<div class="flex w-fit cursor-default flex-col items-center justify-center rounded-2xl bg-slate-900 px-6 py-8 transition-all duration-500 ease-in-out hover:shadow-slate-900/20">
2<svg width="67" height="63" viewBox="0 0 67 63" fill="none" xmlns="http://www.w3.org/2000/svg">
3  <path d="M50.7916 0.375H16.2083C7.63165 0.375 0.645813 7.36083 0.645813 15.9375V60.8958C0.645813 61.5875 1.0608 62.2099 1.71789 62.4865C1.92539 62.5903 2.16748 62.625 2.37498 62.625C2.82456 62.625 3.27417 62.4524 3.58542 62.1066L11.9545 53.7715C12.9229 52.8031 14.237 52.25 15.6203 52.25H50.7916C59.3683 52.25 66.3541 45.2642 66.3541 36.6875V15.9375C66.3541 7.36083 59.3683 0.375 50.7916 0.375ZM19.6666 30.6354C17.2804 30.6354 15.3437 28.6987 15.3437 26.3125C15.3437 23.9262 17.2804 21.9896 19.6666 21.9896C22.0529 21.9896 23.9896 23.9262 23.9896 26.3125C23.9896 28.6987 22.0529 30.6354 19.6666 30.6354ZM33.5 30.6354C31.1137 30.6354 29.1771 28.6987 29.1771 26.3125C29.1771 23.9262 31.1137 21.9896 33.5 21.9896C35.8862 21.9896 37.8229 23.9262 37.8229 26.3125C37.8229 28.6987 35.8862 30.6354 33.5 30.6354ZM47.3333 30.6354C44.9471 30.6354 43.0104 28.6987 43.0104 26.3125C43.0104 23.9262 44.9471 21.9896 47.3333 21.9896C49.7196 21.9896 51.6562 23.9262 51.6562 26.3125C51.6562 28.6987 49.7196 30.6354 47.3333 30.6354Z" fill="#F5F5F5" />
4</svg>
5
6<h1 class="mt-5 w-36 text-lg font-bold leading-8 text-white">Give a message</h1>
7<p class="mt-2.5 w-36 text-sm font-normal leading-4 tracking-[0.2px] text-gray-400">Slate helps you see how many more days you need to work to reach. Slate.</p>
8</div>

Mini feature Card

Security

1<div class="flex w-fit cursor-default flex-col items-center justify-center rounded-2xl bg-white px-7 py-6 shadow-slate-900 duration-300 ease-in-out hover:scale-105 hover:drop-shadow-md">
2<svg width="54" height="60" viewBox="0 0 54 60" fill="none" xmlns="http://www.w3.org/2000/svg">
3  <path d="M53.2083 14.5901C53.2083 40.3699 49.4868 52.9375 27.4255 59.2367C27.2868 59.2768 27.1448 59.2985 27.003 59.2985C26.8612 59.2985 26.7195 59.2768 26.5807 59.2367C4.51638 52.9313 0.791668 40.4929 0.791668 14.9876C0.791668 14.2969 1.25113 13.6927 1.91404 13.5046C13.7633 10.1592 22.7882 4.28891 25.964 1.15624C26.2569 0.869491 26.67 0.647359 27.0585 0.712109C27.4655 0.715192 27.8571 0.881463 28.1438 1.1713C31.0144 4.08196 43.1321 10.1129 52.1539 13.1222C52.7829 13.3381 53.2083 13.9272 53.2083 14.5901Z" fill="#121225" />
4</svg>
5<h1 class="mt-4 text-2xl font-bold leading-8 tracking-wide text-black">Security</h1>
6</div>

Feature Card with sample image

Web3

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

Web3-Report-Featured-image-2-5
1<div class="w-56 rounded-2xl bg-white text-white">
2<div class="flex flex-col items-start justify-center px-7 pt-7">
3  <h3 class="pb-4 text-2xl font-bold text-gray-900">Web3</h3>
4  <h1 class="pb-6 text-left text-sm font-normal text-gray-900">Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days .</h1>
5</div>
6<img src="https://i.ibb.co/BKCPqvt/Web3-Report-Featured-image-2-5.png" alt="Web3-Report-Featured-image-2-5" />
7</div>

Discount Card

Ultimate Discount 

1<div class="w-fit flex cursor-default rounded-2xl  px-6 py-5 transition-all duration-500 ease-in-out  hover:shadow-slate-900/20 items-center justify-s bg-white gap-4">
2<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
3<path d="M28.9517 13.3877L18.6125 3.04848C17.2825 1.71848 15.4458 0.958374 13.5775 0.958374H6.5C3.44416 0.958374 0.958328 3.44421 0.958328 6.50004V13.5775C0.958328 15.4775 1.70251 17.2666 3.04834 18.6124L13.3875 28.9516C14.7333 30.2974 16.5225 31.0417 18.4225 31.0417C20.3383 31.0417 22.1275 30.2974 23.4733 28.9516L28.9517 23.4733C31.7383 20.6867 31.7383 16.1744 28.9517 13.3877ZM8.875 11.25C7.56083 11.25 6.5 10.1892 6.5 8.87504C6.5 7.56087 7.56083 6.50004 8.875 6.50004C10.1892 6.50004 11.25 7.56087 11.25 8.87504C11.25 10.1892 10.1892 11.25 8.875 11.25Z" fill="#121225"/>
4</svg>
5<p class="text-lg font-normal  text-gray-600 text-center">Ultimate Discount </h1>
6</div>

Product Link

Get link 

1<div class="w-fit flex  flex-col justify-centercursor-default rounded-2xl  px-8 py-5 transition-all duration-500 ease-in-out  hover:shadow-slate-900/20 items-center justify-s bg-white gap-4">
2<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
3<path d="M28.6889 13.1374L25.8522 15.9738C25.249 16.5766 24.2742 16.5766 23.671 15.9738C23.0679 15.371 23.0679 14.397 23.671 13.7942L26.5077 10.9574C28.2863 9.17828 28.2863 6.28452 26.5077 4.5039C24.7832 2.77877 21.7768 2.77877 20.0538 4.5039L14.8724 9.68256C14.6904 9.86447 14.5515 10.0308 14.4605 10.1696C13.0753 12.0566 13.2712 14.5342 14.8739 16.136C15.4755 16.7388 15.4755 17.7144 14.8739 18.3157C14.5731 18.6163 14.1782 18.7673 13.7834 18.7673C13.3885 18.7673 12.9936 18.6163 12.6912 18.3157C10.0041 15.6285 9.68174 11.4662 11.9231 8.41828C12.0819 8.17008 12.3487 7.84479 12.6896 7.50254L17.8726 2.32238C19.3165 0.877836 21.2384 0.0825195 23.2808 0.0825195C25.3231 0.0825195 27.2451 0.879378 28.6905 2.32238C31.6707 5.3055 31.6706 10.1558 28.6889 13.1374ZM16.145 12.6842C15.5419 13.287 15.5419 14.2611 16.145 14.8639C17.4053 16.1234 17.8171 17.9412 17.2062 19.6402C17.0042 20.246 16.6371 20.827 16.145 21.3188L10.9636 26.4975C9.24056 28.2226 6.23411 28.2226 4.50955 26.4975C2.731 24.7184 2.731 21.8246 4.50955 20.044L7.34627 17.2072C7.9494 16.6044 7.9494 15.6304 7.34627 15.0276C6.74313 14.4248 5.76824 14.4248 5.16511 15.0276L2.32839 17.864C-0.653347 20.8456 -0.653347 25.6959 2.32839 28.6775C3.77375 30.122 5.69425 30.9174 7.73812 30.9174C9.78199 30.9174 11.7024 30.1205 13.1462 28.6775L18.3277 23.4988C19.1576 22.6679 19.7823 21.6706 20.1217 20.6485C21.1135 17.892 20.4101 14.767 18.3262 12.6842C17.7246 12.0814 16.7466 12.0814 16.145 12.6842Z" fill="#121225"/>
4</svg>
5<p class="text-2xl font-bold text-black text-center ">Get link </h1>
6</div>

Product Testing Card

email@gmail.com

Get a Pie

1<div class="flex w-fit cursor-default flex-col items-center justify-center rounded-2xl bg-white px-12 py-10 transition-all duration-500 ease-out">
2<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
3  <path d="M64.4302 26.5118C61.787 13.3978 51.6058 3.21384 38.4885 0.570633C36.0757 0.0867578 33.5675 0.702441 31.6385 2.27915C29.7162 3.85586 28.6135 6.17974 28.6135 8.65836V26.5118C28.6135 31.9562 33.0441 36.3868 38.4885 36.3868H56.3425C58.8244 36.3868 61.1485 35.2843 62.7219 33.3619C64.2953 31.4396 64.9207 28.941 64.4302 26.5118ZM57.6329 29.1879C57.442 29.415 57.0272 29.8035 56.3425 29.8035H38.4885C36.6715 29.8035 35.1968 28.3288 35.1968 26.5118V8.65836C35.1968 7.9737 35.582 7.55865 35.8124 7.36773C36 7.21632 36.3589 6.98922 36.8527 6.98922C36.958 6.98922 37.0698 6.99905 37.1916 7.02539C47.6986 9.14193 55.862 17.3019 57.9753 27.8089C58.1102 28.4771 57.8173 28.9608 57.6329 29.1879ZM57.1457 42.9934C57.7646 43.9184 57.8897 45.0906 57.4684 46.1308C52.8765 57.4607 42.1093 64.5902 30.0618 64.5902C29.0184 64.5902 27.9619 64.5341 26.9019 64.4254C13.2876 63.0265 1.96757 51.7096 0.56861 38.0953C-0.797431 24.8003 6.55614 12.5161 18.8703 7.52926C19.917 7.11451 21.0856 7.22939 22.0072 7.85152C22.9092 8.46377 23.4489 9.47744 23.4489 10.567V33.3226C23.4489 37.8618 27.1389 41.5517 31.6781 41.5517H54.4301C55.5196 41.5517 56.5368 42.0915 57.1457 42.9934Z" fill="#121225" />
4</svg>
5
6<p class="mt-5 text-center text-sm font-normal leading-4 text-gray-400">email@gmail.com</p>
7<p class="mt-3.5 text-center text-2xl font-bold leading-8 text-black">Get a Pie</p>
8<button class="mt-8 rounded-full border-2 border-black px-6 py-1 text-lg font-normal text-slate-900 transition-all hover:bg-black hover:text-white disabled:bg-gray-400">Button</button>
9</div>

Newly Launched Feature Card 3

At your fingertips

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 justify-center gap-4 rounded-2xl bg-white px-6 py-10 transition-all">
2<svg width="57" height="66" viewBox="0 0 57 66" fill="none" xmlns="http://www.w3.org/2000/svg">
3  <path d="M50.6152 21.0183L55.9581 15.9414C57.3473 14.6214 57.3473 12.4555 55.9581 11.1355C54.569 9.81552 52.2894 9.81552 50.9002 11.1355L45.5573 16.2124C45.3436 16.4494 45.2011 16.6862 45.0586 16.9231C41.3185 14.3846 36.8661 12.6587 32.0575 12.0833V6.76923H35.6195C37.5785 6.76923 39.1814 5.24615 39.1814 3.38462C39.1814 1.52308 37.5785 0 35.6195 0H21.3717C19.4126 0 17.8097 1.52308 17.8097 3.38462C17.8097 5.24615 19.4126 6.76923 21.3717 6.76923H24.9336V12.0833C10.8996 13.7418 0 25.1477 0 38.9231C0 53.8492 12.7874 66 28.4956 66C44.2037 66 56.9911 53.8492 56.9911 38.9231C56.9911 32.1877 54.3909 26.0617 50.1166 21.3232C50.2591 21.2217 50.4727 21.1537 50.6152 21.0183ZM37.8278 50.0247C37.1867 50.5324 36.4031 50.7692 35.6195 50.7692C34.5865 50.7692 33.5535 50.3296 32.8411 49.4835L25.7173 41.0219C25.2186 40.4466 24.9336 39.7015 24.9336 38.9231V27.0769C24.9336 25.2154 26.5365 23.6923 28.4956 23.6923C30.4546 23.6923 32.0575 25.2154 32.0575 27.0769V37.7381L38.3978 45.2858C39.6445 46.7411 39.3951 48.8739 37.8278 50.0247Z" fill="#000000" />
4</svg>
5
6<div class="flex w-56 flex-col gap-1 text-center">
7  <h1 class="mb-2 mt-1 text-2xl font-bold leading-8 text-black">At your fingertips</h1>
8  <p class="px-3 text-sm leading-4 text-gray-600">Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.</p>
9</div>
10<button class="text-bg-gray-200 rounded-full bg-slate-900 px-6 py-2 text-center font-sans text-sm font-normal text-white transition-all hover:bg-black disabled:bg-gray-400">Try for free</button>
11</div>
12

Horizontal Feature Card

What is Web3?

Slate helps you see how many more days you need ve helps you how many more days

1<div class="flex w-fit flex-row items-center gap-4 rounded-2xl bg-white px-6 py-7">
2<svg width="58" height="54" viewBox="0 0 58 54" fill="none" xmlns="http://www.w3.org/2000/svg">
3  <path d="M57.1024 24.186C54.2374 38.874 39.1804 49.191 32.8414 52.947C31.6534 53.646 30.3244 54 28.9954 54C27.6664 54 26.3374 53.649 25.1494 52.947C18.8074 49.188 3.75043 38.874 0.885428 24.186C-0.311572 18.045 1.31743 11.535 5.24443 6.765C8.83843 2.403 13.8334 0 19.3114 0C22.7584 0 26.0854 0.873 28.9954 2.532C31.9054 0.873 35.2324 0 38.6794 0C44.1574 0 49.1524 2.403 52.7464 6.765C56.6734 11.535 58.3054 18.045 57.1054 24.186H57.1024Z" fill="#121225" />
4</svg>
5
6<div>
7  <p class="text-2xl font-bold leading-8 text-black">What is Web3?</p>
8  <p class="mt-2 h-12 w-96 font-normal leading-4 text-gray-600">Slate helps you see how many more days you need ve helps you how many more days</p>
9</div>
10</div>

New Feature Launch Card 4

Job Security

the quick fox jumps over the lazy dog 

1 <div class="w-fit flex flex-col  cursor-default rounded-2xl  px-9 py-6  bg-white gap-2">
2<svg width="53" height="59" viewBox="0 0 53 59" fill="none" xmlns="http://www.w3.org/2000/svg">
3<path d="M52.4167 13.8893C52.4167 39.6691 48.6951 52.2367 26.6338 58.5359C26.4951 58.576 26.3532 58.5976 26.2113 58.5976C26.0695 58.5976 25.9278 58.576 25.789 58.5359C3.72471 52.2305 0 39.7921 0 14.2868C0 13.5961 0.459459 12.9919 1.12238 12.8038C12.9716 9.45841 21.9965 3.5881 25.1723 0.455436C25.4653 0.168686 25.8784 -0.0534469 26.2669 0.0113031C26.6739 0.0143864 27.0654 0.180658 27.3522 0.470491C30.2227 3.38116 42.3404 9.41208 51.3622 12.4214C51.9912 12.6373 52.4167 13.2264 52.4167 13.8893Z" fill="black"/>
4</svg>
5<h1 class="text-2xl font-bold text-black leading-8">Job Security</h1>
6<p class="text-sm font-normal text-gray-600 text-center ">
7the quick fox jumps over the lazy dog </h1>
8</div>

Ideation Card

New UI Ideas

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="w-fit items-center gap-4 rounded-2xl bg-white px-5 py-6">
2<div class="ml-4 flex flex-row">
3  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="mt-1 h-8 w-8">
4    <path d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z" />
5  </svg>
6
7  <p class="ml-5 mt-1 text-2xl font-semibold leading-8 text-black">New UI Ideas</p>
8</div>
9<p class="mb-5 ml-4 mt-2 h-12 w-72 font-normal leading-5 text-gray-600">Slate helps you see how many more days you need to work to reach. Slate helps you see how many more days.</p>
10</div>
Content CardsForm