Gigaclear Pattern Library

Package Features 

<div class="flex mb-12 items-center justify-center">
    <div class="lg:inline-flex max-lg:w-full flex-col xl:flex-row mx-auto p-6 rounded-[16px] border-grey-200 border gap-4 xl:items-center bg-white">
        <div class="flex lg:items-center gap-6 flex-col max-lg:w-full lg:flex-row">

            <div class="flex gap-3 items-center">
                <div class="w-5 flex-shrink-0">

                    <svg class="fill-current w-5 h-5 text-bravo" aria-hidden="true">
                        <use href="/front-end/sprite.svg?v=1.2#icon-tick"></use>
                    </svg>

                </div>
                <div class="text-lg font-bold text-bravo">
                    Eero WIFI 7 Routers
                </div>
            </div>

            <div class="flex gap-3 items-center">
                <div class="w-5 flex-shrink-0">

                    <svg class="fill-current w-5 h-5 text-bravo" aria-hidden="true">
                        <use href="/front-end/sprite.svg?v=1.2#icon-tick"></use>
                    </svg>

                </div>
                <div class="text-lg font-bold text-bravo">
                    Free expert set-up
                </div>
            </div>

            <div class="flex gap-3 items-center">
                <div class="w-5 flex-shrink-0">

                    <svg class="fill-current w-5 h-5 text-bravo" aria-hidden="true">
                        <use href="/front-end/sprite.svg?v=1.2#icon-tick"></use>
                    </svg>

                </div>
                <div class="text-lg font-bold text-bravo">
                    WIFI Guarantee
                </div>
            </div>

            <div class="flex gap-3 items-center">
                <div class="w-5 flex-shrink-0">

                    <svg class="fill-current w-5 h-5 text-bravo" aria-hidden="true">
                        <use href="/front-end/sprite.svg?v=1.2#icon-tick"></use>
                    </svg>

                </div>
                <div class="text-lg font-bold text-bravo">
                    Free Eero Secure
                </div>
            </div>

        </div>
    </div>
</div>
 
<div class="flex mb-12 items-center justify-center">
    <div class="lg:inline-flex max-lg:w-full flex-col xl:flex-row mx-auto p-6 rounded-[16px] border-grey-200 border gap-4 xl:items-center bg-white">
        <div class="flex lg:items-center gap-6 flex-col max-lg:w-full lg:flex-row">
            {% for item in features %}
                <div class="flex gap-3 items-center">
                    <div class="{% if item.icon %}w-8{% else %}w-5{% endif %} flex-shrink-0">
                        {% if item.icon %}
                            {% render "@icon", { name: item.icon, modifier: "fill-current w-8 h-8 text-bravo", ariaHidden: true } %}
                        {% else %}
                            {% render "@icon", { name: 'icon-tick', modifier: "fill-current w-5 h-5 text-bravo", ariaHidden: true } %}
                        {% endif %}
                    </div>
                    <div class="text-lg font-bold text-bravo">
                        {{ item.name }}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>
 
{
  "siteName": "Gigaclear Pattern Library",
  "features": [
    {
      "name": "Eero WIFI 7 Routers"
    },
    {
      "name": "Free expert set-up"
    },
    {
      "name": "WIFI Guarantee"
    },
    {
      "name": "Free Eero Secure"
    }
  ]
}

No notes defined.