Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Pagina di sezione

Le pagine di sezione raccolgono informazioni in molteplici modalità tra cui elenchi verticali, tabelle e componenti a scorrimento laterale.

Di seguito sono riportati due esempi con livelli di complessità differenti. Nel primo caso il titolo precede una sezione di ricerca seguita da un elenco. Nel secondo caso, lo scorrimento laterale di vari elementi divisi per categorie permette una navigazione semplice della pagina.

Componenti

Lorem ipsum dolor sit amet, consectetur adipiscing...

Lorem ipsum 19/05
Lorem ipsum dolor sit amet

Titolo Sezione
Pagina di sezione informativa
foo
Lorem ipsum
Aiuto
  • Titolo
Lorem ipsum 19/05
Lorem ipsum dolor sit amet
Lorem ipsum 19/05
Lorem ipsum dolor sit amet
Lorem ipsum 19/05
Lorem ipsum dolor sit amet
Lorem ipsum 19/05
Lorem ipsum dolor sit amet
Lorem ipsum 19/05
Lorem ipsum dolor sit amet
Lorem ipsum 19/05
Lorem ipsum dolor sit amet
Pagina di sezione dinamica
foo
Indietro
  • Titolo

Lorem ipsum dolor sit amet, consectetur adipiscing...

  • Titolo
Lorem ipsum
Lorem ipsum
Lorem ipsum

Titolo Sezione

Titolo Sezione

Titolo Sezione

 
<h5 class="fw-bold">Pagina di sezione informativa</h5>
<div class="card-wrapper it25-info-box">
  <div class="card">
    <div class="form-group autocomplete-wrapper it25-search">
      <label for="autocomplete-two" class="visually-hidden">Cerca argomenti</label>
      <input type="search" class="autocomplete" placeholder="Cerca argomenti" id="autocomplete-two07" name="autocomplete-two07" data-bs-autocomplete="[]" aria-label="ricerca con autocompletamento"/>
      <span class="autocomplete-icon" aria-hidden="true">
        <svg class="icon icon-sm black-color"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-search"></use></svg>
      </span>
      <ul class="autocomplete-list" id="testAutocomplete207">
        <li>
          <a href="#">
            <div class="avatar size-sm">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Paola Pistoia" />
            </div>
            <span class="autocomplete-list-text">
              <span>Paola <mark>Pi</mark>stoia</span><em>Profilo</em>
            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="avatar size-sm">
              <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Pierluigi Rossi" />
            </div>
            <span class="autocomplete-list-text">
              <span><mark>Pi</mark>erluigi Rossi</span><em>Profilo</em>
            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <svg class="icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-pa"></use></svg>
            <span class="autocomplete-list-text">
              <span>Comune di <mark>Pi</mark>sa</span><em>Amministrazione</em>
            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <svg class="icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-file"></use></svg>
            <span class="autocomplete-list-text"> <span>Linee guida per i cataloghi pubblica amministrazione</span><em>Documento</em> </span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

 <div class="row">
  <div class="col-xs-12 px-4 py-2">
    <div class="container-mobile">
      <ul class="section">
        <li class="f-30 fw-bold">Titolo</li>
        <li class="f-20 fw-bold"></li>
      </ul>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 mt-3"><div class="card-wrapper it25-info-box">
  <div class="card">
    <div class="form-group autocomplete-wrapper it25-search">
      <label for="autocomplete-two" class="visually-hidden">Cerca argomenti</label>
      <input type="search" class="autocomplete" placeholder="Cerca argomenti" id="autocomplete-two" name="autocomplete-two" data-bs-autocomplete="[]" aria-label="ricerca con autocompletamento"/>
      <span class="autocomplete-icon" aria-hidden="true">
        <svg class="icon icon-sm black-color"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-search"></use></svg>
      </span>
      <ul class="autocomplete-list" id="testAutocomplete2">
        <li>
          <a href="#">
            <div class="avatar size-sm">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Paola Pistoia" />
            </div>
            <span class="autocomplete-list-text">
              <span>Paola <mark>Pi</mark>stoia</span><em>Profilo</em>
            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="avatar size-sm">
              <img src="https://randomuser.me/api/portraits/men/46.jpg" alt="Pierluigi Rossi" />
            </div>
            <span class="autocomplete-list-text">
              <span><mark>Pi</mark>erluigi Rossi</span><em>Profilo</em>
            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <svg class="icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-pa"></use></svg>
            <span class="autocomplete-list-text">
              <span>Comune di <mark>Pi</mark>sa</span><em>Amministrazione</em>
            </span>
          </a>
        </li>
        <li>
          <a href="#">
            <svg class="icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-file"></use></svg>
            <span class="autocomplete-list-text"> <span>Linee guida per i cataloghi pubblica amministrazione</span><em>Documento</em> </span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>
