GuillocheDocs GitHub v2.0.0

Card

Surface de contenu avec en-tete et pied optionnels

Voir la source

primitives v1.1.0 ui:Card

ATELIER INTERACTIF

Essayez Card

Modifiez les propriétés. L’aperçu et le code sont rendus par Symfony et utilisent les mêmes props Twig.

6 composants configurables

Propriétés

Sans JavaScript, ce formulaire fonctionne aussi par rechargement de la page.

APERÇU SERVEUR / TWIG RÉEL

Suivi de mission

Résumé des travaux en cours

Contenu de démonstration

Mis à jour aujourd’hui
Code Twig utilisable
<twig:ui:Card title="Suivi de mission" description="Résumé des travaux en cours" footer="Mis à jour aujourd’hui">
  <p>Contenu de démonstration</p>
</twig:ui:Card>

Exemples

Carte complète

Facture F-2026-010

Accompagnement d'octobre

Montant : 480,00 €

Échéance 30 novembre
<twig:ui:Card title="Facture F-2026-010" description="Accompagnement d'octobre" footer="Échéance 30 novembre">
  <p>Montant : 480,00 €</p>
</twig:ui:Card>

Carte avec action

Rémunération du dirigeant

Prochaine étape : valider la synthese

<twig:ui:Card title="Rémunération du dirigeant" description="Prochaine étape">
  <twig:ui:Progress :value="75" label="Avancement" showValue />
</twig:ui:Card>

Props

PropDéfautRôle
titlenullTitre de la carte
descriptionnullTexte secondaire sous le titre
footernullPied de carte

Accessibilité

Les comportements clavier et les contraintes d’accessibilité propres à cette recette ne sont pas encore documentés. Vérifiez son HTML et ses interactions avant utilisation dans un parcours critique.

README complet et exemples de la recette