Regione Toscana Design System — Servizi Design System Core

Article Body: S 

<div class="rtds-article-body">
       <h3>Accesso ai Servizi Sanitari Online</h3>
       <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui
           mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque
           eu tellus rhoncus ut eleifend nibh porttitor.
       </p>
       <ul>
           <li>Lorem ipsum dolor sit amet</li>
           <li>Nullam in dui mauris vivamus hendrerit arcu</li>
           <li>Sed auctor neque eu tellus rhoncus</li>
       </ul>
       <p><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a></p>
   </div>
 
<div class="rtds-article-body">
    <h3>Accesso ai Servizi Sanitari Online</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui
      mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque
      eu tellus rhoncus ut eleifend nibh porttitor.
    </p>
    <ul>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Nullam in dui mauris vivamus hendrerit arcu</li>
      <li>Sed auctor neque eu tellus rhoncus</li>
    </ul>
    <p><a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a></p>
  </div>
 
/* No context defined. */
  • Content: 
    name: Article body
description: article body component
context:
variants:
    - name: default
    - name: s
  • URL: /components/raw/article-body/article-body.yml
  • Filesystem Path: components/03-molecules/article-body/article-body.yml
  • Size: 107 Bytes

Article Body

Componente wrapper per la visualizzazione di testo formattato generato da un editor WYSIWYG. Applica stili tipografici tramite la classe utility rtds-article-body e il plugin Tailwind Typography.

Comportamento

Il componente viene renderizzato come <div class="rtds-article-body">. Non introduce struttura semantica propria: la semantica (heading, liste, figure, blockquote) è responsabilità del markup WYSIWYG inserito al suo interno.

Il plugin Tailwind Typography è usato come base per gli stili tipografici.

Parametri di configurazione

Contesto di sviluppo Fractal/Nunjucks — Questa sezione riguarda esclusivamente i parametri del context .config.yml usati durante lo sviluppo nella libreria. Non descrive attributi HTML o proprietà da usare nei temi, CMS o ambienti di implementazione: per quello, fare riferimento alla sezione Esempi di utilizzo.

  • content (stringa, opzionale): Contenuto HTML da visualizzare all’interno del wrapper

Accessibilità

Il componente è puramente presentazionale: si tratta di un wrapper CSS (<div class="rtds-article-body">) che applica stili tipografici al contenuto WYSIWYG. Non introduce elementi interattivi né attributi ARIA propri.

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.3.1 Informazioni e correlazioni — la struttura semantica del contenuto (heading, liste, figure, blockquote) è responsabilità del markup WYSIWYG inserito al suo interno, non del componente wrapper
  • 1.4.3 Contrasto (minimo) — i colori tipografici applicati devono rispettare un rapporto di contrasto minimo 4.5:1 per il testo normale

Struttura e semantica

  • Il componente è renderizzato come <div class="rtds-article-body"> — wrapper presentazionale senza semantica propria
  • Non espone attributi ARIA aggiuntivi

Screen reader

  • Il contenuto interno è letto sequenzialmente secondo l’ordine del DOM
  • La struttura semantica (heading, liste, ecc.) dipende interamente dal markup WYSIWYG inserito

Stili CSS

Classi Base

  • .rtds-article-body: applica gli stili tipografici al contenuto WYSIWYG interno

Esempi di utilizzo

<!-- Esempio base -->
<div class="rtds-article-body">
  <!-- Contenuto WYSIWYG -->
  <h2>Titolo sezione</h2>
  <p>Paragrafo di testo dell'articolo.</p>
  <ul>
    <li>Elemento lista</li>
  </ul>
</div>