BjCard

Carte Vue composable : BjCard (modificateurs et balise racine), BjCardImg (fond et label), BjCardBody et BjCardFooter (slots).

Utilisation

<script setup>
import { BjCard, BjCardBody, BjCardFooter, BjCardImg } from '@flrxnt/dsbj/vue'
<\/script>

<template>
  <BjCard>
    <BjCardImg background="var(--bj-surface-alt)" />
    <BjCardBody>
      <p class="bj-card__detail">Actualité</p>
      <h3 class="bj-card__title">Titre</h3>
      <p class="bj-card__desc">Résumé de l’article.</p>
    </BjCardBody>
    <BjCardFooter>
      <span class="bj-card__start">12 mars 2025</span>
    </BjCardFooter>
  </BjCard>
</template>

Aperçu complet

Actualité

Titre

Résumé de l’article.

BjCardImg

Slot

<BjCardImg
  background="linear-gradient(135deg, var(--bj-action-high), var(--bj-action))"
  label="Illustration de l’article"
>
  <span class="bj-text-sm" style="color: #fff; padding: var(--bj-spacing-3v)">Slot image</span>
</BjCardImg>

BjCardBody et BjCardFooter

Corps et pied sont de simples conteneurs : slot par défaut pour titres, texte, boutons ; attributs HTML transmis via v-bind sur la racine.

horizontal

Titre

Résumé de l’article.

<BjCard horizontal>
  <BjCardImg background="var(--bj-surface-alt)" />
  <BjCardBody>
    <h3 class="bj-card__title">Titre</h3>
    <p class="bj-card__desc">Texte à droite de l’image.</p>
  </BjCardBody>
</BjCard>

flat

<BjCard flat>
  <BjCardBody>
    <h3 class="bj-card__title">Carte plate</h3>
  </BjCardBody>
</BjCard>

highlight

<BjCard highlight>
  <BjCardBody>
    <h3 class="bj-card__title">Mise en avant</h3>
  </BjCardBody>
</BjCard>

link et tag="a"

link

Carte lien

<BjCard tag="a" href="#" link>
  <BjCardBody>
    <h3 class="bj-card__title">Lien carte</h3>
    <p class="bj-card__desc">Toute la carte est cliquable.</p>
  </BjCardBody>
</BjCard>

Balise racine (tag)

<BjCard tag="article">…</BjCard>
<BjCard tag="div" role="group" aria-label="Groupe">…</BjCard>
<BjCard tag="a" href="/page" link>…</BjCard>

Combinaisons

Les modificateurs se cumulent (horizontal + highlight, link + tag a, etc.).

horizontal + highlight

link + flat

<BjCard horizontal highlight>
  <BjCardImg background="var(--bj-surface-alt)" label="Visuel" />
  <BjCardBody>
    <h3 class="bj-card__title">Horizontal + highlight</h3>
  </BjCardBody>
</BjCard>

<BjCard tag="a" href="#" link flat>
  <BjCardBody>
    <h3 class="bj-card__title">Lien + flat</h3>
  </BjCardBody>
</BjCard>

Props — BjCard

Prop	Description
`horizontal`	Image à gauche, texte à droite (layout carte horizontale).
`flat`	Supprime bordure et ombre.
`highlight`	Bordure gauche d’accent.
`link`	Style carte interactive (souvent avec tag="a" et href).
`tag`	article (défaut), div ou a — élément racine du composant dynamique.

Props — BjCardImg

Prop	Description
`background`	Valeur CSS pour background (ex. couleur ou gradient).
`label`	Texte pour aria-label sur le conteneur role="img".
`(default slot)`	Contenu optionnel à l’intérieur de la zone image (illustration, icône).