Pagina di dettaglio
I template della pagina di Dettaglio, come quelli della pagina Assistenza, possono essere utilizzati nel caso della progettazione di pagine con diversi livelli di complessità.
A - Pagina di dettaglio informativa
Per dettagli con basso livello di complessità.
B - Pagina di dettaglio dinamica
Per dettagli interattivi e multimediali.
Pagina di dettaglio informativa
Titolo del contenuto della pagina di dettaglio
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum."
Pagina di dettaglio dinamica
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.
<h5 class= "fw-bold" > Pagina di dettaglio informativa</h5>
<section class= "it25-section-mobile" aria-describedby= "titleEx1" >
<div class= "section-content" >
<div class= "container" >
<div class= "row mb-3" >
<div class= "col-12" >
<span class= "f-30 fw-bold" > Titolo del contenuto della pagina di dettaglio</span>
</div>
</div>
<div class= "row" >
<div class= "col-12 pe-0 mb-3 font-serif f-16 pe-md-3" >
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum."
</div>
</div>
</div>
</div>
</section>
<h5 class= "fw-bold" > Pagina di dettaglio dinamica</h5>
<section class= "it25-section-mobile" aria-describedby= "titleEx1" >
<div class= "section-content" >
<div class= "container" >
<div class= "row mb-3" >
<div class= "col-12" >
<img src= "/bootstrap-lombardia/dist/assets/img/image-bg.png" alt= "foo" />
</div>
</div>
<div class= "row mb-3" >
<div class= "col-12" >
<span class= "f-30 fw-bold" > Lorem ipsum dolor</span>
</div>
</div>
<div class= "row" >
<div class= "col-12 pe-0 mb-3 font-serif f-16 pe-md-3" >
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.
</div>
</div>
<div class= "row" >
<div class= "col-4" ><div class= "card-wrapper it25-info-box card-sm" >
<div class= "card primary-bg" >
<div class= "card-body" >
<div class= "my-1" >
<svg class= "icon icon-sm" width= "20" height= "20" viewBox= "0 0 20 20" fill= "none" xmlns= "http://www.w3.org/2000/svg" >
<path
d= "M17.739 0.626099H2.26204C1.01449 0.626099 0 1.64026 0 2.88928V17.1136C0 18.3611 1.01449 19.3742 2.26204 19.3742H17.739C18.9865 19.3742 19.9999 18.3611 19.9999 17.1136V2.88928C20 1.64026 18.9866 0.626099 17.739 0.626099ZM12.933 3.99188C14.1395 3.99188 15.1179 4.97036 15.1179 6.17673C15.1179 7.3831 14.1394 8.36158 12.933 8.36158C11.7262 8.36158 10.7482 7.3831 10.7482 6.17673C10.7482 4.97036 11.7262 3.99188 12.933 3.99188ZM17.0296 17.2832H9.9998H3.28317C2.67974 17.2832 2.41101 16.8466 2.68302 16.308L6.43263 8.88124C6.70431 8.3427 7.22211 8.29463 7.58879 8.77379L11.3592 13.701C11.7258 14.1803 12.3668 14.221 12.7909 13.7917L13.7133 12.8577C14.1372 12.4283 14.7617 12.4815 15.1076 12.9756L17.4961 16.3874C17.8413 16.8822 17.633 17.2832 17.0296 17.2832Z"
fill= "#fff"
/>
</svg>
</div>
<a href= "#" >
<span class= "card-title white-color" > Azione</span>
</a>
</div>
</div>
</div>
</div>
<div class= "col-4" ><div class= "card-wrapper it25-info-box card-sm" >
<div class= "card primary-bg" >
<div class= "card-body" >
<div class= "my-1" >
<svg class= "icon icon-sm" width= "20" height= "20" viewBox= "0 0 20 20" fill= "none" xmlns= "http://www.w3.org/2000/svg" >
<path
d= "M17.739 0.626099H2.26204C1.01449 0.626099 0 1.64026 0 2.88928V17.1136C0 18.3611 1.01449 19.3742 2.26204 19.3742H17.739C18.9865 19.3742 19.9999 18.3611 19.9999 17.1136V2.88928C20 1.64026 18.9866 0.626099 17.739 0.626099ZM12.933 3.99188C14.1395 3.99188 15.1179 4.97036 15.1179 6.17673C15.1179 7.3831 14.1394 8.36158 12.933 8.36158C11.7262 8.36158 10.7482 7.3831 10.7482 6.17673C10.7482 4.97036 11.7262 3.99188 12.933 3.99188ZM17.0296 17.2832H9.9998H3.28317C2.67974 17.2832 2.41101 16.8466 2.68302 16.308L6.43263 8.88124C6.70431 8.3427 7.22211 8.29463 7.58879 8.77379L11.3592 13.701C11.7258 14.1803 12.3668 14.221 12.7909 13.7917L13.7133 12.8577C14.1372 12.4283 14.7617 12.4815 15.1076 12.9756L17.4961 16.3874C17.8413 16.8822 17.633 17.2832 17.0296 17.2832Z"
fill= "#fff"
/>
</svg>
</div>
<a href= "#" >
<span class= "card-title white-color" > Azione</span>
</a>
</div>
</div>
</div>
</div>
<div class= "col-4" ><div class= "card-wrapper it25-info-box card-sm" >
<div class= "card primary-bg" >
<div class= "card-body" >
<div class= "my-1" >
<svg class= "icon icon-sm" width= "20" height= "20" viewBox= "0 0 20 20" fill= "none" xmlns= "http://www.w3.org/2000/svg" >
<path
d= "M17.739 0.626099H2.26204C1.01449 0.626099 0 1.64026 0 2.88928V17.1136C0 18.3611 1.01449 19.3742 2.26204 19.3742H17.739C18.9865 19.3742 19.9999 18.3611 19.9999 17.1136V2.88928C20 1.64026 18.9866 0.626099 17.739 0.626099ZM12.933 3.99188C14.1395 3.99188 15.1179 4.97036 15.1179 6.17673C15.1179 7.3831 14.1394 8.36158 12.933 8.36158C11.7262 8.36158 10.7482 7.3831 10.7482 6.17673C10.7482 4.97036 11.7262 3.99188 12.933 3.99188ZM17.0296 17.2832H9.9998H3.28317C2.67974 17.2832 2.41101 16.8466 2.68302 16.308L6.43263 8.88124C6.70431 8.3427 7.22211 8.29463 7.58879 8.77379L11.3592 13.701C11.7258 14.1803 12.3668 14.221 12.7909 13.7917L13.7133 12.8577C14.1372 12.4283 14.7617 12.4815 15.1076 12.9756L17.4961 16.3874C17.8413 16.8822 17.633 17.2832 17.0296 17.2832Z"
fill= "#fff"
/>
</svg>
</div>
<a href= "#" >
<span class= "card-title white-color" > Azione</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
