Address
Semantic address elements for contact information.
Basic Address
John Q. Public
123 Main Street
Anywhere, ST 12345
United States
123 Main Street
Anywhere, ST 12345
United States
HTML
<address style="font-style: normal; line-height: 1.8">
John Q. Public
<br />
123 Main Street
<br />
Anywhere, ST 12345
<br />
United States
</address>Address with Contact Info
Acme Corporation
456 Business Avenue, Suite 100
New York, NY 10001
+1 (212) 555-0123
contact@acme.com
456 Business Avenue, Suite 100
New York, NY 10001
+1 (212) 555-0123
contact@acme.com
HTML
<address style="font-style: normal; line-height: 2">
<strong>Acme Corporation</strong>
<br />
456 Business Avenue, Suite 100
<br />
New York, NY 10001
<br />
<br />
<a
href="tel:+1-212-555-0123"
style="color: var(--color_state_info)"
>
+1 (212) 555-0123
</a>
<br />
<a
href="mailto:contact@acme.com"
style="color: var(--color_state_info)"
>
contact@acme.com
</a>
</address>Address Card
⌖
Headquarters
1234 Innovation Drive
Tech Park, Building A
San Francisco, CA 94102
HTML
<div class="ss-c-card" style="max-width: 350px; padding: 24px">
<div style="display: flex; align-items: flex-start; gap: 16px">
<div
style="
width: 48px;
height: 48px;
background: var(--color_fill_secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
"
>
⌖
</div>
<address style="font-style: normal; line-height: 1.8; flex: 1">
<strong style="font-size: 16px">Headquarters</strong>
<br />
<span style="opacity: 0.8">
1234 Innovation Drive
<br />
Tech Park, Building A
<br />
San Francisco, CA 94102
</span>
</address>
</div>
</div>Multiple Addresses
Billing Address
Jane Smith789 Commerce St
Los Angeles, CA 90012
Shipping Address
Jane Smith456 Delivery Lane
Los Angeles, CA 90015
HTML
<div
style="
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
"
>
<div
style="
padding: 20px;
background: var(--color_fill_secondary);
border-radius: 12px;
"
>
<h4
style="
margin: 0 0 12px;
font-size: 14px;
text-transform: uppercase;
opacity: 0.7;
"
>
Billing Address
</h4>
<address style="font-style: normal; line-height: 1.7">
Jane Smith
<br />
789 Commerce St
<br />
Los Angeles, CA 90012
</address>
</div>
<div
style="
padding: 20px;
background: var(--color_fill_secondary);
border-radius: 12px;
"
>
<h4
style="
margin: 0 0 12px;
font-size: 14px;
text-transform: uppercase;
opacity: 0.7;
"
>
Shipping Address
</h4>
<address style="font-style: normal; line-height: 1.7">
Jane Smith
<br />
456 Delivery Lane
<br />
Los Angeles, CA 90015
</address>
</div>
</div>International Address Formats
US US Format
John Doe123 Main Street
New York, NY 10001
USA
GB UK Format
Mr James Smith45 Oxford Road
London
SW1A 1AA
United Kingdom
JP Japan Format
〒100-0001東京都千代田区
千代田1-1-1
山田 太郎 様
HTML
<div
style="
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
"
>
<div>
<h5 style="margin: 0 0 8px; opacity: 0.7">US US Format</h5>
<address style="font-style: normal; line-height: 1.6">
John Doe
<br />
123 Main Street
<br />
New York, NY 10001
<br />
USA
</address>
</div>
<div>
<h5 style="margin: 0 0 8px; opacity: 0.7">GB UK Format</h5>
<address style="font-style: normal; line-height: 1.6">
Mr James Smith
<br />
45 Oxford Road
<br />
London
<br />
SW1A 1AA
<br />
United Kingdom
</address>
</div>
<div>
<h5 style="margin: 0 0 8px; opacity: 0.7">JP Japan Format</h5>
<address style="font-style: normal; line-height: 1.6">
〒100-0001
<br />
東京都千代田区
<br />
千代田1-1-1
<br />
山田 太郎 様
</address>
</div>
</div>Address
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>