</div>
</div>
<div class="row">
  <div class="col-xs-12 mt-3"><div class="card-wrapper it25-info-box">
  <div class="card">
    <div class="card-body">
      <div class="card-title it25-box-header">
        <span class="title">Lorem ipsum</span>
        <span class="f-16">19/05</span>
      </div>
      <div class="card-text it25-box-body">
        <span class="text"> Lorem ipsum dolor sit amet </span>
        <button class="action" aria-label="foo">
          <svg class="icon">
            <use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-chevron-right"></use>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>
</div>
</div>
<div class="row">
  <div class="col-xs-12 mt-3"><div class="card-wrapper it25-info-box">
  <div class="card">
    <div class="card-body">
      <div class="card-title it25-box-header">
        <span class="title">Lorem ipsum</span>
        <span class="f-16">19/05</span>
      </div>
      <div class="card-text it25-box-body">
        <span class="text"> Lorem ipsum dolor sit amet </span>
        <button class="action" aria-label="foo">
          <svg class="icon">
            <use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-chevron-right"></use>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>
</div>
</div>
<div class="row">
  <div class="col-xs-12 mt-3"><div class="card-wrapper it25-info-box">
  <div class="card">
    <div class="card-body">
      <div class="card-title it25-box-header">
        <span class="title">Lorem ipsum</span>
        <span class="f-16">19/05</span>
      </div>
      <div class="card-text it25-box-body">
        <span class="text"> Lorem ipsum dolor sit amet </span>
        <button class="action" aria-label="foo">
          <svg class="icon">
            <use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-chevron-right"></use>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>
</div>
</div>
<div class="row">
  <div class="col-xs-12 mt-3"><div class="card-wrapper it25-info-box">
  <div class="card">
    <div class="card-body">
      <div class="card-title it25-box-header">
        <span class="title">Lorem ipsum</span>
        <span class="f-16">19/05</span>
      </div>
      <div class="card-text it25-box-body">
        <span class="text"> Lorem ipsum dolor sit amet </span>
        <button class="action" aria-label="foo">
          <svg class="icon">
            <use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-chevron-right"></use>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>
</div>
</div>
<div class="row">
  <div class="col-xs-12 mt-3"><div class="card-wrapper it25-info-box">
  <div class="card">
    <div class="card-body">
      <div class="card-title it25-box-header">
        <span class="title">Lorem ipsum</span>
        <span class="f-16">19/05</span>
      </div>
      <div class="card-text it25-box-body">
        <span class="text"> Lorem ipsum dolor sit amet </span>
        <button class="action" aria-label="foo">
          <svg class="icon">
            <use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-chevron-right"></use>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>
</div>
</div>
<div class="row">
  <div class="col-xs-12 mt-3"><div class="card-wrapper it25-info-box">
  <div class="card">
    <div class="card-body">
      <div class="card-title it25-box-header">
        <span class="title">Lorem ipsum</span>
        <span class="f-16">19/05</span>
      </div>
      <div class="card-text it25-box-body">
        <span class="text"> Lorem ipsum dolor sit amet </span>
        <button class="action" aria-label="foo">
          <svg class="icon">
            <use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-chevron-right"></use>
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>
</div>
</div>

