Components

<article data-component="card">
  <figure>
    <img src="https://picsum.photos/seed/card/600/300" alt="">
  </figure>
  <div>
    <header>
      <span data-badge="Info">Info</span>
      <time datetime="2026-06-17">17 juin 2026</time>
    </header>
    <h3>Titre de la carte</h3>
    <p>Une courte description du contenu de cette carte, autonome et compréhensible hors contexte.</p>
    <footer>
      <a href="#">Lire la suite →</a>
    </footer>
  </div>
</article>

<search aria-label="Recherche site">
  <form action="#">
    <label for="search-input" class="visually-hidden">Rechercher</label>
    <input type="search" id="search-input" name="q" placeholder="Rechercher…">
    <button type="submit" aria-label="Rechercher">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
        <circle cx="11" cy="11" r="8"/>
        <path d="M21 21l-4.35-4.35"/>
      </svg>
    </button>
  </form>
</search>

<search aria-label="Filtrer la liste">
  <label for="search-filter">
    Filtrer les résultats
    <input type="search" id="search-filter" name="filter" placeholder="Ex. : accessibilité, tokens…">
  </label>
</search>

<form>
  <label for="login-email">
    Adresse e-mail
    <input type="email" id="login-email" name="email" autocomplete="email" placeholder="vous@exemple.fr" required>
  </label>

  <label for="login-password">
    Mot de passe
    <input type="password" id="login-password" name="password" autocomplete="current-password" placeholder="••••••••" required>
  </label>

  <div data-layout="cluster">
    <button type="submit">Se connecter</button>
    <a href="#">Mot de passe oublié ?</a>
  </div>
</form>

<footer>
  <nav aria-label="Liens secondaires">
    <a href="#">Documentation</a>
    <a href="#">GitHub</a>
    <a href="#">Contact</a>
  </nav>
  <small>© 2026 Peels. Tous droits réservés.</small>
</footer>

<figure data-component="picto">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
    <circle cx="12" cy="12" r="10"/>
    <path d="M12 6v6l4 2"/>
  </svg>
  <figcaption>
    <strong>Performance</strong>
    <span>Chargement optimisé et minimal.</span>
  </figcaption>
</figure>

<figure data-component="picto" data-layout="center">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
  </svg>
  <figcaption>
    <strong>Sécurité</strong>
    <span>Standards web modernes et robustes.</span>
  </figcaption>
</figure>

<article data-component="card" data-variant="feature">
  <img src="https://picsum.photos/seed/feature/800/400" alt="">
  <div>
    <span data-badge="Nouveau">Nouveau</span>
    <h3>Explorer le monde</h3>
    <p>Découvrez de nouvelles perspectives avec notre outil de visualisation.</p>
    <a href="#">En savoir plus →</a>
  </div>
</article>

<div data-component="spotlight">
  <p><strong>Spotlight</strong> — une mise en valeur visuelle pour attirer l'attention sur un message clé.</p>
</div>

<details>
  <summary>Qu’est-ce que Peels ?</summary>
  <p>Peels est un outil CSS classless léger, documenté et construit avec des standards web modernes.</p>
</details>

<details open>
  <summary>Ouvert par défaut</summary>
  <p>Cet élément est ouvert au chargement grâce à l’attribut <code>open</code>.</p>
</details>

<details>
  <summary>Dernière entrée</summary>
  <p>Chaque <code>details</code> fonctionne indépendamment.</p>
</details>

<div data-component="accordion">
  <details name="accordion-demo">
    <summary>Premier panneau</summary>
    <p>Le comportement exclusif est assuré par l’attribut <code>name</code> identique sur chaque <code>details</code>. Un seul panneau peut être ouvert à la fois.</p>
  </details>

  <details name="accordion-demo">
    <summary>Deuxième panneau</summary>
    <p>Ouvrir ce panneau referme automatiquement le premier, grâce au natif <code>details[name]</code>.</p>
  </details>

  <details name="accordion-demo">
    <summary>Troisième panneau</summary>
    <p>Pas de JavaScript requis. Le navigateur gère l’exclusivité via le groupement par <code>name</code>.</p>
  </details>
</div>