Etat Pur Design System

Info Store Locator 

<div class="relative w-[450px] p-4 bg-white">

    <a href="#" type="button" aria-label="Rechercher" class="absolute top-6 right-6  btn  btn-dark  btn-simple  btn-size-lg btn-only-icon">
        <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="M6 18 18 6M6 6l12 12" stroke="currentColor" stroke-width="1.5" fill="none" />

        </svg>

    </a>

    <div class="flex items-start">
        <div class="flex w-1/12 pl-1 pt-2.5">
            <svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" 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="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" fill="none" />
                <path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" fill="none" />

            </svg>
        </div>
        <h1 class="w-11/12 pr-3 h1">
            PHARMACIE DE LA REPUBLIQUE
        </h1>
    </div>

    <div class="mt-2 ">
        121 AVENUE DE LA REPUBLIQUE
    </div>
    <div>
        CHAUMONT CEDEX
    </div>

    <div class="flex flex-wrap items-center gap-4">
        <span>
            <a href="tel:03 25 03 02 90" class="
        
         link-base 
         link-dark
        
        
    ">

                03 25 03 02 90

            </a>
        </span>
        -
        <a href="https://www.pharmacie-republique-chaumont-121.com" class="
         underline 
         link-base 
         link-dark
        
        
    ">

            Site web

        </a>
    </div>

    <div class="my-6 ">
        <div class="font-bold mb-2">
            Horaires d'ouverture
        </div>
        <ul class="space-y-1">
            <li class="flex">
                <div class="w-3/12">lundi:</div>
                <div><span class="ml-4">08:30 - 19:30</span></div>
            </li>
            <li class="flex">
                <div class="w-3/12">mardi:</div>
                <div><span class="ml-4">08:30 - 19:30</span></div>
            </li>
            <li class="flex">
                <div class="w-3/12">mercredi:</div>
                <div><span class="ml-4">08:30 - 19:30</span></div>
            </li>
            <li class="flex">
                <div class="w-3/12">jeudi:</div>
                <div><span class="ml-4">08:30 - 19:30</span></div>
            </li>
            <li class="flex">
                <div class="w-3/12">vendredi:</div>
                <div><span class="ml-4">08:30 - 19:30</span></div>
            </li>
            <li class="flex">
                <div class="w-3/12">samedi:</div>
                <div><span class="ml-4">08:30 - 12:30</span></div>
            </li>
            <li class="flex">
                <div class="w-3/12">dimanche:</div>
                <div><span class="ml-4">Fermé</span></div>
            </li>
        </ul>
    </div>

    <a href="https://www.google.com/maps/dir/?api=1&origin=PHARMACIE DE LA REPUBLIQUE&destination=PHARMACIE DE LA REPUBLIQUE" type="button" class="justify-center  btn  btn-dark  btn-solid  btn-size-lg btn-icons">
        <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="M12 21.0046C16.1926 21.0046 19.7156 18.1379 20.7157 14.2576M12 21.0046C7.80742 21.0046 4.28442 18.1379 3.2843 14.2576M12 21.0046C14.4853 21.0046 16.5 16.9752 16.5 12.0046C16.5 7.03408 14.4853 3.00464 12 3.00464M12 21.0046C9.51472 21.0046 7.5 16.9752 7.5 12.0046C7.5 7.03408 9.51472 3.00464 12 3.00464M12 3.00464C15.3652 3.00464 18.299 4.85158 19.8431 7.58709M12 3.00464C8.63481 3.00464 5.70099 4.85158 4.15692 7.58709M19.8431 7.58709C17.7397 9.40503 14.9983 10.5046 12 10.5046C9.00172 10.5046 6.26027 9.40503 4.15692 7.58709M19.8431 7.58709C20.5797 8.89207 21 10.3993 21 12.0046C21 12.7826 20.9013 13.5376 20.7157 14.2576M20.7157 14.2576C18.1334 15.6894 15.1619 16.5046 12 16.5046C8.8381 16.5046 5.86662 15.6894 3.2843 14.2576M3.2843 14.2576C3.09871 13.5376 3 12.7826 3 12.0046C3 10.3993 3.42032 8.89207 4.15692 7.58709" stroke="currentColor" stroke-width="1.5" fill="none" />

        </svg> Itinéraire

    </a>
</div>
 
<div class="relative w-[450px] p-4 bg-white">

    {% render "@template-button" with {
        color: 'dark',
        href: '#',
        type: 'simple',
        icon_type: 'only-icon',
        label: "Rechercher",
        icon: {
            name: 'heroicons--x-mark-outline',
        },
        button_class: "absolute top-6 right-6"
    } %}

    <div class="flex items-start">
        <div class="flex w-1/12 pl-1 pt-2.5">
            {% render "@icons-heroicons--map-pin-outline" %}
        </div>
        <h1 class="w-11/12 pr-3 h1">
            PHARMACIE DE LA REPUBLIQUE
        </h1>
    </div>

    <div class="mt-2 ">
        121 AVENUE DE LA REPUBLIQUE
    </div>
    <div>
        CHAUMONT CEDEX
    </div>

    <div class="flex flex-wrap items-center gap-4">
        <span>
            {% render "@template-link" with {
                href: "tel:03 25 03 02 90",
                label: "03 25 03 02 90",
                type: 'dark'
            } %}
        </span>
        -
        {% render "@template-link" with {
            href: "https://www.pharmacie-republique-chaumont-121.com",
            label: "Site web",
            externe: true,
            type: 'dark',
            underlined:true
        } %}
    </div>

    <div class="my-6 ">
        <div class="font-bold mb-2">
            Horaires d'ouverture
        </div>
        <ul class="space-y-1">
            <li class="flex">
                <div class="w-3/12">lundi:</div>
                <div><span class="ml-4">08:30 - 19:30</span></div>
            </li>
            <li class="flex">
                <div class="w-3/12">mardi:</div>
                <div><span class="ml-4">08:30 - 19:30</span></div>
            </li>
            <li class="flex">
                <div class="w-3/12">mercredi:</div>
                <div><span class="ml-4">08:30 - 19:30</span></div>
            </li>
            <li class="flex">
                <div class="w-3/12">jeudi:</div>
                <div><span class="ml-4">08:30 - 19:30</span></div>
            </li>
            <li class="flex">
                <div class="w-3/12">vendredi:</div>
                <div><span class="ml-4">08:30 - 19:30</span></div>
            </li>
            <li class="flex">
                <div class="w-3/12">samedi:</div>
                <div><span class="ml-4">08:30 - 12:30</span></div>
            </li>
            <li class="flex">
                <div class="w-3/12">dimanche:</div>
                <div><span class="ml-4">Fermé</span></div>
            </li>
        </ul>
    </div>

    {% render "@template-button" with {
        label: "Itinéraire",
        color: "dark",
        type: "solid",
        href: "https://www.google.com/maps/dir/?api=1&origin=PHARMACIE DE LA REPUBLIQUE&destination=PHARMACIE DE LA REPUBLIQUE",
        externe: true,
        icon_type:"leading-icon",
        icon: {
            name: "heroicons--globe-outline",
        },
        button_class: "justify-center"
    } %}
</div>
 
/* No context defined. */

No notes defined.