Regione Toscana Design System

Logo component 

<div class="rtds-site-logo">
    <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>
 
<{% if href %}a{% else %}div{% endif %}
  class="rtds-site-logo{% block classes %}{% if classes %} {{ classes }}{% endif %}{% endblock classes %}{% if size %} {{ size }}{% endif %}"
  {% if href %}href="{{ href }}"{% endif %}
>
  <img
    class="rtds-w-full rtds-h-full {{ objectFit }} rtds-object-left-top"
    src="{% if path %}{{ path }}{% else %}/images/logo.png{% endif %}"
    {% if srcset %}srcset="{{ srcset }}"{% endif %}
    {% if sizesAttribute %}sizes="{{ sizesAttribute }}"{% endif %}
    alt="{% if alt %}{{ alt }}{% else %}Logo alt text{% endif %}"
    width="{{ width }}"
    height="{{ height }}"
  />
</{% if href %}a{% else %}div{% endif %}>
 
{
  "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