<div class="c-toolbar u-none u-block@md o-bg-base" data-toolbar>
<div class="o-container u-flex">
<div class="u-mr-auto u-flex u-items-center u-justify-center u-py-xsmall ">
<span class="u-label-06 ">
Lunedì, 11 maggio 2020
</span>
</div>
<div class="c-toolbar__item u-flex u-column u-justify-center u-pl-xsmall u-pr-medium u-size-100 u-py-xsmall">
<a href="#" target="_blank" rel="noopener noreferrer">
<svg class="c-brand-cn" width="91" height="24">
<use xlink:href="#brand-citynews"></use>
</svg>
</a>
</div>
<div class="c-toolbar__item u-flex u-column u-justify-center u-size-100 u-py-xsmall u-px-medium">
<div class="c-modetoggle u-inline-flex">
<label class="u-pointer c-modetoggle__label u-relative" aria-label="Modalità light">
<input type="radio" value="-1" class="u-none" data-color-scheme="-1">
<svg class="c-modetoggle__icon u-m-xsmall o-icon o-icon--animated o-icon--sm u-cursor-pointer">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-sun"></use>
</svg>
</label>
<label class="u-pointer c-modetoggle__label u-relative" aria-label="Modalità di sistema">
<input type="radio" value="0" class="u-none" data-color-scheme="0">
<svg class="c-modetoggle__icon u-m-xsmall o-icon o-icon--animated o-icon--sm u-cursor-pointer">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-monitor"></use>
</svg>
</label>
<label class="u-pointer c-modetoggle__label u-relative" aria-label="Modalità dark">
<input type="radio" value="1" class="u-none" data-color-scheme="1">
<svg class="c-modetoggle__icon u-m-xsmall o-icon o-icon--animated o-icon--sm u-cursor-pointer">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-moon"></use>
</svg>
</label>
</div>
</div>
<!-- <div class="c-toolbar__item u-flex u-column u-justify-center u-size-100 u-py-xsmall u-px-medium">
<button class="c-btn c-btn--primary
c-btn--rounded
u-flex
c-btn--small
u-label-05
u-cursor-pointer u-items-center"
>
Abbonati
</button>
</div> -->
<div class="c-toolbar__item u-flex u-items-center u-justify-center u-label-05 u-pl-medium u-cursor-pointer u-py-xsmall">
<div tabindex="1" class="c-dropdown c-dropdown--reset c-dropdown--user u-cursor-pointer u-relative u-flex u-items-center u-justify-center u-label-05">
<img style=" width:2rem; height:2rem;" loading="lazy" decoding="async" referrerpolicy="no-referrer" class="avatar avatar-md u-radius-circle" src="//citynews.stgy.ovh/~shared/avatars/49015311842645/avatar_1.img" alt="Foto Profilo Utente" title="remat">
<div class="c-dropdown__panel u-absolute u-right u-overflow-hidden u-p-medium o-bg-light u-shadow u-z-upside">
<ul class="u-list-none u-m-none u-p-none">
<li class="u-mb-small"><a class="u-nav-03 o-link-text" tabindex="-1" href="user--view2021">Il mio profilo</a></li>
<li class="u-mb-small"><a class="u-nav-03 o-link-text" tabindex="-1" href="/user/contents/">I miei contenuti</a></li>
<li class="u-mb-small"><a class="u-nav-03 o-link-text" tabindex="-1" href="/user/edit/basic/">Modifica profilo</a></li>
<li class="u-mb-small"><a class="u-nav-03 o-link-text" tabindex="-1" href="/user/edit/privacy/">Privacy</a></li>
<li class="u-mb-small">
<form onsubmit="window.ga && ga( 'send', 'event', 'Community', 'Logout' ); return confirm( 'Sei sicuro di voler uscire dal sito?' );" action="/user/logout/" method="post">
<!--<?php echo input_hidden_tag( 'nonce', securityUtils::encodeVariable($sf_user->getNonce(), array('~sso', 'nonce', SF_GROUP, SF_DOMAIN, SF_APP, SF_TYPE, SF_DEBUG)) ); ?>-->
<button type="submit" class="c-btn c-btn--primary u-label-04 u-cursor-pointer u-flex u-items-center u-label-04" value="Esci">
Esci
</button>
</form>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="c-navbar__toggle-shadow u-fixed u-none@md"></div>
<header id="c-header" class="c-header u-z-high u-relative ">
<div class="o-container u-flex@lg u-justify-betweenlg">
<div class="u-relative u-size-full">
<div class="c-header__top u-py-base u-py-xsmall@md u-pr-base">
<a href="/">
<style>
@font-face {
font-family: 'NovecentoNarrow';
src: url("/~shared/files/webfonts/NovecentoSansNarrow.woff") format("woff2"),
url("/~shared/files/webfonts/NovecentoSansNarrow.woff") format("woff");
font-style: normal;
font-display: swap;
}
</style>
<div class="c-brand c-brand__text u-uppercase u-no-underline c-brand--resize-medium c-brand--inverse ">
<span class="c-brand__edition">agrigento</span><span class="c-brand__network">notizie</span>
</div>
</a>
</div>
<!-- <div class="c-navbar__subscription u-absolute u-none@md">
<button class="c-btn c-btn--primary
c-btn--rounded
u-flex
c-btn--small
u-label-05
u-cursor-pointer u-items-center"
>
Abbonati
</button>
</div> -->
<div class="c-navbar__toggle u-none@md" data-toggle-menu onclick="this.classList &&
document.querySelectorAll('[data-toggle-menu]').forEach( function(oNode){ oNode.classList.toggle('is-active');}) ,
document.querySelectorAll('[data-search]').forEach( function(oNode){ oNode.classList.remove('is-active');}) ,
document.querySelectorAll('[data-menu]').forEach( function(oNode){ oNode.classList.toggle('is-open');}) ,
document.querySelectorAll('[data-body-lock]').forEach( function(oNode){ oNode.classList.toggle('is-locked'); }) ,
document.querySelectorAll('[data-item-navigation]').forEach( function(oNode){ oNode.classList.toggle('is-visible-from-tablet'); }),
document.querySelectorAll('[data-search-bar]').forEach( function(oNode){ oNode.classList.add('is-hidden');})">
<svg class="o-icon o-icon--md c-navbar__controller u-cursor-pointer" data-toggle-menu-open>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-menu"></use>
</svg>
<svg class="o-icon o-icon--md c-navbar__controller is-hidden u-cursor-pointer" data-toggle-menu-close>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
</svg>
</div>
<div class="u-none u-flex@md u-items-center u-mr-small@lg">
<nav class="c-navbar u-none u-flex@md ">
<a href="#" class="c-navbar__item u-no-underline is-active" data-item-navigation data-channel="">Notizie</a>
<a href="#" class="c-navbar__item u-no-underline " data-item-navigation data-channel="">Cosa fare in città</a>
<a href="#" class="c-navbar__item u-no-underline " data-item-navigation data-channel="">Zone</a>
<a href="#" class="c-navbar__item u-no-underline " data-item-navigation data-channel="">Dossier</a>
</nav>
<div class="c-navbar__toggle" data-toggle-menu onclick="this.classList &&
document.querySelectorAll('[data-toggle-menu]').forEach( function(oNode){ oNode.classList.toggle('is-active');}) ,
document.querySelectorAll('[data-search]').forEach( function(oNode){ oNode.classList.remove('is-active');}) ,
document.querySelectorAll('[data-menu]').forEach( function(oNode){ oNode.classList.toggle('is-open');}) ,
document.querySelectorAll('[data-body-lock]').forEach( function(oNode){ oNode.classList.toggle('is-locked'); }) ,
document.querySelectorAll('[data-item-navigation]').forEach( function(oNode){ oNode.classList.toggle('is-visible-from-tablet'); }),
document.querySelectorAll('[data-search-bar]').forEach( function(oNode){ oNode.classList.add('is-hidden');})">
<svg class="o-icon o-icon--md c-navbar__controller u-cursor-pointer" data-toggle-menu-open>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-menu"></use>
</svg>
<svg class="o-icon o-icon--md c-navbar__controller is-hidden u-cursor-pointer" data-toggle-menu-close>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
</svg>
</div>
<div class="c-navbar__search u-none u-block@md" data-search onclick="this.classList &&
document.querySelectorAll('[data-search]').forEach( function(oNode){ oNode.classList.toggle('is-active');}) ,
document.querySelectorAll('[data-toggle-menu]').forEach( function(oNode){ oNode.classList.remove('is-active');}) ,
document.querySelectorAll('[data-search-bar]').forEach( function(oNode){ oNode.classList.toggle('is-hidden');}),
document.querySelectorAll('[data-menu]').forEach( function(oNode){ oNode.classList.remove('is-open');})">
<svg class="o-icon o-icon--md u-cursor-pointer" data-search-open>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
</svg>
<svg class="o-icon o-icon--md c-navbar__controller is-hidden u-cursor-pointer" data-search-close>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-x"></use>
</svg>
</div>
</div>
</div>
<div class="c-header__focus u-ml-auto u-mr-xxsmall u-size-1-2">
<article class="c-story c-story--inline-sm " data-channel="/notizie/">
<div class="c-story__media ">
<figure class="o-skeleton o-skeleton-media--responsive u-relative">
<a class="u-block u-size-full u-absolute u-left u-top" href="#">
<picture>
<source srcset="https://unsplash.it/600/338?random" media="(min-width: 740px)">
<img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/600/600?random" alt="Angels there and shore with or. The visiter chamber clasp.">
</picture>
</a>
</figure>
</div>
<div class="c-story__content u-relative">
<header class="c-story__header ">
<div class="c-story__kicker u-mb-xsmall">
<span class="u-label-02 ">Label</span>
</div>
<a class="o-link-text" href="#">
<h1 class="
u-truncate u-truncate-3
c-story__heading
u-heading-06
u-m-none">Angels there and shore with or. The visiter chamber clasp.</h1>
</a>
<p class="
u-block u-none@md
u-truncate
u-truncate-3
c-story__summary u-body-03 u-truncate u-mb-none ">Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.
</p>
</header>
</div>
</article>
</div>
<div class="c-header__focus u-size-1-2">
<article class="c-story c-story--inline-sm " data-channel="/notizie/">
<div class="c-story__media ">
<figure class="o-skeleton o-skeleton-media--responsive u-relative">
<a class="u-block u-size-full u-absolute u-left u-top" href="#">
<picture>
<source srcset="https://unsplash.it/600/338?random" media="(min-width: 740px)">
<img class="u-size-full" decoding="async" referrerpolicy="no-referrer" loading="lazy" src="https://unsplash.it/600/600?random" alt="Angels there and shore with or. The visiter chamber clasp.">
</picture>
</a>
</figure>
</div>
<div class="c-story__content u-relative">
<header class="c-story__header ">
<div class="c-story__kicker u-mb-xsmall">
<span class="u-label-02 ">Label</span>
</div>
<a class="o-link-text" href="#">
<h1 class="
u-truncate u-truncate-3
c-story__heading
u-heading-06
u-m-none">Angels there and shore with or. The visiter chamber clasp.</h1>
</a>
<p class="
u-block u-none@md
u-truncate
u-truncate-3
c-story__summary u-body-03 u-truncate u-mb-none ">Rebum takimata rebum est elitr eirmod voluptua consetetur lorem lorem. Clita ipsum invidunt rebum dolor ipsum clita duo labore, voluptua.
</p>
</header>
</div>
</article>
</div>
</div>
<div class="c-searchbar u-shadow-bottom u-z-upside u-size-full u-absolute u-px-base u-py-large is-hidden " data-search-bar>
<div class="o-container u-px-small@md">
<div class="u-relative">
<input class="u-size-full " type="text" placeholder="Cerca nel sito">
<button class="c-form-action c-btn c-btn--reset u-absolute u-cursor-pointer" type="submit">
<svg class="c-form-icon o-icon o-icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
</svg>
</button>
</div>
</div>
</div>
</header>
<main class="o-page">
<section class="o-container">
<div class="u-flex u-justify-between u-column u-row@md u-items-center@md">
<h1 class="u-title-03 u-m-none">Zone di Roma</h1>
<div class="u-relative">
<input class="u-size-full " type="text" placeholder="Cerca una zona">
<button class="c-form-action c-btn c-btn--reset u-absolute u-cursor-pointer" type="submit">
<svg class="c-form-icon o-icon o-icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-search"></use>
</svg>
</button>
</div>
</div>
<div class="u-flex u-items-center@md u-pb-medium u-pt-base u-wrap">
<span class="u-color-light u-label-04 u-text-03 u-py-xxsmall u-pr-small u-nowrap">Viste di recente</span>
<a href="#" class="u-no-underline o-link-text u-label-04 u-py-xxsmall u-pr-small u-nowrap">
Laurentina
</a>
<a href="#" class="u-no-underline o-link-text u-label-04 u-py-xxsmall u-pr-small u-nowrap">
San Giovanni
</a>
<a href="#" class="u-no-underline o-link-text u-label-04 u-py-xxsmall u-pr-small u-nowrap">
Centro Storico
</a>
<a href="#" class="u-no-underline o-link-text u-label-04 u-py-xxsmall u-pr-small u-nowrap">
Corviale
</a>
<a href="#" class="u-no-underline o-link-text u-label-04 u-py-xxsmall u-pr-small u-nowrap">
Conca d'Oro
</a>
</div>
<div class="u-flex u-justify-between u-row-reverse u-column@lg">
<div class="u-sticky u-top u-flex u-column u-row@lg u-pb-medium u-overflow-auto">
<a href="#" class="c-alphindex current u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
a
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
b
</a>
<a href="#" class="c-alphindex disabled u-cursor-not-allowed u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
c
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
d
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
e
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
f
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
g
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
h
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
i
</a>
<a href="#" class="c-alphindex disabled u-cursor-not-allowed u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
j
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
k
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
l
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
m
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
n
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
o
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
p
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
q
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
r
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
s
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
t
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
u
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
v
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
w
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
x
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
y
</a>
<a href="#" class="c-alphindex u-no-underline u-uppercase u-label-03 u-text-center u-py-small">
z
</a>
</div>
<div class="u-size-full u-pr-large u-pr-none@lg">
<div class="u-flex u-column u-row@md u-pb-base o-divider o-divider--top">
<span class="u-block u-title-01 u-uppercase u-mb-base u-size-1-6@md">a</span>
<div class="flex u-column u-size-1-3@md u-mr-small@md">
<span class="u-label-03 u-color-light u-uppercase">zona</span>
<ul class="u-list-none u-p-none l-list-border">
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Acilia</a>
<span class="u-label-07">( 15 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Africano</a>
<span class="u-label-07">( 13 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Alessandrino</a>
<span class="u-label-07">( 7 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Anagnina</a>
<span class="u-label-07">( 13 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Appio Latino</a>
<span class="u-label-07">( 24 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Ardeatino</a>
<span class="u-label-07">( 15 )</span>
</li>
</ul>
</div>
<div class="flex u-column u-size-1-3@md u-ml-small@md">
<span class="u-label-03 u-color-light u-uppercase">comune</span>
<ul class="u-list-none u-p-none l-list-border">
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Albano Laziale</a>
<span class="u-label-07">( 8 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Anguillara Sabazia</a>
<span class="u-label-07">( 1 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Anzio</a>
<span class="u-label-07">( 7 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Ardea</a>
<span class="u-label-07">( 8 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Ariccia</a>
<span class="u-label-07">( 5 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Arsoli</a>
<span class="u-label-07">( 1 )</span>
</li>
</ul>
</div>
</div>
<div class="u-flex u-column u-row@md u-pb-base o-divider o-divider--top">
<span class="u-block u-title-01 u-uppercase u-mb-base u-size-1-6@md">b</span>
<div class="flex u-column u-size-1-3@md u-mr-small@md">
<span class="u-label-03 u-color-light u-uppercase">zona</span>
<ul class="u-list-none u-p-none l-list-border">
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Acilia</a>
<span class="u-label-07">( 15 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Africano</a>
<span class="u-label-07">( 13 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Alessandrino</a>
<span class="u-label-07">( 7 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Anagnina</a>
<span class="u-label-07">( 13 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Appio Latino</a>
<span class="u-label-07">( 24 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Ardeatino</a>
<span class="u-label-07">( 15 )</span>
</li>
</ul>
</div>
<div class="flex u-column u-size-1-3@md u-ml-small@md">
<span class="u-label-03 u-color-light u-uppercase">comune</span>
<ul class="u-list-none u-p-none l-list-border">
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Albano Laziale</a>
<span class="u-label-07">( 8 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Anguillara Sabazia</a>
<span class="u-label-07">( 1 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Anzio</a>
<span class="u-label-07">( 7 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Ardea</a>
<span class="u-label-07">( 8 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Ariccia</a>
<span class="u-label-07">( 5 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Arsoli</a>
<span class="u-label-07">( 1 )</span>
</li>
</ul>
</div>
</div>
<div class="u-flex u-column u-row@md u-pb-base o-divider o-divider--top">
<span class="u-block u-title-01 u-uppercase u-mb-base u-size-1-6@md">c</span>
<div class="flex u-column u-size-1-3@md u-mr-small@md">
<span class="u-label-03 u-color-light u-uppercase">zona</span>
<ul class="u-list-none u-p-none l-list-border">
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Acilia</a>
<span class="u-label-07">( 15 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Africano</a>
<span class="u-label-07">( 13 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Alessandrino</a>
<span class="u-label-07">( 7 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Anagnina</a>
<span class="u-label-07">( 13 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Appio Latino</a>
<span class="u-label-07">( 24 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Ardeatino</a>
<span class="u-label-07">( 15 )</span>
</li>
</ul>
</div>
<div class="flex u-column u-size-1-3@md u-ml-small@md">
<span class="u-label-03 u-color-light u-uppercase">comune</span>
<ul class="u-list-none u-p-none l-list-border">
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Albano Laziale</a>
<span class="u-label-07">( 8 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Anguillara Sabazia</a>
<span class="u-label-07">( 1 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Anzio</a>
<span class="u-label-07">( 7 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Ardea</a>
<span class="u-label-07">( 8 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Ariccia</a>
<span class="u-label-07">( 5 )</span>
</li>
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">Arsoli</a>
<span class="u-label-07">( 1 )</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</main>
{% render "@toolbar" %}
{% render "@header--local", {channel:false}, true %}
<main class="o-page">
<section class="o-container">
<div class="u-flex u-justify-between u-column u-row@md u-items-center@md">
<h1 class="u-title-03 u-m-none">Zone di Roma</h1>
{% render "@action--default", {placeholder:'Cerca una zona', label:false, helper:false}, true %}
</div>
<div class="u-flex u-items-center@md u-pb-medium u-pt-base u-wrap">
<span class="u-color-light u-label-04 u-text-03 u-py-xxsmall u-pr-small u-nowrap">Viste di recente</span>
{% for i in last_zones %}
<a href="#" class="u-no-underline o-link-text u-label-04 u-py-xxsmall u-pr-small u-nowrap">
{{i}}
</a>
{% endfor %}
</div>
<div class="u-flex u-justify-between u-row-reverse u-column@lg">
{% render "@alphindex" %}
<div class="u-size-full u-pr-large u-pr-none@lg">
{% for l in letters %}
<div class="u-flex u-column u-row@md u-pb-base o-divider o-divider--top">
<span class="u-block u-title-01 u-uppercase u-mb-base u-size-1-6@md">{{l.glifo}}</span>
<div class="flex u-column u-size-1-3@md u-mr-small@md">
<span class="u-label-03 u-color-light u-uppercase">zona</span>
<ul class="u-list-none u-p-none l-list-border">
{% for z in zones %}
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">{{z.name}}</a>
<span class="u-label-07">( {{z.number}} )</span>
</li>
{% endfor %}
</ul>
</div>
<div class="flex u-column u-size-1-3@md u-ml-small@md">
<span class="u-label-03 u-color-light u-uppercase">comune</span>
<ul class="u-list-none u-p-none l-list-border">
{% for c in cities %}
<li class="u-flex u-justify-between">
<a href="#" class="o-link-text u-label-04">{{c.name}}</a>
<span class="u-label-07">( {{c.number}} )</span>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
</main>
{
"last_zones": [
"Laurentina",
"San Giovanni",
"Centro Storico",
"Corviale",
"Conca d'Oro"
],
"zones": [
{
"name": "Acilia",
"number": 15
},
{
"name": "Africano",
"number": 13
},
{
"name": "Alessandrino",
"number": 7
},
{
"name": "Anagnina",
"number": 13
},
{
"name": "Appio Latino",
"number": 24
},
{
"name": "Ardeatino",
"number": 15
}
],
"cities": [
{
"name": "Albano Laziale",
"number": 8
},
{
"name": "Anguillara Sabazia",
"number": 1
},
{
"name": "Anzio",
"number": 7
},
{
"name": "Ardea",
"number": 8
},
{
"name": "Ariccia",
"number": 5
},
{
"name": "Arsoli",
"number": 1
}
],
"letters": [
{
"glifo": "a"
},
{
"glifo": "b"
},
{
"glifo": "c"
}
]
}
No notes defined.