Documentation - Cards.

<div class="card-simple---[bg-[white]+rounded-[8px]+shadow-[0_2px_8px_rgba(0,0,0,0.1)]+p-[20px]]">
    <h3 class="font-weight-[600] mb-[12px]">Card title</h3>
    <p class="c-[666] line-h-[1d6]">
        Card content with a clear and concise description.
    </p>
</div>

<!-- Image at top -->
<div class="card---[bg-[white]+rounded-[12px]+shadow-[0_4px_12px_rgba(0,0,0,0.08)]+overflow-[hidden]]">
    <div class="card-image---[h-[200px]+overflow-[hidden]]">
        <img src="https://placehold.co/600x400"
        class="w-[100%] h-[100%] object-[cover]"
        alt="Description">
    </div>

    <div class="card-content---[p-[24px]]">
        <h3 class="font-weight-[600] c-[333] mb-[12px]">Title</h3>
        <p class="c-[555] line-h-[1d6]">Description of the contents of the card.</p>
    </div>
</div>

<div class="card---[bg-[white]+rounded-[12px]+shadow-[0_4px_12px_rgba(0,0,0,0.08)]+overflow-[hidden]]">
    <div class="card-content---[p-[24px]]">
        <h3 class="font-weight-[600] c-[333] mb-[12px]">Article</h3>
        <p class="c-[555] line-h-[1d6] mb-[16px]">
            A captivating overview of the article to encourage reading.
        </p>
    </div>

    <div class="card-footer---[p-[20px]+border-t-[1px_solid_e0e0e0]+d-[flex]+justify-[space-between]+items-[center]]">
        <span class="c-[777] font-size-[14px]">2 hours ago</span>
        <button class="btn---[bg-[0B63F3]+c-[white]+py-[8px]+px-[16px]+rounded-[6px]+border-[none]+cursor-[pointer]]">
            Read more
        </button>
    </div>
</div>

<!-- Image on the left, content on the right -->
<div class="card---[bg-[white]+rounded-[12px]+shadow-[0_4px_12px_rgba(0,0,0,0.08)]+overflow-[hidden]+d-[flex]+flex-direction-[row]]">
    <div class="card-image---[w-[40%]+flex-shrink-[0]+overflow-[hidden]]">
        <img src="https://placehold.co/600x400"
        class="w-[100%] h-[100%] object-[cover]"
        alt="Image">
    </div>

    <div class="card-content---[p-[24px]+d-[flex]+flex-direction-[column]+justify-[center]+flex-[1]]">
        <h3 class="font-weight-[600] c-[333] mb-[12px]">Horizontal title</h3>
        <p class="c-[555] line-h-[1d6]">Card content with horizontal layout.</p>
    </div>
</div>

<div class="card---[bg-[white]+rounded-[12px]+shadow-[0_4px_12px_rgba(0,0,0,0.08)]+overflow-[hidden]]">
    <div class="card-image---[h-[200px]+overflow-[hidden]+pos-[relative]]">
        <img src="https://placehold.co/600x400"
        class="w-[100%] h-[100%] object-[cover]"
        alt="Image">

        <!-- Badge overlay -->
        <div class="badge---[pos-[absolute]+top-[16px]+left-[16px]+bg-[D41212]+c-[white]+px-[12px]+py-[6px]+rounded-[4px]+font-weight-[500]+font-size-[14px]]">
            New
        </div>
    </div>

    <div class="card-content---[p-[24px]]">
        <h3 class="font-weight-[600] c-[333] mb-[12px]">Recent product</h3>
        <p class="c-[555] line-h-[1d6]">Discover our latest innovation.</p>
    </div>
</div>

<div class="card---[bg-[white]+rounded-[12px]+shadow-[0_4px_12px_rgba(0,0,0,0.08)] card---[overflow-[hidden]+transition-[transform_0.3s_ease]+transform-[translateY(-8px)]]:hover">
    <div class="card-image---[h-[220px]+overflow-[hidden]]">
        <img src="https://placehold.co/600x400"
        class="w-[100%] h-[100%] object-[cover] transition-[transform_0.5s_ease] transform-[scale(1.1)]:hover"
        alt="Image avec zoom">
    </div>

    <div class="card-content---[p-[24px]]">
        <h3 class="font-weight-[600] c-[333] mb-[12px]">Interactive card</h3>
        <p class="c-[555] line-h-[1d6]">Hover over to see the animation effect.</p>
    </div>
</div>

