Cartes — Lumy UI

Carte simple

Cohérent

Un seul vocabulaire visuel pour tous les produits Lumy.

<article class="lumy-card">
    <div class="lumy-card__body">
        <h3 class="lumy-card__title">Cohérent</h3>
        <p class="lumy-card__description">
            Un seul vocabulaire visuel pour tous les produits Lumy.
        </p>
    </div>
</article>

HTML

Carte interactive avec image

Ajoute .lumy-card--interactive pour un effet de survol (légère élévation).

Nouveau

Découvrir le Japon

Informations géographiques, culturelles et historiques.

<article class="lumy-card lumy-card--interactive">
    <img class="lumy-card__media" src="japon.jpg" alt="Paysage">

    <div class="lumy-card__body">
        <span class="lumy-badge lumy-badge--beta">Nouveau</span>
        <h3 class="lumy-card__title">Découvrir le Japon</h3>
        <p class="lumy-card__description">
            Informations géographiques, culturelles et historiques.
        </p>
    </div>
</article>

HTML

Carte Aura

Variante .lumy-card--aura utilisée pour les blocs de synthèse générés par l'IA.

Aura Engine Synthèse globale

Voici une synthèse générée automatiquement par Aura à propos du pays recherché.

<section class="lumy-card lumy-card--aura">
    <div class="lumy-card__body">
        <div class="lumy-cluster">
            <span class="lumy-badge lumy-badge--beta">
                Aura Engine
            </span>

            <strong class="lumy-aura-text">
                Synthèse globale
            </strong>
        </div>

        <p class="lumy-card__description">
            Voici une synthèse générée automatiquement par Aura.
        </p>
    </div>
</section>

HTML

Grille de cartes

Utilise .lumy-grid avec .lumy-grid--2, --3 ou --4 selon le nombre de colonnes souhaité.

Carte 1

Carte 2

Carte 3

<div class="lumy-grid lumy-grid--3">
    <article class="lumy-card">…</article>
    <article class="lumy-card">…</article>
    <article class="lumy-card">…</article>
</div>

HTML