Skip to content
Docs
💻 | Components
Profile Card

Profile Card

👤 A Profile Card Component is a user interface element that is used to display a summary of a user's profile information on a website or application. It typically includes a profile image, a brief bio, and links to the user's social media accounts or website.

User's Social Handles

cover

User Name

Profession

1<div class="flex w-fit rounded-3xl bg-white pr-14">
2    <img src="https://i.ibb.co/G7Zn9m3/cover.png" alt="cover" width="140" />
3    <div class="pl-8">
4        <h1 class="pt-4 text-2xl font-bold">User Name</h1>
5        <h4 class="text-lg text-gray-400">Profession</h4>
6        <div class="flex justify-between pt-2">
7            <span class="cursor-pointer">
8                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z" /></svg>
9            </span>
10
11            <span class="cursor-pointer">
12                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3 0 0 0 0 0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM128 208a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm128 0a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm96 32a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" /></svg>
13            </span>
14
15            <span class="cursor-pointer">
16                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" /></svg>
17            </span>
18        </div>
19    </div>
20</div>

Mini Profile Card

User Name

Profession

1<div class="flex w-fit items-center justify-center space-x-3 rounded-2xl bg-white py-3 pl-4 pr-6">
2<img class="h-12 rounded-full" src="https://i.ibb.co/sCR821K/jwoc1.jpg" alt="" />
3<div class="flex flex-col justify-between">
4  <h5 class="text-base font-bold text-black">User Name</h5>
5  <p class="text-sm font-medium text-black">Profession</p>
6</div>
7</div>
8

User Designation Card

image

User Name

Founder

the quick fox jumps over the lazy dog

1<div class="w-fit overflow-hidden rounded-2xl bg-white px-7 py-6 text-center">
2<img class="mx-auto mb-4 h-16 w-16 rounded-full" src="https://i.ibb.co/sCR821K/jwoc1.jpg" alt="image" />
3<p class="mb-1 text-sm font-bold text-black">User Name</p>
4<p class="mb-4 text-xs font-bold text-gray-600">Founder</p>
5<p class="w-28 text-center text-xs font-normal text-gray-800">the quick fox jumps over the lazy dog</p>
6</div>
Last updated on May 5, 2023
Product CardsStore Buttons