<div class="card---[bg-[white]+rounded-[12px]+shadow-[0_4px_20px_rgba(0,0,0,0.08)]+overflow-[hidden]]">
    <div class="card-image---[h-[220px]+overflow-[hidden]+pos-[relative]]">
        <img src="https://placehold.co/600x400"
        class="w-[100%] h-[100%] object-[cover]"
        alt="Innovation">

        <div class="image-overlay---[pos-[absolute]+top-[0]+left-[0]+w-[100%]+h-[100%]+bg-rgba-[0,0,0,0.2]]+d-[flex]+items-[flex-end]]">
            <span class="badge---[bg-[0B63F3]+c-[white]+px-[12px]+py-[6px]+rounded-[4px]+m-[16px]+font-weight-[500]]">
                Popular
            </span>
        </div>
    </div>

    <div class="card-content---[p-[28px]+d-[flex]+flex-direction-[column]+gap-[16px]]">
        <h3 class="card-title---[font-weight-[600]+c-[333]+font-size-[20px]+m-[0]]">
            Technological innovation
        </h3>

        <p class="card-text---[c-[555]+line-h-[1d6]+m-[0]]">
            Explore the latest technological advances that are transforming the way we work.
        </p>

        <div class="card-meta---[d-[flex]+justify-[space-between]+items-[center]+mt-[16px]]">
            <span class="card-date---[c-[777]+font-size-[14px]]">March 2025</span>
            <div class="card-rating---[d-[flex]+items-[center]]">
                <span class="rating-value---[mr-[6px]+font-weight-[600]+c-[333]]">4.8</span>
                <span class="rating-stars---[c-[ffc107]]">★★★★★</span>
            </div>
        </div>
    </div>

    <div class="card-footer---[p-[24px]+border-t-[1px_solid_f0f0f0]+d-[flex]+justify-[space-between]+items-[center]]">
        <button class="btn-primary---[bg-[4361ee]+c-[white]+py-[10px]+px-[20px]+rounded-[6px]+border-[none]+cursor-[pointer]+transition-[background-color_0.3s]+bg-[3651de]:hover]">
            Discover
        </button>
        <a class="btn-link---[c-[4361ee]+text-dec-[none]+font-weight-[500]+transition-[color_0.3s]+c-[264bd1]:hover]">
            Learn more →
        </a>
    </div>
</div>

<div class="card---[bg-[white]+rounded-[12px]+shadow-[0_4px_20px_rgba(0,0,0,0.08)]+overflow-[hidden]+pos-[relative]]">
    <!-- Premium Ribbon -->
    <div class="card-ribbon---[pos-[absolute]+top-[16px]+right-[0]+bg-[ffd700]+c-[333]+py-[6px]+px-[16px]+font-weight-[600]+font-size-[14px]+shadow-[0_2px_10px_rgba(0,0,0,0.1)]+z-[10]]">
        PREMIUM
    </div>

    <div class="card-content---[p-[28px]+d-[flex]+flex-direction-[column]+gap-[16px]]">
        <h3 class="card-title---[font-weight-[700]+c-[333]+font-size-[22px]+m-[0]]">
            Exclusive experience
        </h3>

        <p class="card-text---[c-[555]+line-h-[1d7]+m-[0]]">
            Access advanced features and personalized support.
        </p>

        <ul class="feature-list---[mt-[16px]+pl-[0]]">
            <li class="feature-item---[d-[flex]+items-[center]+mb-[10px]+c-[555]]">
                <span class="check-icon---[c-[4caf50]+mr-[8px]]">✓</span>
                24/7 priority support
            </li>
            <li class="feature-item---[d-[flex]+items-[center]+mb-[10px]+c-[555]]">
                <span class="check-icon---[c-[4caf50]+mr-[8px]]">✓</span>
                Advanced updates
            </li>
            <li class="feature-item---[d-[flex]+items-[center]+c-[555]]">
                <span class="check-icon---[c-[4caf50]+mr-[8px]]">✓</span>
                Exclusive Features
            </li>
        </ul>

        <button class="btn-premium---[bg-[ffd700]+c-[333]+py-[12px]+px-[20px]+rounded-[6px]+border-[none]+cursor-[pointer]+font-weight-[600]+transition-[transform_0.2s] btn-premium---[transform-[scale(1.03)]]:hover">
            Subscribe now
        </button>
    </div>
</div>

<div class="card-wrapper---[bg-[white]+rounded-[12px]+shadow-[0_4px_12px_rgba(0,0,0,0.08)]+overflow-[hidden]]">
    <div class="card-content---[p-[24px]]">
        <div class="card-tag---[bg-[e8f4fd]+c-[1a73e8]+d-[inline-block]+py-[4px]+px-[10px]+rounded-[4px]+mb-[12px]+font-size-[14px]+font-weight-[500]]">
            Ecology
        </div>

        <h3 class="font-weight-[600] c-[333] mb-[12px]">Sustainable solutions</h3>
        <p class="c-[555] line-h-[1d6]">
            Innovative approaches for a greener and more responsible future.
        </p>

        <a class="card-link---[c-[4361ee]+text-dec-[none]+font-weight-[500]+mt-[16px]+d-[inline-flex]+items-[center]+transition-[color_0.3s]] card-link9---[c-[264bd1]]:hover">
            Discover our initiatives
            <span class="ml-[6px]">→</span>
        </a>
    </div>
</div>

