Feature Card Design System ⭐

General convention to follow :

Color

For Dark : bg-slate-900
For Blue : blue-600
For White : bg-white

Border-radius :

Border radius of each card is rounded-2xl

Paddings :

The padding could be variable depending on the card sizes and UI requirements but normally it is px-9 py-10

Font :

	heading	sub text
size	text-2xl	text-sm
color	text-white / text-blue-600 / text-black	text-gray-600 / text-gray-400
font	font-bold	font-normal
line height	leading-8	leading-4

Width & heights :

👉The width of the component totally depends on the design. Giving a fixed height is not recommended at all.

The height of the components depends on the amount of content on it. We need to make it fluid. Giving a fixed height is not recommended at all.

Buttons :

We need to use the already built buttons for this. Buttons (opens in a new tab) 🔗 . Don’t use any buttons outside this.

Icons :

Icons must be used from Heroicons (opens in a new tab) 🖇️

Note : You need to use a solid 24X24 SVG form heroicons.

<div class="flex bg-gray-200 h-screen space-x-10 flex-wrap items-center justify-center">
  <!-- Dark -->
  <div class="w-fit cursor-default rounded-2xl bg-slate-900 px-9 py-10 transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-xl hover:shadow-slate-900/30">
    <svg width="53" height="47" viewBox="0 0 53 47" fill="none" xmlns="http://www.w3.org/2000/svg">
      <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="#F5F5F5" />
    </svg>
    <p class="mt-5 text-2xl font-bold text-white">At your fingertips</p>
    <p class="mt-2.5 w-52 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 helps you see how many more days.</p>
    <button class="mt-6 rounded-full border-2 px-8 py-2.5 text-sm font-semibold text-white transition-all duration-300 hover:bg-white hover:text-slate-900 hover:shadow-lg hover:shadow-white/40">Button</button>
  </div>
 
  <!-- Blue -->
  <div class="w-fit cursor-default rounded-2xl bg-white px-9 py-10 transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-xl hover:shadow-slate-900/20">
    <svg width="53" height="47" viewBox="0 0 53 47" fill="#2563eb" xmlns="http://www.w3.org/2000/svg">
      <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="#2563eb" />
    </svg>
    <p class="mt-5 text-2xl font-bold text-blue-600">At your fingertips</p>
    <p class="mt-2.5 w-52 text-sm font-normal leading-4 tracking-[0.2px] 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>
    <button class="mt-6 rounded-full border-2 border-blue-600 px-8 py-2.5 text-sm font-semibold text-blue-600 transition-all duration-300 hover:bg-blue-600 hover:text-white hover:shadow-lg hover:shadow-blue-600/40">Button</button>
  </div>
 
  <!-- Black -->
  <div class="w-fit cursor-default rounded-2xl bg-white px-9 py-10 transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-xl hover:shadow-slate-900/20">
    <svg width="53" height="47" viewBox="0 0 53 47" fill="none" xmlns="http://www.w3.org/2000/svg">
      <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" />
    </svg>
    <p class="mt-5 text-2xl font-bold text-black">At your fingertips</p>
    <p class="mt-2.5 w-52 text-sm font-normal leading-4 tracking-[0.2px] 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>
    <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>
  </div>
</div>

Button Content Card