Card Carte
Introduction
Un conteneur de mise en page très polyvalent conçu pour regrouper des informations, actions, médias et métadonnées associés dans un seul module visuellement structuré. Il comprend des zones désignées pour les en-têtes, titres, descriptions, texte du corps, avatars, images de couverture, actions et pieds de page.
Le composant Card est entièrement intégré en tant que bloc card dans le Page Builder, permettant aux auteurs de contenu et aux développeurs de configurer les structures de mise en page, les variations de surface et le format responsive directement dans le CMS.
Utilisation
Ces exemples illustrent comment les éditeurs de contenu lient et structurent les composants de carte.
1. Carte de vue d'ensemble de projet surélevée
Une carte de profil surélevée classique, complète avec titre, description, texte du corps et un bouton d'action principal rendu dans l'emplacement du pied de page.
{
"type": "card",
"title": "Project Launchpad",
"description": "Accelerate your workflow development",
"body": "Create, configure, and scale multi-platform applications seamlessly. Our cloud-native environment is optimized for high performance, serverless routing, and automatic localized static site generation.",
"variant": "elevated",
"boxShadow": "lg",
"children": [
{
"type": "button",
"text": "View Project",
"variant": "solid"
}
]
}
Project Launchpad
2. Carte de couverture médiatique riche avec image supérieure
Rend une carte en contour présentant une grande image de couverture visuelle alignée en haut du corps de contenu. Parfait pour les articles de blog, les grilles d'actualités ou les mises en avant de produits.
{
"type": "card",
"image": "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=600&auto=format&fit=crop",
"imagePosition": "top",
"title": "Design Systems in Production",
"body": "Explore optimal architectural patterns for managing multi-variant design tokens, static compilation, and robust hydration frameworks in large engineering organizations.",
"variant": "outline"
}
Design Systems in Production
Propriétés
| Propriété | Type de champ CMS | Défaut | Description / Options prises en charge |
|---|---|---|---|
Titre de carte (title) | string | - | En-tête principal affiché dans la zone d'en-tête de la carte. |
Description de carte (description) | string | - | Sous-titre de prise en charge secondaire positionné sous le titre. |
Texte du corps (body) | string | - | Contenu principal du bloc de texte rendu dans le corps de la carte. |
Image de couverture (image) | image | - | URL ou chemin multimédia pour le graphique ou la photo accompagnant. |
Position de l'image (imagePosition) | select | "top" | Alignement de mise en page du graphique de couverture. • Options : "top", "bottom", "left", "right". |
Variante visuelle (variant) | select | "elevated" | Style de bordure et d'ombre. • Options : "elevated", "outline", "subtle". |
Profondeur d'ombre (boxShadow) | select | "sm" | Ombre de thème appliquée autour du contour extérieur de la bordure. • Options : "none", "2xs", "xs", "sm", "md", "lg", "xl", "2xl". |
Limites de débordement (overflow) | select | "hidden" | Politique de débordement. Définissez sur "visible" lorsque la carte imbrique des éléments superposés non portail (Dropdowns, Popovers, DatePickers) pour éviter la découpe de mise en page. |
Notes pour les développeurs et accessibilité
- Îlot d'hydratation : Par défaut, les cartes se compilent en éléments statiques légers et purement présentationnels. Cependant, si elles contiennent des blocs enfants interactifs actifs ou des déclencheurs d'état explicites, elles s'hydratent côté client comme un îlot conditionnel de Niveau 2.
- Conformité WAI-ARIA : Les cartes sont structurées pour imposer des ordres de lecture de contenu logiques. Utilisez des en-têtes sémantiques (
h2-h4) pour les emplacements de titre. Assurez-vous que tout graphique de couverture décoratif est fourni avec des balises alt vides appropriées afin que les lecteurs d'écran les ignorent avec grâce.