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

Splash screen

Lo Splash screen viene presentato all’utente all’apertura dell’app. In alcuni sistemi operativi può comparire con uno zoom-in proprio dall’icona dell’app (e per ciò rispetta anche l’identità grafica).

A - Splash icona sottofondo Questa variante aiuta l’utente riconoscere subito l’app grazie ad una composizione chiara, pulita e senza distrazioni. Consigliata per applicativi indirizzati ad operatori o utenti particolari.

B - Splash gradient Questa variante presenta una composizione più ingaggiante in cui l’identità dell’app viene comunicata con l’icona in alto. Consigliata per applicativi indirizzati a cittadini.

Splash icona sottofondo

Questa variante aiuta l’utente riconoscere subito l’app grazie ad una composizione chiara, pulita e senza distrazioni. Consigliata per applicativi indirizzati ad operatori o utenti particolari.

foo Nome del servizio
logo regione lombardia
Splash gradient

Questa variante presenta una composizione più ingaggiante in cui l’identità dell’app viene comunicata con l’icona in alto. Consigliata per applicativi indirizzati a cittadini.

foo

Nome del servizio

logo regione lombardia

Per il background dello Splash gradient, utilizzare la classe css bg-device-radiant.

<h4>Splash icona sottofondo</h4>
<div class="splash gray ">
  <div class="splash-header">
    <div class="p-2">
      <img src="/bootstrap-lombardia/dist/assets/img/icon-img.png" alt="foo" />
      <span class="h3 splash-text"> Nome del servizio</span>
    </div>
  </div>
  <div class="splash-footer">
    <div class="p-2">
      <img src="/bootstrap-lombardia/dist/assets/img/logo-rl.png" width="120" alt="logo regione lombardia" />
    </div>
  </div>
</div>



<h4>Splash gradient</h4>
 <div class="splash green bg-device-radiant ">
  <div class="splash-header">
    <div class="p-2">
      <img src="/bootstrap-lombardia/dist/assets/img/icon-img-white.png" alt="foo" />
    </div>
    <div class="p-2 mt-2">
      <h3 class="splash-text">Nome del servizio</h3>
    </div>
  </div>
  <div class="splash-footer">
    <div class="p-2">
      <img src="/bootstrap-lombardia/dist/assets/img/logo-rl-bianco.png" width="120" alt="logo regione lombardia" />
    </div>
  </div>
</div>

Javascript

var splashScreen = document.querySelector('.splash')
splashScreen.addEventListener('click', () => {
  splashScreen.style.opacity = 0
  setTimeout(() => {
    splashScreen.classList.add('hidden')
  }, 610)
})