Etat Pur Design System

Address Card 

<div class="flex flex-col flex-1 gap-y-2 p-4 border border-black/16">
    <h3 class="text-brand-700 font-bold text-body-base">Adresse de facturation</h3>
    <div class="text-primary text-body-base">
        <address class="not-italic">
            <span class="font-bold">Marie-Noëlle Vincent</span><br>
            2 rue du Conseil des Quinze<br>
            Strasbourg, 67000<br>
            France<br>
            T: <a href="tel:0123456789">0123456789</a>
        </address>
    </div>
    <div>
        <a href="#" class="
         underline 
         link-base 
         link-base
        
        
    ">

            Modifier l'adresse de facturation

        </a>
    </div>
</div>
 
<div class="flex flex-col flex-1 gap-y-2 {{ border ? "p-4 border border-black/16" }}">
    <h3 class="text-brand-700 font-bold {{ title_class|default('text-body-base') }}">{{ title }}</h3>
    <div class="text-primary {{ address_class|default('text-body-base') }}">
        <address class="not-italic">
            <span class="font-bold">{{ name }}</span><br>
            {{ address }}<br>
            {{ city }}<br>
            {{ country }}<br>
            T: <a href="tel:{{ phone }}">{{ phone }}</a>
        </address>
    </div>
    {% if link is defined and link %}
        <div>
            {% render "@template-link" with link %}
        </div>
    {% endif %}
</div>
 
{
  "border": true,
  "title": "Adresse de facturation",
  "name": "Marie-Noëlle Vincent",
  "address": "2 rue du Conseil des Quinze",
  "city": "Strasbourg, 67000",
  "country": "France",
  "phone": "0123456789",
  "link": {
    "label": "Modifier l'adresse de facturation",
    "href": "#",
    "color": "dark",
    "type": "base",
    "underlined": true
  }
}

No notes defined.