Pattern library

Sezione 7.1 Accordion

La componente è utilizzata in molte funzioni per dare all'utente alcune informazioni di secondaria importanza, come il funzionamento dell'ordinamento nelle tabelle o l'obbligatorietà di alcuni campi nelle funzioni dispositive. Solitamente è posizionata nella parte inferiore della funzione.

Stili default

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Estensioni e modificatori

.t-accordion--complementary

Accordion complementare

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Markup

<details class="c-accordion [modifier class]">
    <summary class="c-accordion__title">Lorem ipsum</summary>
    <div class="c-accordion__content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>
</details>

Sezione 7.2 Alert

La componente è utilizzata per brevi messaggi testuali all'interno delle funzioni dispositive all'interno della componente .c-fieldset. E' possibile che la componente venga utilizzata in altri contesti. Le quattro estensioni permettono di colorare il messaggio in base al tipo di utilizzo e al tipo di comunicazione.

Stili default

Attenzione: alert generico Errore: alert critico Conferma: alert di successo Attenzione: alert informativo

Markup

<span class="c-alert">Attenzione: alert generico</span>
<span class="c-alert c-alert--error">Errore: alert critico</span>
<span class="c-alert c-alert--success">Conferma: alert di successo</span>
<span class="c-alert c-alert--warning">Attenzione: alert informativo</span>

Sezione 7.3 Badge

Utilizzata per le notifiche, questa componente utilizza cinque colori differenti per attirare l'attenzione dell'utente su un dato numerico o testuale presente in un menu o in una funzione.

Stili default

12 12 12 12 12

Markup

<span class="c-badge">12</span>
<span class="c-badge c-badge--primary">12</span>
<span class="c-badge c-badge--secondary">12</span>
<span class="c-badge c-badge--tertiary">12</span>
<span class="c-badge c-badge--quaternary">12</span>

Sezione 7.4 Banner

Un banner che posizionato nell'interfaccia consente di mostrare all'utente una notizia importante. L'utente può chiudere il messaggio tramite il link .c-banner__dismiss. Al momento è utilizzata sulla home page di Inbank per promuovere l'utilizzo dell'app.

Stili default

Estensioni e modificatori

.c-banner--notify

Banner per servizio Notify

Markup

<div class="c-banner [modifier class]" data-banner-app>
    <a data-dismiss class="c-banner__dismiss" aria-label="Nascondi avviso" href="#data-banner-app-dismiss">&times;</a> <span><b>INBANK APP</b> Accesso rapido, notifiche e altro ancora.</span> <a data-app-url class="c-banner__button" href="#">Scarica ora</a>
</div>

Sezione 7.5 Inline help

La componente è costituita da un contenitore .c-inline-help al cui interno è presente un toggler .c-inline-help__toggler personalizzabile tramite un'icona .c-icon-s .c-icon--info-circle e un contenuto .c-inline-help__content. È possibile estendere la componente per aumentarne le dimensioni e per rendere speculare l'apertura.

Stili default

Lorem ipsum dolor sit. Questo è il contenuto del tooltip.

Estensioni e modificatori

.c-inline-help--reverse

Variazione della posizione del tooltip.

Lorem ipsum dolor sit. Questo è il contenuto del tooltip.

.c-inline-help--large.c-inline-help--reverse

Variazione della dimensione del tooltip.

Lorem ipsum dolor sit. Questo è il contenuto del tooltip.

Markup

<p>
    Lorem ipsum dolor sit.
    <small class="c-inline-help [modifier class]">
        <i class="c-inline-help__toggler c-icon-s c-icon--info-circle"></i>
        <em class="c-inline-help__content">Questo è il contenuto del tooltip.</em>
    </small>
</p>

Sezione 7.6 Label

Piccole etichette colorate utilizzate in vari contesti per aumentare la visibilità di informazioni rilevanti. Le cinque estensioni variano nel colore a seconda dell'informazione.

Stili default

Label generica Label primaria Label secondaria Label terziaria Label quaternaria

Markup

<span class="c-label">Label generica</span>
<span class="c-label c-label--primary">Label primaria</span>
<span class="c-label c-label--secondary">Label secondaria</span>
<span class="c-label c-label--tertiary">Label terziaria</span>
<span class="c-label c-label--quaternary">Label quaternaria</span>

Sezione 7.7 Message

Messaggi generici di testo che comunicano all'utente un errore, una conferma o una info generica. Le cinque varianti cambiano nel colore e nel tipo di messaggio che si vuole comunicare.

Stili default