Regione Toscana Design System

Article Body: Default 

<div class="rtds-article-body">
    <h2>Accesso ai Servizi Sanitari Online</h2>

    <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>Prenotazione visite specialistiche</li>
        <li>Fascicolo Sanitario Elettronico</li>
        <li>Cambio medico di famiglia</li>
    </ul>
    <p><a href="#">Accedi ai servizi sanitari</a></p>

    <blockquote>
        <p>
            La digitalizzazione dei servizi pubblici rappresenta una priorità per la
            Regione Toscana, con l'obiettivo di semplificare il rapporto tra cittadini
            e pubblica amministrazione.
        </p>
    </blockquote>
    <p>
        Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
        ante.
    </p>
    <figure>
        <img src="/images/feathers.jpg" alt="Placeholder image">
        <figcaption>Figura 1: Descrizione dell'immagine</figcaption>
    </figure>
    <p>
        Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
    </p>
    <p>
        Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper
        pharetra.
    </p>
    <p>
        Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
    </p>

    <h3>Formazione e Lavoro in Toscana</h3>
    <p>
        Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci.
    </p>
    <p>
        Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    </p>
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
    <p>Per inceptos himenaeos. Nunc dignissim risus id metus.</p>

    <h4>Opportunità per le Imprese</h4>
    <p>Cras ornare tristique elit lorem ipsum dolor sit amet.</p>
    <p>Vivamus vestibulum ntulla nec ante lorem ipsum dolor.</p>
    <p>Praesent placerat risus quis eros lorem ipsum dolor.</p>
    <p>Fusce pellentesque suscipit nibh lorem ipsum dolor.</p>

    <ol>
        <li>Bandi e finanziamenti regionali</li>
        <li>Sostegno all'innovazione</li>
        <li>Formazione professionale</li>
    </ol>
</div>
 
<div class="rtds-article-body">
  <h2>Accesso ai Servizi Sanitari Online</h2>

  <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>Prenotazione visite specialistiche</li>
    <li>Fascicolo Sanitario Elettronico</li>
    <li>Cambio medico di famiglia</li>
  </ul>
  <p><a href="#">Accedi ai servizi sanitari</a></p>

  <blockquote>
    <p>
      La digitalizzazione dei servizi pubblici rappresenta una priorità per la
      Regione Toscana, con l'obiettivo di semplificare il rapporto tra cittadini
      e pubblica amministrazione.
    </p>
  </blockquote>
  <p>
    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet,
    ante.
  </p>
  <figure>
    <img src="/images/feathers.jpg" alt="Placeholder image">
    <figcaption>Figura 1: Descrizione dell'immagine</figcaption>
  </figure>
  <p>
    Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
  </p>
  <p>
    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper
    pharetra.
  </p>
  <p>
    Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
  </p>

  <h3>Formazione e Lavoro in Toscana</h3>
  <p>
    Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci.
  </p>
  <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
  </p>
  <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra.</p>
  <p>Per inceptos himenaeos. Nunc dignissim risus id metus.</p>

  <h4>Opportunità per le Imprese</h4>
  <p>Cras ornare tristique elit lorem ipsum dolor sit amet.</p>
  <p>Vivamus vestibulum ntulla nec ante lorem ipsum dolor.</p>
  <p>Praesent placerat risus quis eros lorem ipsum dolor.</p>
  <p>Fusce pellentesque suscipit nibh lorem ipsum dolor.</p>

  <ol>
    <li>Bandi e finanziamenti regionali</li>
    <li>Sostegno all'innovazione</li>
    <li>Formazione professionale</li>
  </ol>
</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

Component used to display article body formatted text content generated with a WYSIWYG editor.

Use Custom utility rtds-article-body.

Tailwind Typography plugin is used as base to style the article body text and typography, including headings, paragraphs, lists, and more. Read Plugin page

Usage

Create a wrapper for the article body text and apply the rtds-article-body class to it.

<div class="rtds-article-body">
    <!-- Article body text content -->
</div>