<div class="rtds-page-header rtds-container rtds-space-y-2 rtds-page-header--has-bg rtds-page-header--servizio">
<div class="rtds-flex">
<a href="#" class="rtds-text-link rtds-content-03 rtds-text-link--s">
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 rtds-flex-shrink-0 rtds-flex-grow-0" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#solid--arrow-left" />
</svg>
Torna a: Nome Tema
</a>
</div>
<div class="rtds-page-header__content rtds-grid rtds-gap-5 md:rtds-gap-12 rtds-grid-cols-12 rtds-divide-y rtds-divide-gray-02 lg:rtds-divide-y-0 lg:rtds-divide-x ">
<div class="rtds-grid rtds-content-start rtds-gap-5 rtds-col-span-12 lg:rtds-col-span-4">
<div class="rtds-page-header__title rtds-grid rtds-gap-4">
<h1 class="rtds-heading-1 rtds-order-2">
Nome servizio
</h1>
<div class="rtds-order-1">
<ul role="list" class="rtds-flex rtds-gap-2 rtds-flex-wrap">
<li>
<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--phone" />
</svg>
<span class="rtds-sr-only">Categoria</span>
telefono</span>
</li>
<li>
<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--user-group" />
</svg>
<span class="rtds-sr-only">Categoria</span>
cittadini</span>
</li>
<li>
<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--user-group" />
</svg>
<span class="rtds-sr-only">Tema</span>
terza età</span>
</li>
</ul>
</div>
</div>
<div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
<p>
Descrizione <strong>servizio</strong>
</p>
</div>
</div>
<div class="rtds-pt-5 lg:rtds-pt-0 lg:rtds-pl-5 xl:rtds-pl-8 rtds-col-span-12 lg:rtds-col-span-4">
<h2 class="rtds-sr-only">Contatti e orari</h2>
<dl class="rtds-grid rtds-gap-1.5">
<div class="rtds-content-02 rtds-flex rtds-gap-2 md:rtds-gap-4 rtds-pb-2">
<div>
<div class="rtds-flex rtds-items-center rtds-justify-center rtds-w-8 rtds-h-8 md:rtds-w-10 md:rtds-h-10 rtds-rounded-full rtds-border-2 rtds-border-current">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 md:rtds-w-6 md:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--phone" />
</svg>
</div>
</div>
<div>
<dt class="rtds-uppercase rtds-text-xs md:rtds-text-sm rtds-font-bold">Numero verde</dt>
<dd class="rtds-font-bold rtds-heading-3 rtds-leading-tight">
<div class="rtds-flex rtds-gap-2">
<a class="hover:rtds-underline rtds-break-words" href="tel:+393333333333">333 333 3333</a>
</div>
<div class="rtds-flex rtds-gap-2">
<a class="hover:rtds-underline rtds-break-words" href="tel:+393333333333">333 333 3333 (da cellulare)</a>
</div>
</dd>
</div>
</div>
<div class="rtds-content-02 rtds-flex rtds-gap-2 md:rtds-gap-4 rtds-pb-2">
<div>
<div class="rtds-flex rtds-items-center rtds-justify-center rtds-w-8 rtds-h-8 md:rtds-w-10 md:rtds-h-10 rtds-rounded-full rtds-border-2 rtds-border-current">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 md:rtds-w-6 md:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--envelope-open" />
</svg>
</div>
</div>
<div class="rtds-font-bold">
<dt class="rtds-uppercase rtds-text-xs md:rtds-text-sm">Email</dt>
<dd class="rtds-heading-3 rtds-leading-tight"><a class="hover:rtds-underline rtds-break-words" href="mailto:info@servizio.it">info@servizio.it</a></dd>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2 md:rtds-gap-4 rtds-leading-none">
<dt class="rtds-content-02"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--calendar-days" />
</svg>
<span class="rtds-sr-only">Giorni</span>
</dt>
<dd class="rtds-text-sm md:rtds-text-base rtds-leading-tight">lunedì - venerdì | sabato</dd>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2 md:rtds-gap-4 rtds-leading-none">
<dt class="rtds-content-02"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--clock" />
</svg>
<span class="rtds-sr-only">Orari</span>
</dt>
<dd class="rtds-text-sm md:rtds-text-base rtds-leading-tight">08:00 - 12:00 | 14:00 - 18:00</dd>
</div>
</dl>
</div>
<div class="rtds-service-access rtds-pt-5 lg:rtds-pt-0 lg:rtds-pl-5 xl:rtds-pl-8 rtds-col-span-12 lg:rtds-col-span-4">
<h2 class="rtds-sr-only">Come accedere o usufruire del servizio</h2>
<div class="rtds-grid rtds-gap-1.5">
<div class="rtds-content-02 rtds-flex rtds-gap-2 md:rtds-gap-4 rtds-pb-2">
<div class="">
<div class="rtds-flex rtds-items-center rtds-justify-center rtds-w-8 rtds-h-8 md:rtds-w-10 md:rtds-h-10 rtds-rounded-full rtds-border-2 rtds-border-current">
<svg class="rtds-icon rtds-fill-current rtds-w-5 rtds-h-5 md:rtds-w-6 md:rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--user-check" />
</svg>
</div>
</div>
<dl>
<dt class="rtds-uppercase rtds-text-xs md:rtds-text-sm rtds-font-bold">Sportello</dt>
<dd class="rtds-font-bold rtds-heading-3 rtds-leading-tight">
Punto insieme
</dd>
</dl>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2 md:rtds-gap-4 rtds-leading-none">
<div class="rtds-content-02"><svg class="rtds-icon rtds-fill-current rtds-w-6 rtds-h-6" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#outline--map-pin" />
</svg>
</div>
<p class="rtds-text-sm md:rtds-text-base"><span class="rtds-sr-only">Sportello: </span><a href="" class="hover:rtds-underline">Trova quello più vicino a te</a></p>
</div>
</div>
</div>
</div>
</div>
{% extends '@page-header-base' %}
{% block classes %} rtds-page-header--servizio{% if classes %} {{ classes }}{% endif %}{% endblock classes %}
{% block contentWrapperClasses %} {{ super() }} rtds-divide-y rtds-divide-gray-02 lg:rtds-divide-y-0 lg:rtds-divide-x {% endblock contentWrapperClasses %}
{% block content %}
<div class="rtds-grid rtds-content-start rtds-gap-5{% if contentLeftMaxWidth %} {{ contentLeftMaxWidth }}{% endif %}{% if columnSpan %} {{ columnSpan }}{% endif %}">
<div class="rtds-page-header__title rtds-grid rtds-gap-4">
<h1 class="rtds-heading-1 rtds-order-2">
{{ title|safe }}
</h1>
<div class="rtds-order-1">
<ul role="list" class="rtds-flex rtds-gap-2 rtds-flex-wrap">
{% for category in categories %}
<li>
{% render '@chip--category', category, true %}
</li>
{% endfor %}
</ul>
</div>
</div>
{% if description %}
<div class="rtds-page-header__description rtds-text-base lg:rtds-text-lg">
<p>
{{ description|safe }}
</p>
</div>
{% endif %}
</div>
<div class="rtds-pt-5 lg:rtds-pt-0 lg:rtds-pl-5 xl:rtds-pl-8{% if columnSpan %} {{ columnSpan }}{% endif %}">
<h2 class="rtds-sr-only">Contatti e orari</h2>
<dl class="rtds-grid rtds-gap-1.5">
<div class="rtds-content-02 rtds-flex rtds-gap-2 md:rtds-gap-4 rtds-pb-2">
<div>
<div class="rtds-flex rtds-items-center rtds-justify-center rtds-w-8 rtds-h-8 md:rtds-w-10 md:rtds-h-10 rtds-rounded-full rtds-border-2 rtds-border-current">
{% render '@icon', {id: 'outline--phone', size: 'rtds-w-5 rtds-h-5 md:rtds-w-6 md:rtds-h-6'}, true %}
</div>
</div>
<div>
<dt class="rtds-uppercase rtds-text-xs md:rtds-text-sm rtds-font-bold">Numero verde</dt>
<dd class="rtds-font-bold rtds-heading-3 rtds-leading-tight">
<div class="rtds-flex rtds-gap-2">
<a class="hover:rtds-underline rtds-break-words" href="tel:+393333333333">333 333 3333</a>
</div>
<div class="rtds-flex rtds-gap-2">
<a class="hover:rtds-underline rtds-break-words" href="tel:+393333333333">333 333 3333 (da cellulare)</a>
</div>
</dd>
</div>
</div>
<div class="rtds-content-02 rtds-flex rtds-gap-2 md:rtds-gap-4 rtds-pb-2">
<div>
<div class="rtds-flex rtds-items-center rtds-justify-center rtds-w-8 rtds-h-8 md:rtds-w-10 md:rtds-h-10 rtds-rounded-full rtds-border-2 rtds-border-current">
{% render '@icon', {id: 'outline--envelope-open', size: 'rtds-w-5 rtds-h-5 md:rtds-w-6 md:rtds-h-6'}, true %}
</div>
</div>
<div class="rtds-font-bold">
<dt class="rtds-uppercase rtds-text-xs md:rtds-text-sm">Email</dt>
<dd class="rtds-heading-3 rtds-leading-tight"><a class="hover:rtds-underline rtds-break-words" href="mailto:info@servizio.it">info@servizio.it</a></dd>
</div>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2 md:rtds-gap-4 rtds-leading-none">
<dt class="rtds-content-02">{% render '@icon', {id: 'outline--calendar-days', size: 'rtds-w-6 rtds-h-6'}, true %}<span class="rtds-sr-only">Giorni</span></dt>
<dd class="rtds-text-sm md:rtds-text-base rtds-leading-tight">lunedì - venerdì | sabato</dd>
</div>
<div class="rtds-flex rtds-items-center rtds-gap-2 md:rtds-gap-4 rtds-leading-none">
<dt class="rtds-content-02">{% render '@icon', {id: 'outline--clock', size: 'rtds-w-6 rtds-h-6'}, true %}<span class="rtds-sr-only">Orari</span></dt>
<dd class="rtds-text-sm md:rtds-text-base rtds-leading-tight">08:00 - 12:00 | 14:00 - 18:00</dd>
</div>
</dl>
</div>
<div class="rtds-service-access rtds-pt-5 lg:rtds-pt-0 lg:rtds-pl-5 xl:rtds-pl-8{% if serviceAccessClasses %} {{ serviceAccessClasses }}{% endif %}{% if columnSpan %} {{ columnSpan }}{% endif %}">
<h2 class="rtds-sr-only">Come accedere o usufruire del servizio</h2>
<div class="rtds-grid rtds-gap-1.5">
<div class="rtds-content-02 rtds-flex rtds-gap-2 md:rtds-gap-4 rtds-pb-2">
<div class="">
<div class="rtds-flex rtds-items-center rtds-justify-center rtds-w-8 rtds-h-8 md:rtds-w-10 md:rtds-h-10 rtds-rounded-full rtds-border-2 rtds-border-current">
{% render '@icon', {id: locationIcon, size: 'rtds-w-5 rtds-h-5 md:rtds-w-6 md:rtds-h-6'}, true %}
</div>
</div>
<dl>
<dt class="rtds-uppercase rtds-text-xs md:rtds-text-sm rtds-font-bold">{{ locationTitleLabel }}</dt>
<dd class="rtds-font-bold rtds-heading-3 rtds-leading-tight">
{{ locationTitleMain }}
</dd>
</dl>
</div>
{% block location %}
<div class="rtds-flex rtds-items-center rtds-gap-2 md:rtds-gap-4 rtds-leading-none">
<div class="rtds-content-02">{% render '@icon', {id: 'outline--map-pin', size: 'rtds-w-6 rtds-h-6'}, true %}</div>
<p class="rtds-text-sm md:rtds-text-base"><span class="rtds-sr-only">Sportello: </span><a href="" class="hover:rtds-underline">Trova quello più vicino a te</a></p>
</div>
{% endblock location %}
</div>
</div>
{% endblock content %}
{
"title": "Nome servizio",
"hasBg": true,
"backLink": {
"label": "Torna a: Nome Tema",
"icon": "solid--arrow-left",
"classes": "rtds-content-03"
},
"description": "Descrizione <strong>servizio</strong>",
"contentGridTemplateColumns": "rtds-grid-cols-12",
"columnSpan": "rtds-col-span-12 lg:rtds-col-span-4",
"locationIcon": "outline--user-check",
"locationTitleLabel": "Sportello",
"locationTitleMain": "Punto insieme",
"categories": [
{
"label": "telefono",
"icon": "outline--phone",
"srLabel": "Categoria"
},
{
"label": "cittadini",
"icon": "outline--user-group",
"srLabel": "Categoria"
},
{
"label": "terza età",
"icon": "outline--user-group",
"srLabel": "Tema"
}
]
}
/* Base Heading Component */
@layer components {
}
Template for the page heading - SERVIZIO.