Feature Card

Bloc éditorial compact — icône + titre + corps — avec une affordance d'interactivité visuelle (bordure animée). Pour les sections narratives « valeur par rôle ». Compact editorial block — icon + title + body — with a visual interactivity affordance (animated border). For "value by role" narrative sections.

VariantesVariants

WCAG 2.1 AA vérifié automatiquement avant chaque commit. WCAG 2.1 AA automatically checked before every commit.

Tokens sémantiques, contrats de composants et décisions documentées. Semantic tokens, component contracts, and documented decisions.

Règles absoluesAbsolute rules

Icône fonctionnelle uniquement — jamais décorativeFunctional icon only — never decorative
heading-level ajusté selon la hiérarchie de la page — jamais de niveau sautéheading-level adjusted to the page hierarchy — never a skipped level
variant="marketing" seulement sur data-context="marketing"variant="marketing" only on data-context="marketing"
Jamais de bouton primaire à l'intérieur — ce n'est pas une zone d'actionNever a primary button inside — not an action zone
Jamais d'image raster — SVG uniquement dans le slot iconNever a raster image — SVG only in the icon slot

Tokens de composantComponent tokens

Token CSS	RéférenceReference	ValeurValue
`--agtc-semantic-color-background-overlay-dark`	`semantic.color.background.overlay-dark`	rgba(12, 15, 25, 0.78)
`--agtc-semantic-color-border-overlay-dark`	`semantic.color.border.overlay-dark`	rgba(255, 255, 255, 0.06)
`--agtc-semantic-color-action-primary`	`semantic.color.action.primary`	#007a68
`--agtc-semantic-color-brand-accent`	`semantic.color.brand.accent`	#ed6b86
`--agtc-semantic-space-component-padding-lg`	`semantic.space.component.padding-lg`	16px
`--agtc-semantic-color-action-primary`	`semantic.color.action.primary`	#007a68
`--agtc-semantic-color-text-on-dark-secondary`	`semantic.color.text.on-dark-secondary`	rgba(255,255,255,0.75)

AccessibilitéAccessibility

role="heading" + aria-level dans le shadow DOM — lu correctement par les lecteurs d'écran quel que soit le contexterole="heading" + aria-level in the shadow DOM — read correctly by screen readers regardless of context
prefers-reduced-motion: reduce — bordure pleine largeur dès le départ, sans animationprefers-reduced-motion: reduce — full-width border from the start, no animation
Le slot icon doit contenir un SVG avec aria-hidden="true" — le titre est le libellé sémantiqueThe icon slot must contain an SVG with aria-hidden="true" — the title is the semantic label
Indication de focus visible — :host(:focus-within)::afterVisible focus indication — :host(:focus-within)::after

ImplémentationImplementation

<!-- Contexte SaaS — variante par défaut -->
<agtc-feature-card heading="Accessibility" heading-level="3">
  <svg slot="icon" ...></svg>
  WCAG 2.1 AA automatically checked before every commit.
</agtc-feature-card>

<!-- Contexte marketing -->
<agtc-feature-card heading="Designers" variant="marketing" heading-level="3">
  <svg slot="icon" ...></svg>
  Semantic tokens, component contracts, and documented decisions.
</agtc-feature-card>

DOs et DON'TsDOs and DON'Ts

À faireDo

Icône qui représente l'intention du bloc, pas une décorationIcon that represents the block's intent, not decoration
1 à 2 phrases courtes dans le corps — pas de liste imbriquée1 to 2 short sentences in the body — no nested list
Un seul niveau de titre par section, ajusté avec heading-levelOne heading level per section, adjusted with heading-level

À éviterDon't

Bouton primaire à l'intérieur — ce n'est pas une zone d'actionPrimary button inside — not an action zone
variant="marketing" hors d'une page data-context="marketing"variant="marketing" outside a data-context="marketing" page
Utiliser pour de la navigation — placer un <a> à l'intérieur si cliquableUse for navigation — place an <a> inside if clickable

UX Patterns Reference

Review approved on 2026-06-25 (ADR-063).

Pattern	Source	Applied	Justification
Icon + title pairing	NN/g — Icons & Indicators	✅	Functional signal: the icon helps identify the block before reading the title
Controlled interactivity affordance	IxDF — UI Design Patterns	✅	`scaleX` animation only on hover/focus — no distracting idle animation
Non-interactive by default	Smashing Magazine — Card patterns	✅	`:host` is neither `<a>` nor `<button>` — the action goes inside if needed
Touch targets ≥ 24×24px	IxDF — Touch Targets	✅	36px icon, non-interactive — compliant with WCAG 2.5.8
Flexible heading level	NN/g — Visual Hierarchy	✅	`heading-level` attribute (default 3) — avoids skipped levels in page hierarchy
Contextual variant	Dashboard Design Patterns	✅	`default` / `marketing` — adapts emphasis without duplicating the component
`prefers-reduced-motion`	IxDF — Accessibility	✅	Border always visible (`scaleX(1)`), transition disabled
Accessible markup	IF — Data Patterns Catalogue	✅	`role="heading"` + `aria-level` in the shadow DOM — SR-agnostic of the wrapper tag