<h5 class="fw-bold">Pagina di sezione dinamica</h5>
   <div class="row">
  <div class="col-xs-12 px-4 py-2">
    <div class="container-mobile">
      <ul class="section">
        <li class="f-30 fw-bold">Titolo</li>
        <li class="f-20 fw-bold"></li>
      </ul>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-xs-12 mt-3"><div class="card-wrapper it25-info-box ">
  <div class="card">
    <div class="card-body">
      <div class="my-1">
        <svg class="icon icon-sm primary-blue-fill"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image"></use></svg>
      </div>
       
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing...</p>
      
    </div>
  </div>
</div>
</div>
</div>
<div class="row">
  <div class="col-xs-12 px-4 py-2">
    <div class="container-mobile">
      <ul class="section">
        <li class="f-30 fw-bold">Titolo</li>
        <li class="f-20 fw-bold"></li>
      </ul>
    </div>
  </div>
</div>
<div class="horizontal-scroll-example">
  <div class="row">
    <div class="col-4">
      <span class="primary-blue-color f-14"> <div class="card-wrapper it25-info-box ">
  <div class="card">
    <div class="card-body text-center">
      <svg class="icon icon-lg primary-blue-fill"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image"></use></svg>
    </div>
  </div>
</div>
 Lorem ipsum </span>
    </div>
    <div class="col-4"><span class="primary-blue-color f-14"> <div class="card-wrapper it25-info-box ">
  <div class="card">
    <div class="card-body text-center">
      <svg class="icon icon-lg primary-blue-fill"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image"></use></svg>
    </div>
  </div>
</div>
 Lorem ipsum </span></div>
    <div class="col-4"><span class="primary-blue-color f-14"> <div class="card-wrapper it25-info-box ">
  <div class="card">
    <div class="card-body text-center">
      <svg class="icon icon-lg primary-blue-fill"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image"></use></svg>
    </div>
  </div>
</div>
 Lorem ipsum </span></div>
  </div>
</div>
<div class="horizontal-scroll-example">
  <div class="row">
    <div class="col-4"><div class="card-wrapper it25-info-box card-sm">
  <div class="card">
    <div class="card-body">
      <div class="my-1">
        <svg class="icon icon-sm primary-blue-fill"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image"></use></svg>
      </div>
      
      <a href="#">
        <h3 class="card-title h5 primary-blue-color">Titolo Sezione</h3>
      </a>
       
    </div>
  </div>
</div>
</div>
    <div class="col-4"><div class="card-wrapper it25-info-box card-sm">
  <div class="card">
    <div class="card-body">
      <div class="my-1">
        <svg class="icon icon-sm primary-blue-fill"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image"></use></svg>
      </div>
      
      <a href="#">
        <h3 class="card-title h5 primary-blue-color">Titolo Sezione</h3>
      </a>
       
    </div>
  </div>
</div>
</div>
    <div class="col-4"><div class="card-wrapper it25-info-box card-sm">
  <div class="card">
    <div class="card-body">
      <div class="my-1">
        <svg class="icon icon-sm primary-blue-fill"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image"></use></svg>
      </div>
      
      <a href="#">
        <h3 class="card-title h5 primary-blue-color">Titolo Sezione</h3>
      </a>
       
    </div>
  </div>
</div>
</div>
  </div>
</div>

   <nav class="toolbar it25-toolbar-section">
  <ul>
    <li>
      <a href="#" class="active">
        <svg class="icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image"></use></svg>
        <span class="toolbar-label">Sezione 1</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image"></use></svg>
        <span class="toolbar-label">Sezione 2</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image"></use></svg>
        <span class="toolbar-label">Sezione 3</span>
      </a>
    </li>
    <li>
      <a href="#">
        <svg class="icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image"></use></svg>
        <span class="toolbar-label">Sezione 4</span>
      </a>
    </li>
  </ul>
</nav>