Alain Afflelou Design System

text Cards 

<div class="relative p-4 md:p-8 bg-brand-400/40 rounded-lg h-full">
    <div class="space-y-2">
        <h3 class="text-base md:text-2xl text-neutral-800 font-medium">
            Protégez vos yeux des rayons du soleil.
        </h3>
        <p class="text-sm md:text-xl text-neutral-800">
            Découvrez tout ce qu'il y a à savoir sur les indices de protection UV.
        </p>
    </div>

    <button type="button" class="absolute bottom-6 right-6  btn btn-dark  btn-only-icon">
        <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M12.75 7C12.75 6.58579 12.4142 6.25 12 6.25C11.5858 6.25 11.25 6.58579 11.25 7V11.25H7C6.58579 11.25 6.25 11.5858 6.25 12C6.25 12.4142 6.58579 12.75 7 12.75H11.25V17C11.25 17.4142 11.5858 17.75 12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V12.75H17C17.4142 12.75 17.75 12.4142 17.75 12C17.75 11.5858 17.4142 11.25 17 11.25H12.75V7Z" fill="currentColor" />
        </svg>

    </button>

</div>
 
<div class="relative p-4 md:p-8 bg-brand-400/40 rounded-lg h-full">
    <div class="space-y-2">
        <h3 class="text-base md:text-2xl text-neutral-800 font-medium">
            {{ title }}
        </h3>
        <p class="text-sm md:text-xl text-neutral-800">
            {{ description }}
        </p>
    </div>

    {% render "@template-button" with {
        color: "dark",
        type:'only-icon',
        icon: {name:'library--plus-outline'},
        button_class: "absolute bottom-6 right-6"
    } %}

</div>
 
{
  "title": "Protégez vos yeux des rayons du soleil.",
  "description": "Découvrez tout ce qu'il y a à savoir sur les indices de protection UV."
}

No notes defined.