<div class="rtds-container rtds-space-y-8">
<h1 class="rtds-heading-1">Article Body Utilities - Custom utility</h1>
<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>
<div class="rtds-container rtds-space-y-8">
<h1 class="rtds-heading-1">Article Body Utilities - Custom utility</h1>
{% render "@article-body" %}
</div>
/* No context defined. */
/**
* CUSTOM UTILITIES
*
*/
@layer utilities {
/* base */
.rtds-article-body {
@apply rtds-prose rtds-prose-sm sm:rtds-prose-base md:rtds-prose-lg rtds-max-w-[57em] rtds-prose-custom;
}
.rtds-article-body--small {
@apply rtds-prose-sm md:rtds-prose-base;
}
/* headings */
.rtds-article-body {
@apply prose-h1:rtds-heading-1 prose-h2:rtds-heading-2 prose-h3:rtds-heading-3 prose-h4:rtds-heading-4 prose-h5:rtds-heading-5 prose-h6:rtds-heading-6;
}
.rtds-article-body > *:first-child,
.rtds-article-body .rtds-sr-only + * {
@apply rtds-mt-0;
}
/* links */
.rtds-article-body a {
@apply hover:rtds-content-03;
}
/* blockquotes */
.rtds-article-body {
@apply prose-blockquote:rtds-not-italic;
}
}
Utility personalizzate utilizzate per stilizzare il testo e la tipografia del corpo dell’articolo, inclusi titoli, paragrafi, elenchi e altro.
Caso d’uso: contenuto testuale di articoli o pagine formattato con un editor WYSIWYG, su cui gli sviluppatori non hanno controllo diretto degli stili.
Il plugin Tailwind Typography viene utilizzato come base per stilizzare il testo e la tipografia del corpo dell’articolo, inclusi titoli, paragrafi, elenchi e altro. Viene applicato a una classe di utility personalizzata rtds-article-body.
Leggi la pagina del Plugin
Crea un contenitore per il testo del corpo dell’articolo e applica la classe rtds-article-body.
<div class="rtds-article-body">
<!-- Contenuto testuale del corpo dell'articolo -->
</div>