Regione Toscana Design System

Logo component: Secondary 

<div class="rtds-site-logo rtds-logo--secondary">
    <img class="rtds-w-full rtds-h-full rtds-object-contain rtds-object-left-top" src="/images/logo.png" alt="Alt logo image" width="248" height="81" />
</div>
 
{% extends '@logo' %}
{% block classes %}{{ super() }} rtds-logo--secondary{% endblock classes %}
 
{
  "alt": "Alt logo image",
  "path": "/images/logo.png",
  "width": 248,
  "height": 81,
  "objectFit": "rtds-object-contain"
}

Componente Logo

Il componente Logo è un elemento molecolare che gestisce la visualizzazione del logo del sito. Le dimensioni del logo sono definite tramite CSS e attraverso gli attributi size (width e height) nel tag img.

Varianti

  • logo--main: logo principale - utilizzato nell’header
  • logo--secondary: logo secondario - utilizzato nell’header

Markup

Il componente può essere renderizzato come:

  • <div> quando non è presente un link
  • <a> quando è presente un link (attributo href)

La struttura base del markup è:

<div|a class="rtds-site-logo [classi aggiuntive]">
  <img 
    class="rtds-w-full rtds-h-full [objectFit] rtds-object-left-top"
    src="[path]"
    [srcset]
    [sizes]
    alt="[alt]"
    width="[width]"
    height="[height]"
  />
</div|a>

Comportamento

  • Il componente supporta immagini responsive attraverso gli attributi srcset e sizes
  • L’object-fit dell’immagine può essere controllato tramite la classe objectFit
  • Le dimensioni dell’immagine sono gestite sia tramite CSS che tramite gli attributi HTML width e height

Configurazioni per lo sviluppo (Nunjucks)

I seguenti parametri possono essere utilizzati per configurare il componente:

  • href: stringa - URL del link se il logo deve essere cliccabile (se non specificato, il wrapper sarà un div)
  • classes: stringa - classi CSS aggiuntive
  • size: stringa - classi per il dimensionamento
  • objectFit: stringa - proprietà object-fit dell’immagine (cover o contain)
  • path: stringa - percorso dell’immagine del logo (default: /images/logo.png)
  • alt: stringa - testo alternativo per l’immagine (default: “Logo alt text”)
  • width: numero - valore dell’attributo width dell’immagine
  • height: numero - valore dell’attributo height dell’immagine
  • srcset: stringa - valore dell’attributo srcset per immagini responsive/retina
  • sizesAttribute: stringa - valore dell’attributo sizes per la gestione delle immagini responsive

Blocchi

  • classes: blocco per l’inserimento di classi CSS aggiuntive