Carte - Card

La carte est un conteneur d’information qui redirige l’utilisateur vers une page de contenu. Elle regroupe un titre (lien), une description optionnelle, et peut accueillir une image, des détails, des badges ou une zone d’action.

Par défaut, l’ensemble de la carte est cliquable grâce à fr-enlarge-link.

Carte de base

Carte verticale avec image, titre et description

Code

= dsfr_card(title: "Orgue de Fontainebleau",
            url: "#",
            image_src: "/assets/images/orgue.jpg",
            description: "Magistral instrument de musique classé monument historique",
            html_attributes: {style: "max-width: 25rem;"})

Résultat

Orgue de Fontainebleau

Magistral instrument de musique classé monument historique 

<div class="fr-card fr-enlarge-link" style="max-width: 25rem;">
  <div class="fr-card__body">
    <div class="fr-card__content">
      <h3 class="fr-card__title">
        <a class="fr-card__link" href="#">
          Orgue de Fontainebleau
        </a>
      </h3>
      <p class="fr-card__desc">
        Magistral instrument de musique classé monument historique
      </p>
    </div>
  </div>
  <div class="fr-card__header">
    <div class="fr-card__img">
      <img class="fr-responsive-img" src="/assets/images/orgue.jpg" alt="">
    </div>
  </div>
</div>

Carte sans image

Carte sans image

Code

= dsfr_card(title: "Orgue de Fontainebleau",
            url: "#",
            description: "Magistral instrument de musique classé monument historique",
            html_attributes: {style: "max-width: 25rem;"})

Résultat

Orgue de Fontainebleau

Magistral instrument de musique classé monument historique 

<div class="fr-card fr-enlarge-link" style="max-width: 25rem;">
  <div class="fr-card__body">
    <div class="fr-card__content">
      <h3 class="fr-card__title">
        <a class="fr-card__link" href="#">
          Orgue de Fontainebleau
        </a>
      </h3>
      <p class="fr-card__desc">
        Magistral instrument de musique classé monument historique
      </p>
    </div>
  </div>
</div>

Détail en début de contenu

start_detail affiche un texte dans la zone fr-card__start, sous la description. start_detail_icon ajoute une icône optionnelle.

Code

= dsfr_card(title: "Orgue de Fontainebleau",
            url: "#",
            description: "Magistral instrument de musique classé monument historique",
            start_detail: "Musique",
            start_detail_icon: "music-2-line",
            html_attributes: {style: "max-width: 25rem;"})

Résultat

Orgue de Fontainebleau

Magistral instrument de musique classé monument historique

Musique 

<div class="fr-card fr-enlarge-link" style="max-width: 25rem;">
  <div class="fr-card__body">
    <div class="fr-card__content">
      <h3 class="fr-card__title">
        <a class="fr-card__link" href="#">
          Orgue de Fontainebleau
        </a>
      </h3>
      <p class="fr-card__desc">
        Magistral instrument de musique classé monument historique
      </p>
      <div class="fr-card__start">
        <p class="fr-card__detail fr-icon-music-2-line">
          Musique
        </p>
      </div>
    </div>
  </div>
</div>

Détail en fin de contenu

end_detail affiche un texte dans la zone fr-card__end, juste avant la zone d’action. end_detail_icon ajoute une icône optionnelle.

Code

= dsfr_card(title: "Orgue de Fontainebleau",
            url: "#",
            description: "Magistral instrument de musique classé monument historique",
            end_detail: "12 janvier 2024",
            end_detail_icon: "calendar-line",
            html_attributes: {style: "max-width: 25rem;"})

Résultat

Orgue de Fontainebleau

Magistral instrument de musique classé monument historique

12 janvier 2024 

<div class="fr-card fr-enlarge-link" style="max-width: 25rem;">
  <div class="fr-card__body">
    <div class="fr-card__content">
      <h3 class="fr-card__title">
        <a class="fr-card__link" href="#">
          Orgue de Fontainebleau
        </a>
      </h3>
      <p class="fr-card__desc">
        Magistral instrument de musique classé monument historique
      </p>
      <div class="fr-card__end">
        <p class="fr-card__detail fr-icon-calendar-line">
          12 janvier 2024
        </p>
      </div>
    </div>
  </div>
</div>

Détails en début et en fin

Les deux zones peuvent coexister sur la même carte.

Code

= dsfr_card(title: "Orgue de Fontainebleau",
            url: "#",
            description: "Magistral instrument de musique classé monument historique",
            start_detail: "Musique",
            start_detail_icon: "music-2-line",
            end_detail: "12 janvier 2024",
            end_detail_icon: "calendar-line",
            html_attributes: {style: "max-width: 25rem;"})

Résultat

Orgue de Fontainebleau

Magistral instrument de musique classé monument historique

Musique

12 janvier 2024 

