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

Bordi e Raggi

Bordi e Raggi

Borders

Il Design System di Regione Lombardia prevede tre spessori specifici di bordo:

xs 0.5px
sm 1px
base 2px 

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="d-flex align-items-start flex-column mb-3">
  <div class="p-2 w-100">
    <div class="border-top border-primary it25-border-xs"></div>
    <span><strong>xs</strong> 0.5px</span>
  </div>
  <div class="p-2 w-100">
    <div class="border-top border-primary it25-border-sm"></div>
    <span><strong>sm</strong> 1px</span>
  </div>
  <div class="p-2 w-100">
    <div class="border-top border-primary it25-border-base"></div>
    <span><strong>base</strong> 2px</span>
  </div>
</div>

Utilizzo delle classi:

it25-border-(tipo di spessore)

Nota: lo spessore di 0.5px non esiste. Si utilizza uno spessore di 1px opacizzandone il colore al 50% per ottenere l’illusione ottica di uno spessore inferiore.

Radius

Il Design System di Regione Lombardia prevede specifici tipi di arrotondamento:

Esempio di immagine arrotondata Esempio di immagine arrotondata Esempio di immagine arrotondata Esempio di immagine arrotondata Esempio di immagine arrotondata 

1
2
3
4
5

<img src="https://placehold.co/200x125/caedd0/808080/?text=smooth 4px" class="it25-radius-smooth" alt="Esempio di immagine arrotondata">
<img src="https://placehold.co/200x125/caedd0/808080/?text=smoother 16px" class="it25-radius-smoother" alt="Esempio di immagine arrotondata">
<img src="https://placehold.co/200x125/caedd0/808080/?text=mobile-round 40px" class="it25-radius-mobile-round" alt="Esempio di immagine arrotondata">
<img src="https://placehold.co/200x125/caedd0/808080/?text=web-round 48px" class="it25-radius-web-round" alt="Esempio di immagine arrotondata">
<img src="https://placehold.co/125x125/caedd0/808080/?text=circle 80px" class="it25-radius-circle" alt="Esempio di immagine arrotondata">

Utilizzo delle classi:

it25-radius-(tipo arrotondamento)

Specifiche Tecniche

Per ulteriori opzioni per l’applicazione dei bordi si veda alla voce:
Bordi