VCard / Contact Card
Contact cards for displaying user profiles, team members, and contact information.
Basic VCard
Simple contact card with avatar and basic info.
JD
HTML
<div
class="ss-c-vcard"
style="
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: white;
border: 1px solid var(--color_line_secondary);
border-radius: 12px;
max-width: 350px;
"
>
<div
class="ss-c-vcard__avatar"
style="
width: 64px;
height: 64px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
font-weight: 600;
"
>
JD
</div>
<div class="ss-c-vcard__info">
<h4 style="margin: 0 0 4px; font-size: 18px">John Doe</h4>
<p style="margin: 0 0 4px; font-size: 14px; opacity: 0.7">
Senior Developer
</p>
<a
href="mailto:john@example.com"
style="
font-size: 14px;
color: var(--color_fill_primary);
text-decoration: none;
"
>
john@example.com
</a>
</div>
</div>VCard with Photo
Contact card with profile photo and social links.
Sarah Johnson
Product Designer
Creating delightful user experiences for web and mobile products.
HTML
<div
class="ss-c-vcard ss-c-vcard--photo"
style="
padding: 24px;
background: white;
border: 1px solid var(--color_line_secondary);
border-radius: 16px;
max-width: 300px;
text-align: center;
"
>
<div
class="ss-c-vcard__avatar"
style="
width: 100px;
height: 100px;
margin: 0 auto 16px;
border-radius: 50%;
overflow: hidden;
border: 4px solid var(--color_fill_secondary);
"
>
<img
src="https://picsum.photos/100"
alt="Profile"
style="width: 100%; height: 100%; object-fit: cover"
/>
</div>
<h4 style="margin: 0 0 4px; font-size: 20px">Sarah Johnson</h4>
<p
style="
margin: 0 0 12px;
font-size: 14px;
color: var(--color_fill_primary);
"
>
Product Designer
</p>
<p
style="
margin: 0 0 16px;
font-size: 14px;
opacity: 0.7;
line-height: 1.5;
"
>
Creating delightful user experiences for web and mobile
products.
</p>
<div
class="ss-c-vcard__social"
style="display: flex; justify-content: center; gap: 12px"
>
<a
href="#"
style="
width: 36px;
height: 36px;
background: var(--color_fill_secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
"
>
▽
</a>
<a
href="#"
style="
width: 36px;
height: 36px;
background: var(--color_fill_secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
"
>
▤
</a>
<a
href="#"
style="
width: 36px;
height: 36px;
background: var(--color_fill_secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
"
>
✉
</a>
</div>
</div>Horizontal VCard
Wide format card with detailed contact information.
☻
Emily Chen
CTO @ TechCorp
⌖ San Francisco
☎ +1 (555) 123-4567
HTML
<div
class="ss-c-vcard ss-c-vcard--horizontal"
style="
display: grid;
grid-template-columns: auto 1fr auto;
gap: 24px;
padding: 24px;
background: white;
border: 1px solid var(--color_line_secondary);
border-radius: 16px;
max-width: 600px;
align-items: center;
"
>
<div
class="ss-c-vcard__avatar"
style="
width: 80px;
height: 80px;
background: linear-gradient(135deg, #f093fb, #f5576c);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 28px;
"
>
☻
</div>
<div class="ss-c-vcard__info">
<h4 style="margin: 0 0 4px; font-size: 18px">Emily Chen</h4>
<p
style="
margin: 0 0 8px;
font-size: 14px;
color: var(--color_fill_primary);
"
>
CTO @ TechCorp
</p>
<div
style="
display: flex;
gap: 16px;
font-size: 13px;
opacity: 0.7;
"
>
<span>⌖ San Francisco</span>
<span>☎ +1 (555) 123-4567</span>
</div>
</div>
<div
class="ss-c-vcard__actions"
style="display: flex; flex-direction: column; gap: 8px"
>
<button
style="
padding: 10px 20px;
background: var(--color_fill_primary);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
"
>
Connect
</button>
<button
style="
padding: 10px 20px;
background: var(--color_fill_secondary);
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
"
>
Message
</button>
</div>
</div>Team Grid
Grid of team member cards.
AK
Alex Kim
Frontend Lead
MR
Maria Rodriguez
UX Designer
JP
James Park
Backend Dev
SL
Sophie Lee
DevOps
HTML
<div
style="
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
"
>
<!-- Team Member 1 -->
<div
class="ss-c-vcard"
style="
padding: 24px;
background: white;
border: 1px solid var(--color_line_secondary);
border-radius: 12px;
text-align: center;
"
>
<div
style="
width: 80px;
height: 80px;
margin: 0 auto 12px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 28px;
"
>
AK
</div>
<h5 style="margin: 0 0 4px; font-size: 16px">Alex Kim</h5>
<p style="margin: 0; font-size: 13px; opacity: 0.6">
Frontend Lead
</p>
</div>
<!-- Team Member 2 -->
<div
class="ss-c-vcard"
style="
padding: 24px;
background: white;
border: 1px solid var(--color_line_secondary);
border-radius: 12px;
text-align: center;
"
>
<div
style="
width: 80px;
height: 80px;
margin: 0 auto 12px;
background: linear-gradient(135deg, #f093fb, #f5576c);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 28px;
"
>
MR
</div>
<h5 style="margin: 0 0 4px; font-size: 16px">
Maria Rodriguez
</h5>
<p style="margin: 0; font-size: 13px; opacity: 0.6">
UX Designer
</p>
</div>
<!-- Team Member 3 -->
<div
class="ss-c-vcard"
style="
padding: 24px;
background: white;
border: 1px solid var(--color_line_secondary);
border-radius: 12px;
text-align: center;
"
>
<div
style="
width: 80px;
height: 80px;
margin: 0 auto 12px;
background: linear-gradient(135deg, #4facfe, #00f2fe);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 28px;
"
>
JP
</div>
<h5 style="margin: 0 0 4px; font-size: 16px">James Park</h5>
<p style="margin: 0; font-size: 13px; opacity: 0.6">
Backend Dev
</p>
</div>
<!-- Team Member 4 -->
<div
class="ss-c-vcard"
style="
padding: 24px;
background: white;
border: 1px solid var(--color_line_secondary);
border-radius: 12px;
text-align: center;
"
>
<div
style="
width: 80px;
height: 80px;
margin: 0 auto 12px;
background: linear-gradient(135deg, #43e97b, #38f9d7);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 28px;
"
>
SL
</div>
<h5 style="margin: 0 0 4px; font-size: 16px">Sophie Lee</h5>
<p style="margin: 0; font-size: 13px; opacity: 0.6">DevOps</p>
</div>
</div>Compact VCard
Minimal inline contact cards for lists.
JD
John Doe
john@example.com
Online
SJ
Sarah Johnson
sarah@example.com
Away
MK
Mike Kim
mike@example.com
Busy
HTML
<div
style="
display: flex;
flex-direction: column;
gap: 12px;
max-width: 400px;
"
>
<div
class="ss-c-vcard ss-c-vcard--compact"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--color_fill_secondary);
border-radius: 8px;
"
>
<div
style="
width: 40px;
height: 40px;
background: var(--color_fill_primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
font-weight: 600;
"
>
JD
</div>
<div style="flex: 1">
<strong style="font-size: 14px">John Doe</strong>
<span
style="font-size: 13px; opacity: 0.6; margin-left: 8px"
>
john@example.com
</span>
</div>
<span
style="
font-size: 12px;
padding: 4px 8px;
background: var(--color_state_success);
color: white;
border-radius: 4px;
"
>
Online
</span>
</div>
<div
class="ss-c-vcard ss-c-vcard--compact"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--color_fill_secondary);
border-radius: 8px;
"
>
<div
style="
width: 40px;
height: 40px;
background: #f093fb;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
font-weight: 600;
"
>
SJ
</div>
<div style="flex: 1">
<strong style="font-size: 14px">Sarah Johnson</strong>
<span
style="font-size: 13px; opacity: 0.6; margin-left: 8px"
>
sarah@example.com
</span>
</div>
<span
style="
font-size: 12px;
padding: 4px 8px;
background: var(--color_line_secondary);
border-radius: 4px;
"
>
Away
</span>
</div>
<div
class="ss-c-vcard ss-c-vcard--compact"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--color_fill_secondary);
border-radius: 8px;
"
>
<div
style="
width: 40px;
height: 40px;
background: #4facfe;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
font-weight: 600;
"
>
MK
</div>
<div style="flex: 1">
<strong style="font-size: 14px">Mike Kim</strong>
<span
style="font-size: 13px; opacity: 0.6; margin-left: 8px"
>
mike@example.com
</span>
</div>
<span
style="
font-size: 12px;
padding: 4px 8px;
background: var(--color_state_error);
color: white;
border-radius: 4px;
"
>
Busy
</span>
</div>
</div>Business Card Style
Professional business card layout.
HTML
<div
class="ss-c-vcard ss-c-vcard--business"
style="
width: 350px;
padding: 32px;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
border-radius: 16px;
color: white;
position: relative;
overflow: hidden;
"
>
<!-- Decorative element -->
<div
style="
position: absolute;
top: -50px;
right: -50px;
width: 150px;
height: 150px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
"
></div>
<div style="position: relative">
<div
style="
font-size: 24px;
font-weight: 700;
margin-bottom: 4px;
"
>
Robert Smith
</div>
<div
style="font-size: 14px; opacity: 0.7; margin-bottom: 24px"
>
Chief Technology Officer
</div>
<div
style="
display: flex;
flex-direction: column;
gap: 8px;
font-size: 14px;
"
>
<div style="display: flex; align-items: center; gap: 12px">
<span style="opacity: 0.5">✉</span>
<span>robert@techcorp.io</span>
</div>
<div style="display: flex; align-items: center; gap: 12px">
<span style="opacity: 0.5">☎</span>
<span>+1 (555) 987-6543</span>
</div>
<div style="display: flex; align-items: center; gap: 12px">
<span style="opacity: 0.5">◍</span>
<span>techcorp.io</span>
</div>
</div>
<div
style="
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
"
>
<div style="font-size: 18px; font-weight: 600">
TechCorp
</div>
<div style="font-size: 13px; opacity: 0.6">
Innovation through technology
</div>
</div>
</div>
</div>