<div class="fr-card fr-enlarge-link" style="max-width: 25rem;">
  <div class="fr-card__body">
    <div class="fr-card__content">
      <h3 class="fr-card__title">
        <a class="fr-card__link" href="#">
          Orgue de Fontainebleau
        </a>
      </h3>
      <p class="fr-card__desc">
        Magistral instrument de musique classé monument historique
      </p>
      <div class="fr-card__start">
        <p class="fr-card__detail fr-icon-music-2-line">
          Musique
        </p>
      </div>
      <div class="fr-card__end">
        <p class="fr-card__detail fr-icon-calendar-line">
          12 janvier 2024
        </p>
      </div>
    </div>
  </div>
</div>

Carte horizontale

horizontal: true bascule la carte en mode paysage. Les variantes :half et :tier ajustent la répartition image/contenu.

Code

= dsfr_card(title: "Orgue de Fontainebleau",
            url: "#",
            image_src: "/assets/images/orgue.jpg",
            description: "Magistral instrument de musique classé monument historique",
            horizontal: true)

Résultat

Orgue de Fontainebleau

Magistral instrument de musique classé monument historique 

<div class="fr-card fr-enlarge-link fr-card--horizontal">
  <div class="fr-card__body">
    <div class="fr-card__content">
      <h3 class="fr-card__title">
        <a class="fr-card__link" href="#">
          Orgue de Fontainebleau
        </a>
      </h3>
      <p class="fr-card__desc">
        Magistral instrument de musique classé monument historique
      </p>
    </div>
  </div>
  <div class="fr-card__header">
    <div class="fr-card__img">
      <img class="fr-responsive-img" src="/assets/images/orgue.jpg" alt="">
    </div>
  </div>
</div>

Taille petite

Le paramètre size accepte :sm ou :lg.

Code

= dsfr_card(title: "Petite carte",
            url: "#",
            description: "Version compacte du composant",
            size: :sm,
            html_attributes: {style: "max-width: 25rem;"})

Résultat

Petite carte

Version compacte du composant 

<div class="fr-card fr-enlarge-link fr-card--sm" style="max-width: 25rem;">
  <div class="fr-card__body">
    <div class="fr-card__content">
      <h3 class="fr-card__title">
        <a class="fr-card__link" href="#">
          Petite carte
        </a>
      </h3>
      <p class="fr-card__desc">
        Version compacte du composant
      </p>
    </div>
  </div>
</div>

Carte avec zone d’action

Le slot footer permet d’ajouter des boutons ou liens d’action. Dans ce cas, désactivez enlarge_link pour éviter les zones cliquables imbriquées.

Code

= dsfr_card(title: "Orgue de Fontainebleau",
            url: "#",
            description: "Magistral instrument de musique classé monument historique",
            enlarge_link: false,
            html_attributes: {style: "max-width: 25rem;"}) do |card|
  - card.with_footer { dsfr_button(label: "En savoir plus") }

Résultat

Orgue de Fontainebleau

Magistral instrument de musique classé monument historique 

<div class="fr-card" style="max-width: 25rem;">
  <div class="fr-card__body">
    <div class="fr-card__content">
      <h3 class="fr-card__title">
        <a class="fr-card__link" href="#">
          Orgue de Fontainebleau
        </a>
      </h3>
      <p class="fr-card__desc">
        Magistral instrument de musique classé monument historique
      </p>
    </div>
    <div class="fr-card__footer">
      <button class="fr-btn">
        En savoir plus
      </button>
    </div>
  </div>
</div>

Carte avec badges

Le slot badges permet d’afficher des badges dans le header de la carte, superposés à l’image.

Code

= dsfr_card(title: "Orgue de Fontainebleau",
            url: "#",
            image_src: "/assets/images/orgue.jpg",
            description: "Magistral instrument de musique classé monument historique",
            html_attributes: {style: "max-width: 25rem;"}) do |card|
  - card.with_badge(status: :info) { "Patrimoine" }
  - card.with_badge(status: :success) { "Culture" }

Résultat

Orgue de Fontainebleau

Magistral instrument de musique classé monument historique

  • Patrimoine
  • Culture 
<div class="fr-card fr-enlarge-link" style="max-width: 25rem;">
  <div class="fr-card__body">
    <div class="fr-card__content">
      <h3 class="fr-card__title">
        <a class="fr-card__link" href="#">
          Orgue de Fontainebleau
        </a>
      </h3>
      <p class="fr-card__desc">
        Magistral instrument de musique classé monument historique
      </p>
    </div>
  </div>
  <div class="fr-card__header">
    <div class="fr-card__img">
      <img class="fr-responsive-img" src="/assets/images/orgue.jpg" alt="">
    </div>
    <ul class="fr-badges-group">
      <li>
        <div class="fr-badge fr-badge--info">
          Patrimoine
        </div>
      </li>
      <li>
        <div class="fr-badge fr-badge--success">
          Culture
        </div>
      </li>
    </ul>
  </div>
</div>

Plus d’informations