Home
La homepage si presenta come punto di riferimento dell’app. Nelle varianti in primo piano, la versione per utenti autenticati, mentre sul retro sono riportati esempi di call to action per l’accesso.
La navigazione di un’applicazione può avvenire attraverso due modalità principali: il Burger menu e la bottom navigation.
A - Burger Menu
B - Bottom bar
Componenti
Titolo
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Titolo
-
NewlsetterLorem ipsum dolor sit amet.
Titolo Sezione
Burger menu chiuso
- Ciao Mario
-
NewlsetterLorem ipsum dolor sit amet.
Titolo Sezione
Titolo
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Burger menu aperto
Header con card
Ciao Mario
Lorem ipsum dolor sit amet, consectetur adipiscing...
<h5 class="fw-bold">Burger menu chiuso</h5>
<div class="it-header-center-wrapper it25-barra-ist-mobile">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="it-brand-wrapper">
<div class="it25-hamburger-btn-wrapper">
<button
id="btn-hamburger-mobile19"
aria-controls="it25-main-nav"
aria-expanded="false"
aria-label="Apri menù"
class="custom-navbar-toggler btn btn-xs it25-btn-menu"
data-bs-target="#it25-main-nav"
type="button"
>
<svg class="icon icon-sm icon-primary">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-burger"></use>
</svg>
</button>
</div>
<div class="it-brand-text secondary-gray-color">Home</div>
</div>
<div class="it-right-zone">
<div class="icon neutral-1-color f-12 ">
<svg class="icon icon-sm icon-primary">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-help-circle-fill"></use>
</svg>
Aiuto
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="it25-mobile">
<div id="it25-nav-hamburger19" class="overlay">
<button id="it25-close-hamburger19" type="button" class="btn-close close-overlay" aria-label="Close"></button>
<div class="overlay-content">
<div class="overlay-body">
<div class="row">
<div class="col"><div class="card-wrapper it25-profile">
<div class="card header">
<div class="card-body">
<div class="card-title">
<div class="icon-user me-2">
<svg class="icon icon-lg icon-white">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-user"></use>
</svg>
</div>
<span class="user-info">Mario Rossi</span>
<span class="user-email">mariorossi@lispa.it</span>
</div>
<p class="card-text user-button d-none">
<button type="button" class="btn white-bg">
<svg class="icon icon-primary ms-1">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-pencil"></use>
</svg>
<span>Modifica</span>
</button>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col"><div class="link-list-wrapper it25-menu-mobile">
<ul class="link-list">
<li>
<a href="#" class="list-item">
<svg class="icon icon-xs">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image-gray"></use>
</svg>
<span class="text">Home</span>
</a>
</li>
<li><span class="divider"></span></li>
<li>
<a href="#" class="list-item">
<svg class="icon icon-xs">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image-gray"></use>
</svg>
<span class="text">Voce 1</span>
</a>
</li>
<li>
<a href="#" class="list-item">
<svg class="icon icon-xs">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image-gray"></use>
</svg>
<span class="text">Voce 2</span>
</a>
</li>
<li>
<a href="#" class="list-item">
<svg class="icon icon-xs">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image-gray"></use>
</svg>
<span class="text">Voce 3</span>
</a>
</li>
<li><span class="divider"></span></li>
<li>
<a href="#" class="list-item">
<svg class="icon icon-xs">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image-gray"></use>
</svg>
<span class="text">Note Legali</span>
</a>
</li>
<li><span class="divider"></span></li>
<li>
<a href="#" class="list-item">
<svg class="icon icon-xs">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image-gray"></use>
</svg>
<span class="text">Informazioni</span>
</a>
</li>
<li>
<a href="#" class="list-item">
<svg class="icon icon-xs">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image-gray"></use>
</svg>
<span class="text">Contatti</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="overlay-footer">
<a href="#">
<img src="/bootstrap-lombardia/dist/assets/img/logo-rl.png" alt="logo regione lombardia" width="95" />
</a>
</div>
</div>
</div>
</div>
<div class="row mt-3 px-3">
<div class="col-xs-12">
<div class="container-mobile">
<ul class="section">
<li class="f-30 fw-bold primary-color">Ciao Mario</li>
<li class="f-20 fw-bold"></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 mt-3 px-4"><div class="card-wrapper it25-info-box">
<div class="card">
<div class="card-body">
<ul class="list-box">
<li class="me-3">
<svg class="icon icon-lg icon-primary">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-newsletter"></use>
</svg>
</li>
<li class="textbox">
<div class="text">Newlsetter</div>
<div>Lorem ipsum dolor sit amet.</div>
</li>
<li class="link">
<button type="button" class="btn-close btn-xs" aria-label="Close"></button>
<svg class="icon icon-xs">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#"></use>
</svg>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3 px-3">
<div class="col"><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">Azione</h3>
</a>
</div>
</div>
</div>
</div>
<div class="col"><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">Azione</h3>
</a>
</div>
</div>
</div>
</div>
<div class="col"><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">Azione</h3>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3 px-3">
<div class="col-xs-12"><div class="card-wrapper it25-info-box">
<div class="card">
<div class="card-body">
<div class="card-title header">
<span class="title">Titolo Sezione</span>
</div>
<div class="it-card-footer justify-content-end">
<a class="read-more" href="#">
<span class="text fw-normal">Scopri di più</span>
<svg class="icon">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-chevron-right"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3 px-3 pb-3">
<div class="col-xs-12"><div class="card-wrapper it25-info-box">
<div class="card">
<div class="card-body">
<div class="card-title header">
<span class="title">Titolo</span>
<div class="icon-box me-2 d-none">
<svg class="icon icon-sm">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-warning-blue"></use>
</svg>
</div>
</div>
<p class="card-text box-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
</div>
</div>
<nav class="toolbar it25-toolbar">
<ul>
<li>
<a href="#" class="active">
<svg class="icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-home-circle"></use></svg>
<span class="toolbar-label">Home</span>
</a>
</li>
<li>
<a href="#">
<svg class="icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-wallet-circle"></use></svg>
<span class="toolbar-label">Wallet</span>
</a>
</li>
<li>
<a href="#">
<svg class="icon icon-sm"><use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-user-circle"></use></svg>
<span class="toolbar-label">Profilo</span>
</a>
</li>
</ul>
</nav>
<h5 class="fw-bold">Header con card</h5>
<div class="radial-2 pb-5">
<div class="it-header-center-wrapper it25-barra-ist-mobile it25-gradient">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="it-header-center-content-wrapper">
<div class="it-brand-wrapper">
<div class="it25-hamburger-btn-wrapper">
<button
id="btn-hamburger-mobile"
aria-controls="it25-main-nav"
aria-expanded="false"
aria-label="Apri menù"
class="custom-navbar-toggler btn btn-xs it25-btn-menu"
data-bs-target="#it25-main-nav"
type="button"
>
<svg class="icon icon-sm icon-white">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-burger"></use>
</svg>
</button>
</div>
<div class="it-brand-text"></div>
</div>
<div class="it-right-zone">
<div class="icon icon-white f-12 white-color">
<svg class="icon icon-sm icon-white">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-help-circle-fill-white"></use>
</svg>
Aiuto
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="it25-mobile">
<div id="it25-nav-hamburger24" class="overlay">
<button id="it25-close-hamburger24" type="button" class="btn-close close-overlay" aria-label="Close"></button>
<div class="overlay-content">
<div class="overlay-body">
<div class="row">
<div class="col"><div class="card-wrapper it25-profile">
<div class="card header">
<div class="card-body">
<div class="card-title">
<div class="icon-user me-2">
<svg class="icon icon-lg icon-white">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-user"></use>
</svg>
</div>
<span class="user-info">Mario Rossi</span>
<span class="user-email">mariorossi@lispa.it</span>
</div>
<p class="card-text user-button d-none">
<button type="button" class="btn white-bg">
<svg class="icon icon-primary ms-1">
<use href="/bootstrap-lombardia/dist/svg/sprites.svg#it-pencil"></use>
</svg>
<span>Modifica</span>
</button>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col"><div class="link-list-wrapper it25-menu-mobile">
<ul class="link-list">
<li>
<a href="#" class="list-item">
<svg class="icon icon-xs">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image-gray"></use>
</svg>
<span class="text">Home</span>
</a>
</li>
<li><span class="divider"></span></li>
<li>
<a href="#" class="list-item">
<svg class="icon icon-xs">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image-gray"></use>
</svg>
<span class="text">Voce 1</span>
</a>
</li>
<li>
<a href="#" class="list-item">
<svg class="icon icon-xs">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image-gray"></use>
</svg>
<span class="text">Voce 2</span>
</a>
</li>
<li>
<a href="#" class="list-item">
<svg class="icon icon-xs">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image-gray"></use>
</svg>
<span class="text">Voce 3</span>
</a>
</li>
<li><span class="divider"></span></li>
<li>
<a href="#" class="list-item">
<svg class="icon icon-xs">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image-gray"></use>
</svg>
<span class="text">Note Legali</span>
</a>
</li>
<li><span class="divider"></span></li>
<li>
<a href="#" class="list-item">
<svg class="icon icon-xs">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image-gray"></use>
</svg>
<span class="text">Informazioni</span>
</a>
</li>
<li>
<a href="#" class="list-item">
<svg class="icon icon-xs">
<use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-image-gray"></use>
</svg>
<span class="text">Contatti</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="overlay-footer">
<a href="#">
<img src="/bootstrap-lombardia/dist/assets/img/logo-rl.png" alt="logo regione lombardia" width="95" />
</a>
</div>
</div>
</div>
</div>
<div class="row px-4">
<div class="col-xs-12 mt-3">
<div class="f-30 fw-bold white-color">Ciao Mario</div>
</div>
</div>
<div class="row px-4 py-2">
<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>
<div class="row px-4 py-2">
<div class="col-6 mt-3"><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-6 mt-3"><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 class="row px-4 py-3">
<div class="col-6 mt-3"><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-6 mt-3"><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>
<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>