Regione Toscana Design System — Servizi Design System Core

Cover Image 

<div class="rtds-cover-image  rtds-aspect-wide">
    <img class="rtds-w-full rtds-h-full rtds-object-cover rtds-object-center" src="../../images/image-placeholder.jpg" alt="Alt immagine">
</div>
 
<div class="rtds-cover-image {% if aspectRatio %} {{ aspectRatio }}{% endif %}{% if classes %} {{ classes }}{% endif %}">
    <img class="rtds-w-full rtds-h-full rtds-object-cover rtds-object-center" src="{{ image.src | path }}" alt="{{ image.alt }}">
</div>
 
{
  "aspectRatio": "rtds-aspect-wide",
  "image": {
    "src": "/images/image-placeholder.jpg",
    "alt": "Alt immagine"
  }
}

Cover Image

Componente per visualizzare un’immagine di copertura con proporzioni fisse e riempimento completo del contenitore.

Comportamento

Il componente viene renderizzato come un <div> contenitore con un <img> interno. L’immagine occupa l’intera area del contenitore tramite object-fit: cover.

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 da usare nei temi o ambienti di implementazione.

Parametri Base

  • image.src (stringa, obbligatorio): Percorso dell’immagine
  • image.alt (stringa, obbligatorio): Testo alternativo dell’immagine. Lasciare vuoto se l’immagine è decorativa
  • aspectRatio (stringa, opzionale): Classe Tailwind per il rapporto d’aspetto del contenitore (es. rtds-aspect-wide, rtds-aspect-square, rtds-aspect-video). Default: rtds-aspect-wide
  • classes (stringa, opzionale): Classi CSS aggiuntive per il contenitore

Accessibilità

WCAG 2.1

Livello AA — criteri pertinenti:

  • 1.1.1 Contenuti non testuali — il parametro image.alt è obbligatorio; usare stringa vuota "" se l’immagine è decorativa

Struttura e semantica

  • Il componente è renderizzato come <div class="rtds-cover-image"> — wrapper puramente presentazionale
  • L’<img> interno occupa l’intera area del contenitore tramite object-fit: cover

Attributi ARIA

Attributo Valori Condizione
alt su <img> stringa descrittiva o "" sempre presente — vuoto se l’immagine è decorativa

Screen reader

  • Se l’immagine trasmette informazioni (es. foto di un luogo, evento, persona), fornire un alt descrittivo
  • Se il contesto visivo è già descritto dal testo adiacente, alt="" è appropriato per evitare ridondanza

Stili CSS

Classi Base

  • .rtds-cover-image: Contenitore dell’immagine — riceve le classi di rapporto d’aspetto e quelle aggiuntive

Classi per il rapporto d’aspetto (Tailwind)

  • rtds-aspect-wide: Rapporto panoramico (es. 16:9 o simile)
  • rtds-aspect-square: Rapporto quadrato (1:1)
  • rtds-aspect-video: Rapporto video standard (16:9)

Esempi di utilizzo

<!-- Cover image panoramica -->
<div class="rtds-cover-image rtds-aspect-wide">
  <img
    class="rtds-w-full rtds-h-full rtds-object-cover rtds-object-center"
    src="/images/cover.jpg"
    alt="Paesaggio della Toscana"
  >
</div>

<!-- Cover image quadrata -->
<div class="rtds-cover-image rtds-aspect-square">
  <img
    class="rtds-w-full rtds-h-full rtds-object-cover rtds-object-center"
    src="/images/cover.jpg"
    alt=""
  >
</div>

<!-- Cover con classi aggiuntive -->
<div class="rtds-cover-image rtds-aspect-wide rtds-rounded-lg rtds-overflow-hidden">
  <img
    class="rtds-w-full rtds-h-full rtds-object-cover rtds-object-center"
    src="/images/cover.jpg"
    alt="Descrizione immagine"
  >
</div>