Person card (Carte de personne)

Une Carte personne est un ensemble de composants (photo, nom…) permettant d’identifier succinctement une personne. Elle est généralement utilisée en groupe afin de présenter une équipe et peut permettre l’accès à une fiche personnelle plus complète.

Usage

Le composant Carte personne peut être utilisé pour une personne seule ou dans un groupe :

  • équipe sportive (joueurs de rugby, skippers…),
  • pôle de journalistes,
  • organigramme
  • …

Caractéristiques

Cette carte est composées de différents éléments obligatoires ou optionnels :

  • une photo,
  • un nom,
  • une description (facultatif),
  • un visuel (drapeau, écusson, logo ; facultatif),
  • un bouton d’accès à la fiche complète (facultatif).

Bonnes pratiques

  • La photo doit être judicieusement choisie pour que la personne soit reconnaissable (netteté, taille en pixels supérieure à la taille affichée, arrière-plan ne brouillant pas la compréhension de l’image, centrage du personnage sur la photo…).
  • Si possible, en cas de groupe de cartes, pour une meilleure homogénéité, privilégiez des photos prises dans le même contexte (même fond, même cadrage…)
  • Privilégiez des photos carrées, il y aura ainsi moins de risque de mauvais centrage des photos
  • Des filtres peuvent être appliqués sur la photo (passage en noir & blanc, changement de teinte…), mais cela sera porté par vos propres CSS.
  • Si une carte est cliquable pour accéder à une autre page, elle doit comporter un bouton pour indiquer cette possibilité. Malgré tout, l’entièreté de la carte sera cliquable.

Style & code

Dépendances :

Version simple

La version simple est la version sans les éléments optionnels, elle ne contient donc que la photo et le nom. Ce composant est constitué d’un <div> portant la classe su-person-card, d’une image dans une balise <figure> et du nom dans un élément textuel portant la classe su-name. Cet élément peut être, au choix, un <p>, un <h2> ou un <h3>.

<div class="su-person-card">
    <figure>
        <img alt="Photo officielle de Merlin l’Enchanteur" src="https://media.ouest-france.fr/v1/pictures/MjAyMDAyMGJmNTRjODNiYTJmMzY3NDk1MWZjNzZmOWY4Njk0NGU?width=1260&height=708&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=94b1b67dc0a4c3fe10a1d86f37f0466217f68417cf60db3ee01275aa21cb0fab">
    </figure>
    <p class="su-name">Merzhin</p>
</div>

Version complète

Dans la version complète, on ajoute un drapeau ou une image libre, une description et un lien vers une autre page. Pour la description, ajoutez simplement un <p class="su-description"> ou un <div class="su-description"> si elle doit pouvoir contenir plusieurs paragraphes. Pour le lien, il est à mettre à l’intérieur de l’élément portant le nom afin de lui donner une valeur SEO, mais il faut aussi ajouter un bouton sous la description pour inciter au clic.

N. B. – la carte prenant par défaut toute la largeur de son conteneur, la zone cliquable peut donc être large si ce conteneur est large…

<div class="su-person-card">
    <figure>
        <img alt="Photo officielle de Merlin l’Enchanteur" src="https://media.ouest-france.fr/v1/pictures/MjAyMDAyMGJmNTRjODNiYTJmMzY3NDk1MWZjNzZmOWY4Njk0NGU?width=1260&height=708&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=94b1b67dc0a4c3fe10a1d86f37f0466217f68417cf60db3ee01275aa21cb0fab">
    </figure>
    <p class="su-name"><a href="javascript:;">Merzhin</a></p>
    <p class="su-description">Enchanteur de Bretagne</p>
    <span class="su-button su-secondary su-small" href="javascript:;">Voir la fiche</span>
</div>

Version avec une icône de groupe

Il peut être nécessaire d’associer une identité de groupe (équipe, pays…) à une personne. Pour cela on peut ajouter une petite icône, un drapeau pour la nationalité, un écusson pour une équipe…

