LD Consulting — Bloc de code

Bloc de code

Composant documentaire pour afficher un exemple HTML, CSS ou JS.

Usage

Utiliser .app-ds-code-block pour tout extrait de code affiché en bloc dans la documentation. Les extraits courts dans une phrase restent en .app-code-text.

Bloc standard

HTML

<div class="app-alert is-info" role="note">
  <span class="app-alert-icon" aria-hidden="true">info</span>
  <div>
    <strong class="app-alert-title">Information</strong>
    <p class="app-paragraph">Message informatif.</p>
  </div>
</div>

Bloc repliable

Afficher le code HTML

<button class="app-action-button" type="button" aria-label="Fermer">
  <span class="app-icon app-icon-close" aria-hidden="true"></span>
</button>

Règles

Ne pas créer de style local pour les blocs de code d’un composant à l’autre.
Utiliser la variante repliable pour les exemples longs ou secondaires.
Ne pas utiliser .app-ds-code-block pour du code inline.

Signature HTML<figure class="app-ds-code-block">