Carte

Conteneur pour actualités, services ou fiches administratives : visuel 16:9, métadonnée optionnelle, titre, texte et pied de page pour date ou actions. Combinez les modificateurs pour l’orientation, le relief et la mise en avant.

Carte par défaut

Service public

Démarches en ligne

Retrouvez les formulaires officiels et suivez l’état de vos demandes depuis votre espace citoyen.

<article class="bj-card">
  <div class="bj-card__img" role="img" aria-label="…"></div>
  <div class="bj-card__body">
    <div class="bj-card__detail">Service public</div>
    <h2 class="bj-card__title">Démarches en ligne</h2>
    <p class="bj-card__desc">…</p>
  </div>
  <div class="bj-card__footer">…</div>
</article>

Carte horizontale

bj-card--horizontal place le visuel à gauche et le contenu à droite - utile pour listes de résultats ou encarts larges.

Permis de construire

Dépôt et suivi dématérialisés : pièces obligatoires, délais légaux et contacts du service instructeur.

<article class="bj-card bj-card--horizontal">
  <div class="bj-card__img" role="img" aria-label="…"></div>
  <div class="bj-card__body">…</div>
</article>

Carte sans bordure

bj-card--flat retire bordure et fond : à utiliser sur une page déjà structurée (panneau, colonne avec fond).

Foire aux questions

Réponses aux questions les plus fréquentes sur les délais, les pièces à fournir et les recours.

<article class="bj-card bj-card--flat">
  <div class="bj-card__body">…</div>
</article>

Carte avec mise en avant

bj-card--highlight ajoute une bordure gauche colorée pour signaler une offre prioritaire ou une action recommandée.

Priorité

Guichet unique entreprise

Un seul interlocuteur pour cinq formalités de création ou de modification d’entreprise.

<article class="bj-card bj-card--highlight">
  <div class="bj-card__body">…</div>
</article>

Grille de cartes

Trois cartes sur une ligne desktop avec bj-grid-row et bj-col-4 (se réorganisent sur petits écrans).

État civil

Actes de naissance, mariage, décès.

Urbanisme

Permis, déclarations préalables, documents d’urbanisme.

Impôts & taxes

Déclarations, paiement et attestations fiscales.

<div class="bj-grid-row bj-grid-row--gutters">
  <div class="bj-col-4"><article class="bj-card">…</article></div>
  <div class="bj-col-4"><article class="bj-card">…</article></div>
  <div class="bj-col-4"><article class="bj-card">…</article></div>
</div>

Carte entièrement cliquable

Sur une balise <a>, ajoutez bj-card bj-card--link pour le survol et le curseur lien (équivalent Vue link).

Portail des démarches

Accéder au catalogue : toute la surface de la carte est un lien unique.

<a href="#" class="bj-card bj-card--link">
  <div class="bj-card__body">
    <div class="bj-card__title">Titre du lien</div>
    <p class="bj-card__desc">Toute la carte est cliquable.</p>
  </div>
</a>

Combinaisons de modificateurs

Les modificateurs bj-card--horizontal, bj-card--flat et bj-card--highlight se cumulent : testez les paires et triplets selon la maquette.

Horizontal + plat

Visuel à gauche, sans ombre ni bordure pleine.

Horizontal + mise en avant

Bandeau d’accent à gauche sur une carte horizontale.

À la une

Plat + surligné

Sans relief de carte, avec bordure gauche colorée.

Triple modificateur

Horizontal, plat et highlight combinés.

Lien + horizontal

bj-card--link avec disposition horizontale.

<!-- horizontal + flat -->
<article class="bj-card bj-card--horizontal bj-card--flat">…</article>
<!-- horizontal + highlight -->
<article class="bj-card bj-card--horizontal bj-card--highlight">…</article>
<!-- flat + highlight -->
<article class="bj-card bj-card--flat bj-card--highlight">…</article>
<!-- horizontal + flat + highlight -->
<article class="bj-card bj-card--horizontal bj-card--flat bj-card--highlight">…</article>
<!-- lien + horizontal -->
<a href="#" class="bj-card bj-card--link bj-card--horizontal">…</a>

Classes CSS

Classe	Description
`bj-card`	Carte verticale avec bordure et fond surélevé.
`bj-card__img`	Zone visuelle pleine largeur, ratio 16:9 (image ou fond).
`bj-card__body`	Zone principale (détail, titre, description).
`bj-card__detail`	Ligne de métadonnée en capitales.
`bj-card__title`	Titre de la carte.
`bj-card__desc`	Texte descriptif.
`bj-card__footer`	Barre sous le corps (date, liens, actions).
`bj-card__start / bj-card__end`	Alignement horizontal dans le footer.
`bj-card--horizontal`	Disposition visuel + contenu côte à côte.
`bj-card--flat`	Sans bordure ni ombre, fond transparent.
`bj-card--highlight`	Bordure gauche d’accent (couleur d’action).
`bj-card--link`	Sur un lien (balise a), carte interactive avec ombre au survol.
`bj-cards`	Grille auto-fill de cartes (alternative à la grille 12 colonnes).