Avec un drapeau

Pour afficher le drapeau, il suffit d’utiliser le composant Flags (drapeaux) en ajoutant le <span class="su-flag… après la description (en fait, la position dans le DOM n’a aucune incidence sur l’apparence, mais est logique pour le flux d’informations et est donc important pour l’accessibilité).

<div class="su-person-card">
    <figure>
        <img alt="Photo officielle de Merlin l’Enchanteur" src="https://media.ouest-france.fr/v1/pictures/MjAyMDAyMGJmNTRjODNiYTJmMzY3NDk1MWZjNzZmOWY4Njk0NGU?width=1260&height=708&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=94b1b67dc0a4c3fe10a1d86f37f0466217f68417cf60db3ee01275aa21cb0fab">
    </figure>
    <p class="su-name"><a href="javascript:;">Merzhin</a></p>
    <p class="su-description">Enchanteur de Bretagne</p>
    <span class="su-flag-cym">France</span>
    <span class="su-button su-secondary su-small" href="javascript:;">Voir la fiche</span>
</div>

Avec une autre image

Si l’identification de groupe ne se fait pas sur la nationalité, vous pouvez utiliser vos propres images à la place du drapeau avec une balise <img> portant la classe su-unit.

<div class="su-person-card">
    <figure>
        <img alt="Photo officielle de Merlin l’Enchanteur" src="https://media.ouest-france.fr/v1/pictures/MjAyMDAyMGJmNTRjODNiYTJmMzY3NDk1MWZjNzZmOWY4Njk0NGU?width=1260&height=708&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=94b1b67dc0a4c3fe10a1d86f37f0466217f68417cf60db3ee01275aa21cb0fab">
    </figure>
    <p class="su-name"><a href="javascript:;">Merzhin</a></p>
    <p class="su-description">Enchanteur de Bretagne</p>
    <img class="su-unit" src="https://media.ouest-france.fr/v1/pictures/bdc/MjAyMjAxNzliMTAxY2I5MzBjYzExMDI3YjU5M2YyNWMzYjYyYWQ?width=75&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=4985345d779a653e1e353e4882ba9abe279fa1add0bcc1abade60472e95e04ed" alt="Stade Rennais">
    <span class="su-button su-secondary su-small" href="javascript:;">Voir la fiche</span>
</div>

Version sur fond sombre

La carte personne s’adapte à un fond sombre en ajoutant la classe su-negative sur un parent ou sur la carte elle-même.

<div class="su-negative" style="background: DimGray; padding: 10px">
    <div class="su-person-card"">
        <figure>
            <img alt="Photo officielle de Merlin l’Enchanteur" src="https://media.ouest-france.fr/v1/pictures/MjAyMDAyMGJmNTRjODNiYTJmMzY3NDk1MWZjNzZmOWY4Njk0NGU?width=1260&height=708&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=94b1b67dc0a4c3fe10a1d86f37f0466217f68417cf60db3ee01275aa21cb0fab">
        </figure>
        <p class="su-name"><a href="javascript:;">Merzhin</a></p>
        <p class="su-description">Enchanteur de Bretagne</p>
        <img class="su-unit" src="https://media.ouest-france.fr/v1/pictures/bdc/MjAyMjAxNzliMTAxY2I5MzBjYzExMDI3YjU5M2YyNWMzYjYyYWQ?width=75&focuspoint=50%2C25&cropresize=1&client_id=bpeditorial&sign=4985345d779a653e1e353e4882ba9abe279fa1add0bcc1abade60472e95e04ed" alt="Stade Rennais">
        <span class="su-button su-secondary su-small" href="javascript:;">Voir la fiche</span>
    </div>
</div>

Liste des classes disponibles

  • su-person-card
  • su-name
  • su-unit

Classes annexes

Le code a bien été copié !