<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-grid rtds-gap-2 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--arrow-right-on-rectangle" />
</svg>
</div>
</div>
<dl>
<dt class="rtds-uppercase rtds-text-xs md:rtds-text-sm rtds-font-bold">Accesso</dt>
<dd class="rtds-font-bold rtds-heading-3 rtds-leading-tight">
Tessera sanitaria / SPID livello 2 / CIE
</dd>
</dl>
</div>
<div class="rtds-grid lg:rtds-flex lg:rtds-justify-end rtds-mt-auto">
<a href="#" class="rtds-btn
rtds-btn--icon-right rtds-group/button rtds-btn--secondary">
Accedi al servizio
<svg class="rtds-icon rtds-fill-current rtds-w-4 rtds-h-4 md:rtds-w-5 md:rtds-h-5 lg:rtds-w-6 lg:rtds-h-6 group-hover/button:rtds-translate-x-1" aria-hidden="true" focusable="false" role="img">
<use href="../../icons.svg#mini--chevron-right" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
{% extends '@page-header-servizio' %}
{% block location %}
<div class="rtds-grid lg:rtds-flex lg:rtds-justify-end rtds-mt-auto">
{% render '@button--icon-right', button, true %}
</div>
{% endblock location %}
{
"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--arrow-right-on-rectangle",
"locationTitleLabel": "Accesso",
"locationTitleMain": "Tessera sanitaria / SPID livello 2 / CIE",
"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"
}
],
"serviceAccessClasses": "rtds-grid rtds-gap-2",
"button": {
"href": "#",
"label": "Accedi al servizio",
"icon": "mini--chevron-right",
"classes": "rtds-btn--secondary"
}
}
/* Base Heading Component */
@layer components {
}
Template for the page heading - SERVIZIO.