Alain Afflelou Design System

Small Slider Card 

<div class="flex flex-col justify-between gap-12 min-h-80 p-6 md:p-10 rounded-lg
            bg-neutral-800
             text-white         ">
    <div class="pt-10"></div>
    <div>
        <p class="text-xs  text-light-50  mt-2">On vous aide</p>
        <h3 class="text-xl mb-3">Comment choisir sa monture idéale ?</h3>
        <p>Trouvez des lunettes adaptées à la forme de votre visage.</p>
    </div>
    <a href="https://www.afflelou.com/" class="self-baseline  btn btn-light-subtle ">
        Démarrer le scan

    </a>
</div>
 
<div
        class="flex flex-col justify-between gap-12 min-h-80 p-6 md:p-10 rounded-lg
            bg-{{ colorBackground }}
            {% if sliderTheme == "dark" %} text-white {% else %} text-dark/80 {% endif %}
        "
>
    <div class="pt-10"></div>
    <div>
        <p class="text-xs {% if sliderTheme == "dark" %} text-light-50 {% else %} text-dark-40 {% endif %} mt-2">{{ subTitle }}</p>
        <h3 class="text-xl mb-3">{{ title }}</h3>
        <p>{{ description }}</p>
    </div>
    {% render "@template-button" with {
        href: CTA.href,
        color: CTA.color,
        label: CTA.label,
        button_class: "self-baseline"
    } %}
</div>
 
{
  "uniqueId": "uniqueId",
  "index": "1",
  "title": "Comment choisir sa monture idéale ?",
  "subTitle": "On vous aide",
  "description": "Trouvez des lunettes adaptées à la forme de votre visage.",
  "colorBackground": "neutral-800",
  "CTA": {
    "label": "Démarrer le scan",
    "href": "https://www.afflelou.com/",
    "external": true,
    "color": "light-subtle"
  },
  "sliderTheme": "dark"
}

No notes defined.