<div class="card---[bg-[white]+rounded-[12px]+shadow-[0_4px_12px_rgba(0,0,0,0.08)]+overflow-[hidden]+d-[flex]+flex-direction-[column]]">
    <div class="card-content---[p-[24px]+flex-[1]]">
        <h3 class="font-weight-[600] c-[333] mb-[12px]">Inverted design</h3>
        <p class="c-[555] line-h-[1d6]">
            Content at the top, image at the bottom to vary the layouts.
        </p>
    </div>

    <div class="card-image---[mt-[auto]+h-[180px]+overflow-[hidden]+pos-[relative]]">
        <div class="image-overlay---[pos-[absolute]+top-[0]+left-[0]+w-[100%]+h-[100%]+bg-linear-[90deg,0B63F3_0%,8b5cf6_100%]+opacity-[0.3]+z-[1]]"></div>
        <img src="https://placehold.co/600x400"
        class="w-[100%] h-[100%] object-[cover]"
        alt="Image en bas">
    </div>
</div>

<div class="cards-grid---[d-[grid]+grid-cols-[repeat(1,1fr)]+gap-[24px]] sm--cards-grid---[grid-cols-[repeat(2,1fr)]] lg--cards-grid---[grid-cols-[repeat(3,1fr)]]">
    <!-- Card 1 -->
    <div class="card---[bg-[white]+rounded-[12px]+shadow-[0_4px_12px_rgba(0,0,0,0.08)]+p-[24px]]">
        <h3 class="font-weight-[600] mb-[12px]">Card 1</h3>
        <p class="c-[666]">Contents of the first card.</p>
    </div>

    <!-- Card 2 -->
    <div class="card">
        <h3 class="font-weight-[600] mb-[12px]">Card 2</h3>
        <p class="c-[666]">Contents of the second card.</p>
    </div>

    <!-- Card 3 -->
    <div class="card">
        <h3 class="font-weight-[600] mb-[12px]">Card 3</h3>
        <p class="c-[666]">Contents of the third card.</p>
    </div>
</div>

<div class="pricing-card---[bg-[white]+rounded-[12px]+shadow-[0_4px_20px_rgba(0,0,0,0.08)]+p-[32px]+text-align-[center]]">
    <h3 class="plan-name---[font-weight-[700]+c-[333]+font-size-[24px]+mb-[8px]]">
        Pro
    </h3>

    <div class="price---[mb-[24px]]">
        <span class="amount---[font-size-[48px]+font-weight-[700]+c-[0B63F3]]">49€</span>
        <span class="period---[c-[777]+font-size-[16px]]">/month</span>
    </div>

    <ul class="features---[text-align-[left]+mb-[24px]+pl-[0]]">
        <li class="feature---[d-[flex]+items-[center]+mb-[12px]+c-[555]]">
            <span class="c-[4caf50] mr-[8px]">✓</span>
            10 projects
        </li>
        <li class="feature---[d-[flex]+items-[center]+mb-[12px]+c-[555]]">
            <span class="c-[4caf50] mr-[8px]">✓</span>
            Priority Support
        </li>
        <li class="feature---[d-[flex]+items-[center]+c-[555]]">
            <span class="c-[4caf50] mr-[8px]">✓</span>
            Advanced analytics
        </li>
    </ul>

    <button class="btn---[bg-[0B63F3]+c-[white]+py-[12px]+px-[32px]+rounded-[6px]+border-[none]+cursor-[pointer]+w-[100%]+font-weight-[600]+transition-[background-color_0.3s]] btn---[bg-[2563eb]]:hover]">
        Choose this plan
    </button>
</div>

<div class="profile-card---[bg-[white]+rounded-[12px]+shadow-[0_4px_12px_rgba(0,0,0,0.08)]+p-[24px]+text-align-[center]]">
    <div class="avatar---[w-[80px]+h-[80px]+rounded-[50%]+overflow-[hidden]+mx-[auto]+mb-[16px]]">
        <img src="https://placehold.co/200x200"
        class="w-[100%] h-[100%] object-[cover]"
        alt="Avatar">
    </div>

    <h3 class="name---[font-weight-[600]+c-[333]+mb-[4px]]">Marie Dupont</h3>
    <p class="role---[c-[777]+font-size-[14px]+mb-[16px]]">UI/UX designer</p>

    <div class="stats---[d-[flex]+justify-[space-around]+mb-[20px]+pt-[20px]+border-t-[1px_solid_f0f0f0]]">
        <div class="stat---[text-align-[center]]">
            <div class="stat-value---[font-weight-[700]+c-[333]+font-size-[20px]]">248</div>
            <div class="stat-label---[c-[777]+font-size-[12px]]">Projects</div>
        </div>
        <div class="stat---[text-align-[center]]">
            <div class="stat-value---[font-weight-[700]+c-[333]+font-size-[20px]]">1.2k</div>
            <div class="stat-label---[c-[777]+font-size-[12px]]">Followers</div>
        </div>
    </div>

    <button class="btn---[bg-[0B63F3]+c-[white]+py-[10px]+px-[24px]+rounded-[6px]+border-[none]+cursor-[pointer]+w-[100%]]">
        Follow
    </button>
</div>