BjHighlight

Encadré de mise en exergue React ; prop size sm, md (défaut) ou lg ; children pour le contenu.

Utilisation

import { BjHighlight } from '@flrxnt/dsbj/react'

export function Example() {
  return (
    <BjHighlight size="lg">
      <p>Ce paragraphe est mis en exergue pour faciliter la lecture des points clés.</p>
    </BjHighlight>
  )
}

Tailles

sm — Ce paragraphe est mis en exergue pour faciliter la lecture des points clés.

md — Ce paragraphe est mis en exergue pour faciliter la lecture des points clés.

lg — Ce paragraphe est mis en exergue pour faciliter la lecture des points clés.

<BjHighlight size="sm"><p>Texte sm.</p></BjHighlight>
<BjHighlight size="md"><p>Texte md (défaut).</p></BjHighlight>
<BjHighlight size="lg"><p>Texte lg.</p></BjHighlight>

Tailles × contenu

sm — court

lg — bloc principal

Sous-texte

<BjHighlight size="sm"><p>sm</p></BjHighlight>
<BjHighlight size="sm"><p className="bj-text-sm">sm + petite typo</p></BjHighlight>
<BjHighlight size="lg">
  <p>lg</p>
  <p className="bj-text-sm">Sous-ligne</p>
</BjHighlight>

Children

Contenu riche (paragraphes, listes) passé en children.

<BjHighlight>
  <p>Intro.</p>
  <ul>
    <li>Point un</li>
    <li>Point deux</li>
  </ul>
</BjHighlight>

Props

Prop	Description
`size`	sm, md (défaut) ou lg.
`children`	Contenu riche (paragraphes, listes) passé en children.