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(--ss-color-info)"
>
+1 (212) 555-0123
</a>
<br />
<a
href="mailto:contact@acme.com"
style="color: var(--ss-color-info)"
>
contact@acme.com
</a>
</address>Address Card
Headquarters
1234 Innovation Drive
Tech Park, Building A
San Francisco, CA 94102
1234 Innovation Drive
Tech Park, Building A
San Francisco, CA 94102
HTML
<div
class="ss-c-card"
style="
max-width: 350px;
padding: 24px;
background: var(--ss-color-surface);
color: var(--ss-color-text);
"
>
<div style="display: flex; align-items: flex-start; gap: 16px">
<div
style="
width: 48px;
height: 48px;
background: var(--ss-color-surface-alt);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
"
aria-hidden="true"
>
⌖
</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(--ss-color-surface-alt);
border-radius: var(--ss-radius-lg);
"
>
<h3
style="
margin: 0 0 12px;
font-size: 14px;
text-transform: uppercase;
opacity: 0.7;
"
>
Billing Address
</h3>
<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(--ss-color-surface-alt);
border-radius: var(--ss-radius-lg);
"
>
<h3
style="
margin: 0 0 12px;
font-size: 14px;
text-transform: uppercase;
opacity: 0.7;
"
>
Shipping Address
</h3>
<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 Format
John Doe123 Main Street
New York, NY 10001
USA
UK Format
Mr James Smith45 Oxford Road
London
SW1A 1AA
United Kingdom
Japan Format
〒100-0001東京都千代田区
千代田1-1-1
山田 太郎 様
HTML
<div
style="
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
"
>
<div>
<h3 style="margin: 0 0 8px; font-size: 14px; color: var(--ss-color-text-muted)">US Format</h3>
<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>
<h3 style="margin: 0 0 8px; font-size: 14px; color: var(--ss-color-text-muted)">UK Format</h3>
<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>
<h3 style="margin: 0 0 8px; font-size: 14px; color: var(--ss-color-text-muted)">Japan Format</h3>
<address style="font-style: normal; line-height: 1.6">
〒100-0001
<br />
東京都千代田区
<br />
千代田1-1-1
<br />
山田 太郎 様
</address>
</div>
</div>VCard
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: var(--ss-color-surface);
border: 1px solid var(--ss-color-border);
border-radius: var(--ss-radius-lg);
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(--ss-color-accent);
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: var(--ss-color-surface);
border: 1px solid var(--ss-color-border);
border-radius: var(--ss-radius-xl);
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(--ss-color-surface-alt);
"
>
<img
src="/img/placeholder/100x100.svg"
alt="Sarah Johnson"
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(--ss-color-accent);
"
>
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="#"
aria-label="Twitter"
style="
width: 36px;
height: 36px;
background: var(--ss-color-surface-alt);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
"
>
<span aria-hidden="true">▽</span>
</a>
<a
href="#"
aria-label="LinkedIn"
style="
width: 36px;
height: 36px;
background: var(--ss-color-surface-alt);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
"
>
<span aria-hidden="true">▤</span>
</a>
<a
href="#"
aria-label="Email"
style="
width: 36px;
height: 36px;
background: var(--ss-color-surface-alt);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
"
>
<span aria-hidden="true">✉</span>
</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: var(--ss-color-surface);
border: 1px solid var(--ss-color-border);
border-radius: var(--ss-radius-xl);
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: var(--ss-radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: #111111;
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(--ss-color-accent);
"
>
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(--ss-color-accent);
color: var(--ss-color-on-accent);
border: none;
border-radius: var(--ss-radius-md);
cursor: pointer;
font-size: 14px;
"
>
Connect
</button>
<button
style="
padding: 10px 20px;
background: var(--ss-color-surface-alt);
border: none;
border-radius: var(--ss-radius-md);
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: var(--ss-color-surface);
border: 1px solid var(--ss-color-border);
border-radius: var(--ss-radius-lg);
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>
<h4 style="margin: 0 0 4px; font-size: 16px">Alex Kim</h4>
<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: var(--ss-color-surface);
border: 1px solid var(--ss-color-border);
border-radius: var(--ss-radius-lg);
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: #111111;
font-size: 28px;
"
>
MR
</div>
<h4 style="margin: 0 0 4px; font-size: 16px">
Maria Rodriguez
</h4>
<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: var(--ss-color-surface);
border: 1px solid var(--ss-color-border);
border-radius: var(--ss-radius-lg);
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: #111111;
font-size: 28px;
"
>
JP
</div>
<h4 style="margin: 0 0 4px; font-size: 16px">James Park</h4>
<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: var(--ss-color-surface);
border: 1px solid var(--ss-color-border);
border-radius: var(--ss-radius-lg);
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: #111111;
font-size: 28px;
"
>
SL
</div>
<h4 style="margin: 0 0 4px; font-size: 16px">Sophie Lee</h4>
<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(--ss-color-surface-alt);
border-radius: var(--ss-radius-lg);
"
>
<div
style="
width: 40px;
height: 40px;
background: var(--ss-color-accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--ss-color-on-accent);
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(--ss-color-success);
color: var(--ss-color-on-success);
border-radius: var(--ss-radius-md);
"
>
Online
</span>
</div>
<div
class="ss-c-vcard ss-c-vcard--compact"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--ss-color-surface-alt);
border-radius: var(--ss-radius-lg);
"
>
<div
style="
width: 40px;
height: 40px;
background: #f093fb;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #111111;
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(--ss-color-border);
border-radius: var(--ss-radius-md);
"
>
Away
</span>
</div>
<div
class="ss-c-vcard ss-c-vcard--compact"
style="
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--ss-color-surface-alt);
border-radius: var(--ss-radius-lg);
"
>
<div
style="
width: 40px;
height: 40px;
background: #4facfe;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #111111;
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(--ss-color-error);
color: var(--ss-color-on-error);
border-radius: var(--ss-radius-md);
"
>
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: var(--ss-radius-xl);
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>