## Address

Semantic address elements for contact information.

### Basic Address

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

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

📍
HTML

    <div class="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

#### Shipping Address

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 Format

##### 🇬🇧 UK Format

##### 🇯🇵 Japan Format

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 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">🇬🇧 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">🇯🇵 Japan Format</h5>
                    <address style="font-style: normal; line-height: 1.6">
                        〒100-0001
                        <br />
                        東京都千代田区
                        <br />
                        千代田1-1-1
                        <br />
                        山田 太郎 様
                    </address>
                </div>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!