Dimmer

Un componente per focalizzare l’attenzione su un contenuto

Componenti

Metadati e link per approfondire

Anteprima

Anteprima:
Inizio anteprima:Fine anteprima.

Quando usarlo

In stesura

Come usarlo

In stesura

Accessibilità

In stesura

Stato del componente

In stesura

Anatomia

In stesura

Comportamento

In stesura

Specifiche di design

In stesura

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici

Anteprima

Anteprima:
Inizio anteprima:Fine anteprima.

1<div class="toggles col-md-6 col-lg-4">
2  <label for="toggleDimmer1">
3    Attiva Dimmer 1
4    <input type="checkbox" id="toggleDimmer1" data-bs-toggle="dimmer" data-bs-target="#dimmer1" checked>
5    <span class="lever"></span>
6  </label>
7</div>
8
9<div class="row dimmable">
10  <div class="dimmer fade show" id="dimmer1">
11    <div class="dimmer-inner">
12      <div class="dimmer-icon">
13        <svg class="icon icon-xl"><use href="/dist/svg/sprites.svg#it-unlocked"></use></svg>
14      </div>
15      <p>Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.</p>
16    </div>
17  </div>
18  <div class="col-12 col-lg-4">
19    <!--start card-->
20    <div class="card-wrapper">
21      <div class="card">
22        <div class="card-body">
23          <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
24          <p class="card-text">Praesent volutpat in dolor in sollicitudin. Donec mollis varius condimentum. Nunc viverra, metus at viverra consectetur, magna orci posuere ipsum, et bibendum est urna sed sem. Fusce libero neque, elementum volutpat tincidunt id, egestas vitae nisi. Nulla vulputate luctus sem, eu maximus lacus faucibus eget. Fusce tristique enim augue, sed suscipit lorem bibendum vel. Donec vehicula vehicula nibh non suscipit.</p>
25        </div>
26      </div>
27    </div>
28    <!--end card-->
29  </div>
30  <div class="col-12 col-lg-4 d-none d-lg-block">
31    <!--start card-->
32    <div class="card-wrapper">
33      <div class="card">
34        <div class="card-body">
35          <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
36          <p class="card-text">Praesent volutpat in dolor in sollicitudin. Donec mollis varius condimentum. Nunc viverra, metus at viverra consectetur, magna orci posuere ipsum, et bibendum est urna sed sem. Fusce libero neque, elementum volutpat tincidunt id, egestas vitae nisi. Nulla vulputate luctus sem, eu maximus lacus faucibus eget. Fusce tristique enim augue, sed suscipit lorem bibendum vel. Donec vehicula vehicula nibh non suscipit.</p>
37        </div>
38      </div>
39    </div>
40    <!--end card-->
41  </div>
42  <div class="col-12 col-lg-4 d-none d-lg-block">
43    <!--start card-->
44    <div class="card-wrapper">
45      <div class="card">
46        <div class="card-body">
47          <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
48          <p class="card-text">Praesent volutpat in dolor in sollicitudin. Donec mollis varius condimentum. Nunc viverra, metus at viverra consectetur, magna orci posuere ipsum, et bibendum est urna sed sem. Fusce libero neque, elementum volutpat tincidunt id, egestas vitae nisi. Nulla vulputate luctus sem, eu maximus lacus faucibus eget. Fusce tristique enim augue, sed suscipit lorem bibendum vel. Donec vehicula vehicula nibh non suscipit.</p>
49        </div>
50      </div>
51    </div>
52    <!--end card-->
53  </div>
54</div>

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici