Etat Pur Design System

Card Summary 

<section class="flex flex-col gap-1">
    <h2 class="px-3 pt-2 h6">Récapitulatif</h2>

    <div class="flex flex-col gap-3 pt-2 px-3 pb-3 text-body-sm">
        <div class="flex flex-row gap-2">

            <div class="flex flex-col w-full gap-y-1">
                <div class="input-wrapper flex flex-col relative w-full  floating-label">

                    <input type="text" name="text" id="codepromo" class="form-input w-full peer
                
                " placeholder="" @input.debounce="onChange">

                    <div class="label-wrapper ">
                        <label for="codepromo" class="flex flex-row items-center gap-2">

                            <span class="flex-grow">Code promo</span>

                        </label>
                    </div>
                </div>

            </div> <button type="button" class=" btn  btn-dark  btn-solid  btn-size-md">
                OK

            </button>
        </div>

        <div class="pt-1 flex flex-row gap-2 justify-between">
            <p>Sous-total</p>
            <div>57,70€</div>
        </div>

        <div class="pt-1 flex flex-col">
            <div class="flex flex-row gap-2 justify-between">
                <div class="flex flex-col">
                    <p>Frais de livraison estimés</p>
                    <p class="text-body-xs text-black/56">Livraison gratuite à partir de 50€ d’achat</p>
                </div>
                <span>0,00€</span>
            </div>
            <div class="bg-neutral-50 flex flex-col gap-1 px-2 py-1.5">
                <div class="flex flex-row justify-between items-center gap-2">
                    <svg class="text-black/56 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="M5.5 12.5C5.5 13.0523 5.05228 13.5 4.5 13.5C3.94772 13.5 3.5 13.0523 3.5 12.5M5.5 12.5C5.5 11.9477 5.05228 11.5 4.5 11.5C3.94772 11.5 3.5 11.9477 3.5 12.5M5.5 12.5H9.5M3.5 12.5H2.25C1.83579 12.5 1.5 12.1642 1.5 11.75V9.5003M13 12.5C13 13.0523 12.5523 13.5 12 13.5C11.4477 13.5 11 13.0523 11 12.5M13 12.5C13 11.9477 12.5523 11.5 12 11.5C11.4477 11.5 11 11.9477 11 12.5M13 12.5L13.75 12.5C14.1642 12.5 14.5024 12.1638 14.477 11.7504C14.3369 9.47865 13.5648 7.37792 12.3344 5.62189C12.0929 5.27728 11.7019 5.07183 11.2818 5.04877H9.5M11 12.5H9.5M9.5 5.04877V4.40986C9.5 4.03153 9.21832 3.71147 8.84201 3.67242C7.74356 3.55843 6.6286 3.5 5.5 3.5C4.3714 3.5 3.25644 3.55843 2.15799 3.67242C1.78168 3.71147 1.5 4.03153 1.5 4.40986V9.5003M9.5 5.04877V9.5003M9.5 12.5V9.5003M9.5 9.5003H1.5" stroke="currentColor" stroke-width="1.5" fill="none" />

                    </svg>
                    <div class="h-2 w-full bg-neutral-100 rounded-full overflow-hidden">
                        <div class="h-full bg-brand-700 rounded-full" style="width: NaN%" role="progressbar" aria-valuenow="NaN" aria-valuemin="0" aria-valuemax="100" aria-label="Progression vers la livraison gratuite" aria-valuetext="NaN% complété - NaN€ sur €">
                        </div>
                    </div>

                    <svg class="text-brand-700 shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                        <path d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                    </svg>
                </div>
                <div class="flex items-center gap-2">
                    <div class="text-brand-600">
                        <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 12C2.25 6.61522 6.61522 2.25 12 2.25C17.3848 2.25 21.75 6.61522 21.75 12C21.75 17.3848 17.3848 21.75 12 21.75C6.61522 21.75 2.25 17.3848 2.25 12ZM15.6103 10.1859C15.8511 9.84887 15.773 9.38046 15.4359 9.1397C15.0989 8.89894 14.6305 8.97701 14.3897 9.31407L11.1543 13.8436L9.53033 12.2197C9.23744 11.9268 8.76256 11.9268 8.46967 12.2197C8.17678 12.5126 8.17678 12.9874 8.46967 13.2803L10.7197 15.5303C10.8756 15.6862 11.0921 15.7656 11.3119 15.7474C11.5316 15.7293 11.7322 15.6153 11.8603 15.4359L15.6103 10.1859Z" fill="currentColor" />

                        </svg>
                    </div>
                    <p class="text-sm">Votre livraison <strong>est offerte</strong> !</p>
                </div>
            </div>
        </div>

        <div class="pt-1 flex flex-row gap-2 justify-between">
            <div class="flex flex-col">
                <p>Code promo</p>
                <p class="text-body-xs text-black/56">La crème riche – Hydratation intense • 15ml</p>
            </div>
            <span>Offert</span>
        </div>

        <div class="pt-1 flex flex-row gap-2 justify-between">
            <div class="flex flex-col">
                <p class="font-bold">TOTAL</p>
                <p class="text-body-xs text-black/56">Taxes de 00,00 € incluses</p>
            </div>
            <span class="font-bold">57,70€</span>
        </div>
    </div>

    <div id="buttonOrders" class="flex flex-col justify-center gap-2.5">
        <button type="button" class="justify-center  btn  btn-dark  btn-solid  btn-size-lg">
            Commander

        </button>

        <a href="#" class="
         underline 
         link-medium
         link-dark
        
        flex justify-center
    ">

            Partager mon panier

        </a>
    </div>

    <div class="flex justify-around gap-3 md:gap-4 3xl:gap-5 py-4">
        <div class="flex flex-col gap-1 items-center text-center text-brand-700">
            <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.75541 10.0589C5.82748 6.0579 9.94 3.68353 13.941 4.75559C15.262 5.10955 16.4038 5.79374 17.3036 6.69528L19.2067 8.59835H16.023C15.6088 8.59835 15.273 8.93414 15.273 9.34835C15.273 9.76256 15.6088 10.0984 16.023 10.0984H21.0156C21.2145 10.0984 21.4053 10.0193 21.546 9.87864C21.6866 9.73797 21.7656 9.54717 21.7656 9.34824V4.35575C21.7656 3.94153 21.4298 3.60575 21.0156 3.60575C20.6014 3.60575 20.2656 3.94153 20.2656 4.35575V7.53591L18.3653 5.63561C17.2841 4.55253 15.9116 3.73071 14.3292 3.3067C9.52803 2.02023 4.593 4.86947 3.30653 9.67067C3.19932 10.0708 3.43676 10.482 3.83686 10.5892C4.23696 10.6964 4.64821 10.459 4.75541 10.0589ZM20.1629 13.4108C19.7628 13.3036 19.3515 13.5411 19.2443 13.9412C18.1722 17.9422 14.0597 20.3165 10.0587 19.2445C8.73774 18.8905 7.59594 18.2063 6.69609 17.3048L4.7942 15.4017H7.97702C8.39123 15.4017 8.72702 15.0659 8.72702 14.6517C8.72702 14.2375 8.39123 13.9017 7.97702 13.9017L2.98438 13.9017C2.57016 13.9017 2.23438 14.2375 2.23438 14.6517V19.6443C2.23438 20.0585 2.57016 20.3943 2.98438 20.3943C3.39859 20.3943 3.73438 20.0585 3.73438 19.6443V16.4632L5.63444 18.3645C6.71564 19.4477 8.08796 20.2693 9.67048 20.6934C14.4717 21.9798 19.4067 19.1306 20.6932 14.3294C20.8004 13.9293 20.563 13.5181 20.1629 13.4108Z" fill="currentColor" />

            </svg>
            <p class="text-body-sm">Retour gratuit sous 30 jours</p>
        </div>
        <div class="flex flex-col gap-1 items-center text-center text-brand-700">
            <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path d="M2.25 8.25H21.75M2.25 9H21.75M5.25 14.25H11.25M5.25 16.5H8.25M4.5 19.5H19.5C20.7426 19.5 21.75 18.4926 21.75 17.25V6.75C21.75 5.50736 20.7426 4.5 19.5 4.5H4.5C3.25736 4.5 2.25 5.50736 2.25 6.75V17.25C2.25 18.4926 3.25736 19.5 4.5 19.5Z" stroke="currentColor" stroke-width="1.5" fill="none" />

            </svg>
            <p class="text-body-sm">Paiement sécurisé</p>
        </div>
    </div>
</section>
 
<section class="flex flex-col gap-1">
    <h2 class="px-3 pt-2 h6">Récapitulatif</h2>

    <div class="flex flex-col gap-3 pt-2 px-3 pb-3 text-body-sm">
        <div class="flex flex-row gap-2">
            {% render "@template-input" with {
                id: "codepromo",
                name: "text",
                type: "text",
                label: "Code promo",
                label_floating: true,
                color: input.color,
            } %}
            {% render "@template-button" with {
                label: "OK",
                color: "dark",
                size: "md"
            } %}
        </div>

        <div class="pt-1 flex flex-row gap-2 justify-between">
            <p>Sous-total</p>
            <div>57,70€</div>
        </div>

        <div class="pt-1 flex flex-col">
            <div class="flex flex-row gap-2 justify-between">
                <div class="flex flex-col">
                    <p>Frais de livraison estimés</p>
                    <p class="text-body-xs text-black/56">Livraison gratuite à partir de 50€ d’achat</p>
                </div>
                <span>0,00€</span>
            </div>
            <div class="bg-neutral-50 flex flex-col gap-1 px-2 py-1.5">
                <div class="flex flex-row justify-between items-center gap-2">
                    {% render "@icons-heroicons--truck-outline" with {
                        size: 16,
                        iconClass: "text-black/56"
                    } %}
                    <div class="h-2 w-full bg-neutral-100 rounded-full overflow-hidden">
                        {% set progress = (product.shipping.freeThresholdRenaming / product.shipping.freeThreshold) * 100 %}
                        <div class="h-full bg-brand-700 rounded-full"
                             style="width: {{ progress }}%"
                             role="progressbar"
                             aria-valuenow="{{ progress }}"
                             aria-valuemin="0"
                             aria-valuemax="100"
                             aria-label="Progression vers la livraison gratuite"
                             aria-valuetext="{{ progress }}% complété - {{ product.shipping.freeThresholdRenaming|round(2) }}€ sur {{ product.shipping.freeThreshold }}€">
                        </div>
                    </div>

                    {% render "@icons-heroicons--information-circle-outline" with {
                        iconClass: "text-brand-700"
                    } %}
                </div>
                <div class="flex items-center gap-2">
                    <div class="text-brand-600">
                        {% render "@icons-heroicons--check-circle-solid" %}
                    </div>
                    <p class="text-sm">Votre livraison <strong>est offerte</strong> !</p>
                </div>
            </div>
        </div>

        <div class="pt-1 flex flex-row gap-2 justify-between">
            <div class="flex flex-col">
                <p>Code promo</p>
                <p class="text-body-xs text-black/56">La crème riche – Hydratation intense • 15ml</p>
            </div>
            <span>Offert</span>
        </div>

        <div class="pt-1 flex flex-row gap-2 justify-between">
            <div class="flex flex-col">
                <p class="font-bold">TOTAL</p>
                <p class="text-body-xs text-black/56">Taxes de 00,00 € incluses</p>
            </div>
            <span class="font-bold">57,70€</span>
        </div>
    </div>

    <div id="buttonOrders" class="flex flex-col justify-center gap-2.5">
        {% render "@template-button" with {
            label: "Commander",
            color: "dark",
            type: "solid",
            button_class: "justify-center"
        } %}

        {% render "@template-link" with {
            href: "#",
            size: "medium",
            label: "Partager mon panier",
            type: 'dark',
            underlined: true,
            link_class: "flex justify-center"
        } %}
    </div>

    <div class="flex justify-around gap-3 md:gap-4 3xl:gap-5 py-4">
        <div class="flex flex-col gap-1 items-center text-center text-brand-700">
            {% render "@icons-heroicons--arrow-rotate-path" %}
            <p class="text-body-sm">Retour gratuit sous 30 jours</p>
        </div>
        <div class="flex flex-col gap-1 items-center text-center text-brand-700">
            {% render "@icons-heroicons--credit-card-outline" %}
            <p class="text-body-sm">Paiement sécurisé</p>
        </div>
    </div>
</section>
 
/* No context defined. */

No notes defined.