Regione Toscana Design System

Page Header Articolo 

<div class="rtds-page-header rtds-container rtds-space-y-2 rtds-page-header--base">

    <nav class="rtds-breadcrumb" aria-label="Breadcrumb">
        <ol class="rtds-breadcrumb__list">

            <li class="rtds-breadcrumb__item">
                <a class="rtds-breadcrumb__link" href="#">
                    Livello 1

                    <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-ml-2" aria-hidden="true" focusable="false" role="img">
                        <use href="../../icons.svg#mini--chevron-right" />
                    </svg>

                </a>
            </li>

            <li class="rtds-breadcrumb__item">
                <a class="rtds-breadcrumb__link" href="#">
                    Livello 2

                    <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-ml-2" aria-hidden="true" focusable="false" role="img">
                        <use href="../../icons.svg#mini--chevron-right" />
                    </svg>

                </a>
            </li>

            <li class="rtds-breadcrumb__item">
                <a class="rtds-breadcrumb__link" href="#" aria-current="page">
                    Pagina corrente

                </a>
            </li>

        </ol>
    </nav>

    <div class="rtds-page-header__content rtds-grid rtds-gap-5 md:rtds-gap-12">

        <div class="rtds-grid rtds-gap-5">

            <div class="rtds-page-header__title rtds-space-y-4">

                <h1 class="rtds-heading-1">

                    Titolo pagina

                </h1>
            </div>

            <div class="rtds-flex rtds-items-center rtds-flex-wrap rtds-gap-4 rtds-divide-x rtds-divide-gray-01">
                <div><time datetime="2025-01-16" class="rtds-text-sm md:rtds-text-base">16.01.2025</time></div>
                <div class="rtds-pl-4 rtds-flex rtds-items-center rtds-gap-2 rtds-flex-wrap"><span class="rtds-chip rtds-chip--category">
                        <svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-mr-1.5" aria-hidden="true" focusable="false" role="img">
                            <use href="../../icons.svg#outline--tag" />
                        </svg>

                        <span class="rtds-sr-only">Categoria: </span>

                        Categoria</span></div>
            </div>

        </div>

    </div>

</div>
 
{% extends '@page-header-base' %}
{% block additionalContent %}
<div class="rtds-flex rtds-items-center rtds-flex-wrap rtds-gap-4 rtds-divide-x rtds-divide-gray-01">
    <div><time datetime="2025-01-16" class="rtds-text-sm md:rtds-text-base">16.01.2025</time></div>
    <div class="rtds-pl-4 rtds-flex rtds-items-center rtds-gap-2 rtds-flex-wrap">{% render '@chip--category', {label: 'Categoria', icon: 'outline--tag', srLabel: 'Categoria: '}, true %}</div>
</div>
{% endblock additionalContent %}
 
{
  "backLink": false,
  "title": "Titolo pagina",
  "breadcrumb": {
    "items": [
      {
        "label": "Livello 1"
      },
      {
        "label": "Livello 2"
      },
      {
        "label": "Pagina corrente"
      }
    ]
  }
}

No notes defined.