---
layout: base
comuni: true
title: Template Argomenti
---

{%- assign section = "argomenti" -%} {%- include esempi/comuni/header.html -%}

<main>
  <div class="container px-4 my-4">
    <div class="row">
      <div class="col px-lg-2">
        <nav class="breadcrumb-container" aria-label="Percorso di navigazione">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ site.baseurl }}/docs/esempi/comuni/template-homepage/">Home</a><span class="separator">/</span></li>
            <li class="breadcrumb-item active">
              <span>Lista Argomenti</span>
            </li>
          </ol>
        </nav>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-7 px-lg-2 py-lg-2">
        <div class="row">
          <div class="col">
            <h1>Argomenti</h1>
            <p>
              Gli argomenti rispondono a un'esigenza di organizzazione dei contenuti del sito istituzionale per temi e rappresentano le principali categorie di
              contenuti, informazioni e documenti specifici.
            </p>
          </div>
        </div>
        <div class="row">
          <div class="col py-5">
            <div class="input-search-wrapper">
              <div class="input-group">
                <input class="form-control" id="input-1" type="text" placeholder="Cerca argomenti" aria-label="Cerca argomenti" />
                <div class="input-group-append">
                  <button class="btn btn-primary btn-icon" type="button" id="button-search" role="button" aria-label="button-search">
                    <svg class="icon icon-white">
                      <use xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-search"></use>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col pb-5">
            <h6><small>Filtri</small></h6>
            <button type="button" class="btn btn-primary btn-sm">Tutto</button>
            <button type="button" class="btn btn-outline-primary btn-sm">...</button>
          </div>
        </div>
      </div>
      <div class="col-lg-3 offset-lg-2">
        <div class="link-list-wrapper mt-3">
          <ul class="link-list">
            <li>
              <h3 class="text-uppercase">Più consultati</h3>
            </li>
            <li>
              <a class="list-item" href="#"><span>Muoversi</span></a>
            </li>
            <li>
              <a class="list-item" href="#"><span>La città che cambia</span></a>
            </li>
            <li>
              <a class="list-item" href="#"><span>Cultura</span></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <script>
    // attende che vengano caricate le immagini
    Promise.all(
      Array.from(document.images)
        .filter((img) => !img.complete)
        .map(
          (img) =>
            new Promise((resolve) => {
              img.onload = img.onerror = resolve
            })
        )
    ).then(() => {
      //console.log('images finished loading');
    })
  </script>
  <section id="in-evidenza">
    <div class="section section-muted section-inset-shadow">
      <div class="section-content">
        <div class="row mb-lg-4">
          <div class="col">
            <h3>In evidenza</h3>
          </div>
        </div>
        <div class="row it-masonry" data-bs-toggle="masonry">
          <!--  data-masonry='{"percentPosition": true }' -->
          <div class="col-sm-6 col-lg-4 mb-4">
            <div class="it-grid-item-wrapper it-grid-item-overlay">
              <a href="#">
                <div class="img-responsive-wrapper">
                  <div class="img-responsive">
                    <div class="img-wrapper">
                      <img src="https://picsum.photos/376/488" alt="descrizione immagine" title="Image Title" />
                    </div>
                  </div>
                </div>
                <span class="it-griditem-text-wrapper">
                  <h3>Cultura</h3>
                </span>
              </a>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4 mb-4">
            <div class="it-grid-item-wrapper it-grid-item-overlay">
              <a href="#">
                <div class="img-responsive-wrapper">
                  <div class="img-responsive">
                    <div class="img-wrapper">
                      <img src="https://picsum.photos/376/184" alt="descrizione immagine" title="Image Title" />
                    </div>
                  </div>
                </div>
                <span class="it-griditem-text-wrapper">
                  <h3>Lavorare</h3>
                </span>
              </a>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4 mb-4">
            <div class="it-grid-item-wrapper it-grid-item-overlay">
              <a href="#">
                <div class="img-responsive-wrapper">
                  <div class="img-responsive">
                    <div class="img-wrapper">
                      <img src="https://picsum.photos/376/264" alt="descrizione immagine" title="Image Title" />
                    </div>
                  </div>
                </div>
                <span class="it-griditem-text-wrapper">
                  <h3>Spazi verdi</h3>
                </span>
              </a>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4 mb-4">
            <div class="it-grid-item-wrapper it-grid-item-overlay">
              <a href="#">
                <div class="img-responsive-wrapper">
                  <div class="img-responsive">
                    <div class="img-wrapper">
                      <img src="https://picsum.photos/376/489" alt="descrizione immagine" title="Image Title" />
                    </div>
                  </div>
                </div>
                <span class="it-griditem-text-wrapper">
                  <h3 class="shadow">Famiglia</h3>
                </span>
              </a>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4 mb-4">
            <div class="it-grid-item-wrapper it-grid-item-overlay">
              <a href="#">
                <div class="img-responsive-wrapper">
                  <div class="img-responsive">
                    <div class="img-wrapper">
                      <img src="https://picsum.photos/376/144" alt="descrizione immagine" title="Image Title" />
                    </div>
                  </div>
                </div>
                <span class="it-griditem-text-wrapper">
                  <h3>Partecipare</h3>
                </span>
              </a>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4 mb-4">
            <div class="it-grid-item-wrapper it-grid-item-overlay">
              <a href="#">
                <div class="img-responsive-wrapper">
                  <div class="img-responsive">
                    <div class="img-wrapper">
                      <img src="https://picsum.photos/376/274" alt="descrizione immagine" title="Image Title" />
                    </div>
                  </div>
                </div>
                <span class="it-griditem-text-wrapper">
                  <h3>Muoversi</h3>
                </span>
              </a>
            </div>
          </div>
          <div class="col-sm-6 col-lg-4 mb-4">
            <div class="it-grid-item-wrapper it-grid-item-overlay">
              <a href="#">
                <div class="img-responsive-wrapper">
                  <div class="img-responsive">
                    <div class="img-wrapper">
                      <img src="https://picsum.photos/376/185" alt="descrizione immagine" title="Image Title" />
                    </div>
                  </div>
                </div>
                <span class="it-griditem-text-wrapper">
                  <h3>Sport</h3>
                </span>
              </a>
            </div>
          </div>
        </div>
        <div class="row mt-lg-2">
          <div class="col">
            <nav class="pagination-wrapper justify-content-center" aria-label="Esempio di navigazione della pagina">
              <ul class="pagination">
                <li class="page-item">
                  <a class="page-link" href="#">
                    <svg class="icon icon-primary">
                      <use xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-chevron-left"></use>
                    </svg>
                    <span class="visually-hidden">Pagina precedente</span>
                  </a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="#" aria-current="page">1</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                  <a class="page-link" href="#">
                    <span class="visually-hidden">Pagina successiva</span>
                    <svg class="icon icon-primary">
                      <use xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-chevron-right"></use>
                    </svg>
                  </a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="tutti-gli-argomenti">
    <div class="section">
      <div class="section-content">
        <div class="row">
          <div class="col">
            <h3>Tutti gli argomenti</h3>
          </div>
        </div>
        <div class="row mt-lg-4">
          <div class="col">
            <div class="card-wrapper card-teaser-wrapper card-teaser-wrapper-equal card-teaser-block-3">
              <div class="card card-teaser rounded shadow align-items-center">
                <svg class="icon"><use xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-help-circle"></use></svg>
                <div class="card-body">
                  <h5 class="card-title mb-0">
                    <a href="#">Agevolazioni per la casa</a>
                  </h5>
                </div>
              </div>
              <div class="card card-teaser rounded shadow align-items-center">
                <svg class="icon"><use xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-help-circle"></use></svg>
                <div class="card-body">
                  <h5 class="card-title mb-0">
                    <a href="#">Animali</a>
                  </h5>
                </div>
              </div>
              <div class="card card-teaser rounded shadow align-items-center">
                <svg class="icon"><use xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-help-circle"></use></svg>
                <div class="card-body">
                  <h5 class="card-title mb-0">
                    <a href="#">Anziani</a>
                  </h5>
                </div>
              </div>
              <div class="card card-teaser rounded shadow align-items-center">
                <svg class="icon"><use xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-help-circle"></use></svg>
                <div class="card-body">
                  <h5 class="card-title mb-0">
                    <a href="#">Assistenza e inclusione</a>
                  </h5>
                </div>
              </div>
              <div class="card card-teaser rounded shadow align-items-center">
                <svg class="icon"><use xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-help-circle"></use></svg>
                <div class="card-body">
                  <h5 class="card-title mb-0">
                    <a href="#">Associazioni</a>
                  </h5>
                </div>
              </div>
              <div class="card card-teaser rounded shadow align-items-center">
                <svg class="icon"><use xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-help-circle"></use></svg>
                <div class="card-body">
                  <h5 class="card-title mb-0">
                    <a href="#">Bambini e ragazzi</a>
                  </h5>
                </div>
              </div>
              <div class="card card-teaser rounded shadow align-items-center">
                <svg class="icon"><use xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-help-circle"></use></svg>
                <div class="card-body">
                  <h5 class="card-title mb-0">
                    <a href="#">Cantieri e progetti</a>
                  </h5>
                </div>
              </div>
              <div class="card card-teaser rounded shadow align-items-center">
                <svg class="icon"><use xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-help-circle"></use></svg>
                <div class="card-body">
                  <h5 class="card-title mb-0">
                    <a href="#">Comune</a>
                  </h5>
                </div>
              </div>
              <div class="card card-teaser rounded shadow align-items-center">
                <svg class="icon"><use xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-help-circle"></use></svg>
                <div class="card-body">
                  <h5 class="card-title mb-0">
                    <a href="#">Comunicare con il Comune</a>
                  </h5>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row mt-lg-4">
          <div class="col">
            <nav class="pagination-wrapper justify-content-center" aria-label="Esempio di navigazione della pagina">
              <ul class="pagination">
                <li class="page-item">
                  <a class="page-link" href="#">
                    <svg class="icon icon-primary">
                      <use xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-chevron-left"></use>
                    </svg>
                    <span class="visually-hidden">Pagina precedente</span>
                  </a>
                </li>
                <li class="page-item">
                  <a class="page-link" href="#" aria-current="page">1</a>
                </li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">4</a></li>
                <li class="page-item"><a class="page-link" href="#">5</a></li>
                <li class="page-item">
                  <a class="page-link" href="#">
                    <span class="visually-hidden">Pagina successiva</span>
                    <svg class="icon icon-primary">
                      <use xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-chevron-right"></use>
                    </svg>
                  </a>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

{%- include esempi/comuni/footer.html -%}