Cartes

Mettez en avant des points essentiels ou des liens avec des mises en page personnalisables et des icônes

Utilisez des cartes pour créer des conteneurs visuels pour du contenu. Les cartes sont des conteneurs flexibles pouvant inclure du texte, des icônes, des images et des liens.

​

Carte simple

Titre de la carte

Voici comment utiliser une carte avec une icône et un lien. Cliquer sur cette carte vous conduit à la page Columns.

Card example

<Card title="Titre de la carte" icon="text" href="/components/columns">
  Voici comment utiliser une carte avec une icône et un lien. En cliquant sur cette carte,
  vous accédez à la page Columns.
</Card>

​

Variantes de cartes

Les cartes proposent plusieurs options de mise en page et de style pour répondre à différents besoins en contenu.

​

Mise en page horizontale

Ajoutez la propriété horizontal pour afficher les cartes dans une mise en page horizontale plus compacte.

Carte horizontale

Voici un exemple de carte horizontale.

Horizontal card example

<Card title="Carte horizontale" icon="text" horizontal>
  Ceci est un exemple de carte horizontale.
</Card>

​

Cartes avec image

Ajoutez la propriété img pour afficher une image en haut de la carte.

Carte avec image

Voici un exemple de carte avec une image.

Image card example

<Card title="Carte avec image" img="/images/card-with-image.png">
  Ceci est un exemple de carte avec une image.
</Card>

​

Cartes de lien avec appels à l’action personnalisés

Vous pouvez personnaliser le texte de l’appel à l’action et contrôler l’affichage d’une flèche. Par défaut, les flèches ne s’affichent que pour les liens externes.

Link card

Voici un exemple de carte avec une icône et un lien. Cliquer sur cette carte vous redirige vers la page Columns.

Click here

Link card example

<Card
  title="Carte de lien"
  icon="link"
  href="/components/columns"
  arrow="true"
  cta="Cliquez ici"
>
  Ceci est un exemple de carte avec une icône et un lien. Cliquer sur cette carte vous amène à la page Colonnes.
</Card>

​

Regrouper des cartes

Utilisez le composant Columns pour organiser plusieurs cartes côte à côte.

Première carte

C’est la première carte.

Deuxième carte

C’est la deuxième carte.

Columns example

<Columns cols={2}>
  <Card title="Première carte" icon="panel-left-close">
    Ceci est la première carte.
  </Card>
  <Card title="Deuxième carte" icon="panel-right-close">
    Ceci est la deuxième carte.
  </Card>
</Columns>

​

Propriétés

title · string · requis

Le titre affiché sur la carte

icon · string

L’icône à afficher.

Options :

• nom de l’icône Font Awesome
• nom de l’icône Lucide
• code SVG (compatible JSX) entouré d’accolades
• URL vers une icône hébergée en externe
• chemin vers un fichier d’icône dans votre projet

Pour des icônes SVG personnalisées :

1. Convertissez votre SVG à l’aide du convertisseur SVGR.
2. Collez votre code SVG dans le champ de saisie SVG.
3. Copiez l’élément complet <svg>...</svg> depuis le champ de sortie JSX.
4. Entourez le code SVG compatible JSX avec des accolades : icon={<svg ...> ... </svg>}.
5. Ajustez height et width si nécessaire.

iconType · string

Le style d’icône Font Awesome. Utilisé uniquement avec les icônes Font Awesome.

Options : regular, solid, light, thin, sharp-solid, duotone, brands.

color · string

Couleur de l’icône sous forme de code hexadécimal (par exemple « #FF6B6B »).

href · string

URL vers laquelle accéder lorsque l’on clique sur la carte.

horizontal · boolean

Afficher la carte dans une mise en page horizontale compacte.

img · string

URL ou chemin local d’une image affichée en haut de la carte.

cta · string

Texte personnalisé pour le bouton d’appel à l’action.

arrow · boolean

Afficher ou masquer l’icône de flèche du lien.