Features
Blocs de présentation de fonctionnalités
Blocs de fonctionnalités
Les blocs Features permettent de présenter vos fonctionnalités principales de manière attractive et organisée.
Utilisation basique
<Features
title="Nos fonctionnalités principales"
description="Découvrez ce qui rend notre plateforme unique"
features={[
{
icon: <IconRocket />,
title: "Performance",
description: "Applications ultra-rapides et optimisées pour tous les appareils."
},
{
icon: <IconShield />,
title: "Sécurité",
description: "Protection des données de niveau entreprise avec chiffrement de bout en bout."
},
{
icon: <IconUsers />,
title: "Collaboration",
description: "Travaillez en équipe avec des outils de collaboration intégrés."
}
]}
/>Layouts disponibles
Layout en grille (par défaut)
<Features
layout="grid"
features={features}
/>Layout en liste
<Features
layout="list"
features={features}
/>Layout en colonnes
<Features
layout="columns"
columns={3}
features={features}
/>Avec actions
<Features
title="Fonctionnalités premium"
features={[
{
icon: <IconStar />,
title: "Analytics avancées",
description: "Tableaux de bord détaillés et rapports personnalisés.",
action: {
label: "En savoir plus",
href: "/features/analytics"
}
},
{
icon: <IconZap />,
title: "Intégrations",
description: "Connectez-vous avec vos outils préférés.",
action: {
label: "Voir les intégrations",
onClick: () => openIntegrations()
}
}
]}
/>Avec images
<Features
title="Interface utilisateur"
features={[
{
icon: <IconPalette />,
title: "Design moderne",
description: "Interface élégante et intuitive.",
image: "/images/design-preview.png"
},
{
icon: <IconMobile />,
title: "Responsive",
description: "Parfait sur tous les appareils.",
image: "/images/responsive-preview.png"
}
]}
/>Personnalisation avancée
<Features
title="Nos avantages"
description="Pourquoi choisir notre plateforme"
layout="grid"
columns={2}
className="my-custom-features"
features={[
{
icon: <IconCheck />,
title: "Facilité d'utilisation",
description: "Interface intuitive pour tous les utilisateurs.",
className: "feature-card-primary"
},
{
icon: <IconClock />,
title: "Déploiement rapide",
description: "Mettez votre application en ligne en quelques minutes.",
className: "feature-card-secondary"
}
]}
/>Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
title | string | - | Titre principal |
description | string | - | Description sous le titre |
features | Feature[] | - | Liste des fonctionnalités |
layout | 'grid' | 'list' | 'columns' | 'grid' | Disposition des éléments |
columns | number | 3 | Nombre de colonnes (pour layout columns) |
className | string | - | Classes CSS personnalisées |
Type Feature
interface Feature {
icon: ReactNode;
title: string;
description: string;
image?: string;
action?: {
label: string;
href?: string;
onClick?: () => void;
};
className?: string;
}Accessibilité
- Structure sémantique appropriée
- Support des lecteurs d'écran
- Navigation au clavier
- Attributs ARIA pour les icônes