Contenu éditorial

Le composant BjContent est un simple conteneur div.bj-content : tout le contenu éditorial (titres, paragraphes, listes, tableaux, etc.) se place dans le slot par défaut — enfants directs du conteneur pour appliquer les styles de prose du design system.

Slot / enfants

En HTML statique, enrobez votre article ou section avec class="bj-content". En Vue, tout ce qui est passé entre les balises ouvrantes et fermantes du composant devient les enfants du div (équivalent du slot par défaut). Aucune classe de variante : un seul style de conteneur.

Exemple

Section

Texte avec lien.

Élément un
Élément deux

« Citation institutionnelle. »

Code inline npm et bloc :

dsbj build

[Visuel]

Légende.

Indicateur	Valeur
Dossiers	120

<article class="bj-content">
  <h2 class="bj-h2">Section</h2>
  <p>Texte avec <a href="#">lien</a>.</p>
  …
</article>

Conteneur minimal

Un seul paragraphe suffit : la classe bj-content assure l’espacement et la typo de base.

Un seul paragraphe dans le conteneur éditorial.

<div class="bj-content">
  <p>Un seul paragraphe dans le conteneur éditorial.</p>
</div>

Balise racine (<code>article</code>, <code>section</code>, <code>main</code>)

Seule la classe bj-content compte pour les styles : vous pouvez l’attacher à <article>, <section>, <main> ou <div> selon le rôle sémantique.

Sous-section

Même styles de prose : la racine est un <section> avec bj-content.

<section class="bj-content" aria-labelledby="sec-a">
  <h2 class="bj-h2" id="sec-a">Titre de section</h2>
  <p>Contenu avec la même classe sur une autre balise sémantique.</p>
</section>

Styles sur les descendants

Les styles s’appliquent aux descendants directs (titres, p, listes, blockquote, code, pre, hr, figure, table).

Classes CSS

Classe	Description
`bj-content`	Bloc prose unique ; pas de props ni de modificateurs — tout le contenu passe par les enfants / le slot.