Brikl
Brikl

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éTypeDéfautDescription
titlestring-Titre principal
descriptionstring-Description sous le titre
featuresFeature[]-Liste des fonctionnalités
layout'grid' | 'list' | 'columns''grid'Disposition des éléments
columnsnumber3Nombre de colonnes (pour layout columns)
classNamestring-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