Etat Pur Design System

Address page: without address 

<div class="flex flex-col justify-center gap-y-8">

    <div class="md:hidden">
        <div class="flex justify-between items-center">
            <button type="button" class=" btn  btn-dark  btn-simple  btn-size-sm btn-icons">
                <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M10.5 13L5.5 8L10.5 3" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg> Retour

            </button>

        </div>
    </div>

    <div class="flex flex-col gap-y-4">
        <h2 class="h5">Mes adresses par défaut</h2>

        <div class="flex flex-col md:flex-row gutter-half">
            <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 p-4 border border-black/16">
                <h3 class="text-brand-700 font-bold text-body-base">Adresse de livraison</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 livraison

                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="flex flex-col gap-4">
        <h2 class="h5">Carnet d'adresses</h2>

        <div>
            <p class="text-body-base">
                Vous n’avez pas d’autres adresse dans votre carnet d’adresses.
            </p>
        </div>
    </div>

    <div class="flex justify-between items-center">
        <button type="button" class=" btn  btn-dark  btn-simple  btn-size-sm btn-icons">
            <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M10.5 13L5.5 8L10.5 3" stroke="currentColor" stroke-width="1.5" fill="none" />

            </svg> Retour

        </button>

        <button type="button" class=" btn  btn-dark  btn-solid  btn-size-lg">
            Ajouter une nouvelle adresse

        </button>
    </div>
</div>
 
<div class="flex flex-col justify-center gap-y-8">

    <div class="md:hidden">
        {% render "@account-action-bar" with {
            primary_button: null
        } %}
    </div>

    <div class="flex flex-col gap-y-4">
        <h2 class="h5">Mes adresses par défaut</h2>

        <div class="flex flex-col md:flex-row gutter-half">
            {% render "@address-card" with {
                title: "Adresse de facturation",
                link: {
                    label: "Modifier l'adresse de facturation",
                }
            } %}
            {% render "@address-card" with {
                title: "Adresse de livraison",
                link: {
                    label: "Modifier l'adresse de livraison",
                }
            } %}
        </div>
    </div>

    <div class="flex flex-col gap-4">
        <h2 class="h5">Carnet d'adresses</h2>

        {% if address_items %}
            <div>
                {% render '@address-item-list' with {
                    address_items: address_items
                } %}

                {% render '@account-table-pagination' with {
                    array_size: address_items|length,
                    label: "adresse",
                    plural_label: "addresses",
                } %}
            </div>
        {% else %}
            <div>
                <p class="text-body-base">
                    Vous n’avez pas d’autres adresse dans votre carnet d’adresses.
                </p>
            </div>
        {% endif %}
    </div>

    {% render "@account-action-bar" with {
        primary_button: {
            label: "Ajouter une nouvelle adresse",
        }
    } %}
</div>
 
{
  "address_items": []
}

No notes defined.