.c-dropdown--small
Dimensione piccola.
La componente mostra gli allegati presenti nel dettaglio di un messaggio nella funzione "Messaggi" o nel dettaglio della componente .c-post.
Stili default
<ul class="o-grid o-grid--guttered-narrow o-grid--half o-grid--third@ms o-grid--fifth@xls">
<li class="c-attachment">
<a href="#" class="c-attachment__link">
<div class="c-attachment__icon"><i class="c-icon-r c-icon--file-pdf"></i></div>
<span class="c-attachment__title">nome.estensione</span>
</a>
</li>
<li class="c-attachment">
<a href="#" class="c-attachment__link">
<div class="c-attachment__icon"><i class="c-icon-r c-icon--file-pdf"></i></div>
<span class="c-attachment__title">nome.estensione</span>
</a>
</li>
<li class="c-attachment">
<a href="#" class="c-attachment__link">
<div class="c-attachment__icon"><i class="c-icon-r c-icon--file-pdf"></i></div>
<span class="c-attachment__title">nome.estensione</span>
</a>
</li>
<li class="c-attachment">
<a href="#" class="c-attachment__link">
<div class="c-attachment__icon"><i class="c-icon-r c-icon--file-pdf"></i></div>
<span class="c-attachment__title">nome.estensione</span>
</a>
</li>
<li class="c-attachment">
<a href="#" class="c-attachment__link">
<div class="c-attachment__icon"><i class="c-icon-r c-icon--file-pdf"></i></div>
<span class="c-attachment__title">nome.estensione</span>
</a>
</li>
</ul>Classica componente di card. Utilizzata al momento dallo store presente sulla dashboard di Inbank.
Stili default
<div class="o-grid o-grid--stretch o-grid--half@ms o-grid--third@ls o-grid--guttered-narrow">
<section class="c-card">
<div class="c-card__container">
<a class="c-card__permalink" aria-label="Maggiori dettagli »" href="11_Store_Dettaglio.htm" rel="bookmark">
<figure class="c-card__image">
<img src="https://placeimg.com/1000/500/arch">
<strong class="c-card__ribbon">Sarai presto contattato dalla banca</strong>
</figure>
<div class="c-card__content">
<h2 class="c-card__title">Lorem ipsum dolor sit amet</h2>
</div>
</a>
</div>
</section>
<section class="c-card">
<div class="c-card__container">
<a class="c-card__permalink" aria-label="Maggiori dettagli »" href="11_Store_Dettaglio.htm" rel="bookmark">
<figure class="c-card__image">
<img src="https://placeimg.com/1000/500/arch">
</figure>
<div class="c-card__content">
<h2 class="c-card__title">Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste fugiat, provident dolorem cumque vitae dolore sapiente odio animi quod aperiam quasi consequuntur harum officia ad, nobis explicabo omnis nostrum quidem.</p>
</div>
</a>
</div>
</section>
<section class="c-card">
<div class="c-card__container">
<a class="c-card__permalink" aria-label="Maggiori dettagli »" href="11_Store_Dettaglio.htm" rel="bookmark">
<figure class="c-card__image">
<img src="https://placeimg.com/1000/500/arch">
</figure>
<div class="c-card__content">
<h2 class="c-card__title">Lorem ipsum dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste fugiat, provident dolorem cumque vitae dolore sapiente odio animi quod aperiam quasi consequuntur harum officia ad, nobis explicabo omnis nostrum quidem.</p>
</div>
</a>
</div>
</section>
</div>La componente apre un piccolo menu a tendina. Può essere utilizzata per mostrare un menu nascosto oppure un contenuto generico in differenti contesti.
Rer aprire correttamente una dropdown deve essere presente il c-dropdown-toggler.
In base all'utilizzo può avere due diverse larghezze (oltre a quella di default) utilizzando le classi .c-dropdown--small e .c-dropdown--large oppure invertire la visualizzazione tramite la classe .c-dropdown--reverse.
NB: le classi di grandezza .c-dropdown--small e .c-dropdown--large si precludono l'una con l'altra ma è possibile tuttavia cobinarle con la classe di visualizzazione .c-dropdown--reverse, ad esempio: class="c-dropdown c-dropdown--large c-dropdown--reverse" al fine di creare una dropdown grande con orientamento invertito.
Per il corretto funzionamento della componente è necessario che gli attributi aria-controls="dropdown_rand_id_x" del toggler e id="dropdown_rand_id_x" della dropdown corrispondano.
Stili default
Estensioni e modificatori
.c-dropdown--small
Dimensione piccola.
.c-dropdown--large
Dimensione grande.
.c-dropdown--reverse
Dropdown con orientamento invertito.
<div class="u-relative u-inline-block">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_[modifier class]" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_[modifier class]" class="c-dropdown [modifier class]">
<ul class="c-action-list c-action-list--inverse">
<li><a data-reveal-link href="widget-step/1_Widget_Step.htm"><i class="c-icon-s c-icon--cog"></i> Modifica</a></li>
<li><a data-reveal-link href="widget-step/widget_delete.htm"><i class="c-icon-s c-icon--trash"></i> Elimina</a></li>
</ul>
</div>
</div>Un placeholder che indica all'utente la possibilità di aggiungere un elemento all'interfaccia. È utilizzato nella dashboard per indicare la possibilità di aggiunta di una nuova widget e nella gestione carte prepagate per aggiungere una nuova carta.
Stili default
<a class="c-ghost" href="#">
<i class="c-icon-r c-icon--plus-circle c-ghost__icon"></i>
Aggiungi una carta
</a>La componente ha il compito di elencare tutti gli allegati presenti (ove disponibili nei formati pdf, cbi, csv) all'interno di una funzione. Attualmente viene utilizzata solo sulle funzioni che utilizzano la componente .c-table.
Stili default
<aside class="c-media">
<div class="c-media__object">
<i class="c-icon-s c-icon--print"></i>
</div>
<div class="c-media__content">
<h4 class="c-media__title">Stampe e files</h4>
<ul class="o-inline-list">
<li><a class="c-button c-button--quaternary" href="#"><i class="icon-file-pdf-o"></i> Dettaglio bonifico (.pdf)</a></li>
</ul>
</div>
</aside>Interfaccia che consente l'anteprima di una carta di credito, di debito e di una carta ricaricabile.
Stili default
Estensioni e modificatori
.c-payment-card--negative
Colore del testo invertito.
<ul class="o-grid o-grid--fourth">
<figure class="c-payment-card [modifier class]">
<img src="/images/carte/ricarica.svg" alt="Carta Evo">
<figcaption><b>0359 9XXX X895 X895</b> Valida fino al 12/21</figcaption>
</figure>
</div>La componente apre un contenuto in modalità modale. Il link deve avere l'attributo data-reveal-link e può essere aggiunto a qualsiasi link o componente che prevede un ancora.
Il contenuto della reveal può essere un link esterno o un servizio di Inbank (con gli opportuni headers).
Stili default
<a data-reveal-link href="https://inbank.test/servizi/F001_estratto_conto_newbar/2_Estratto_Conto_Reveal.htm?mode=reveal&execKeyTest={$FLOW_EXECUTION_KEY}">Apri una reveal</a>
<a data-reveal-link class="c-button c-button--primary" href="https://inbank.test/servizi/F001_estratto_conto_newbar/2_Estratto_Conto_Reveal.htm?mode=reveal&execKeyTest={$FLOW_EXECUTION_KEY}">Apri una reveal</a>Piccola componente che applica un'altezza preimpostata all'elemento e ne consente lo scroll in verticale.
Stili default
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.
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.
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.
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.
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.
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.
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.
<div class="c-scroll-box">
<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>
<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>
<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>
<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>
<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>
<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>
<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>Piccola componente che crea un piccolo adesivo con all'interno un numero o una lettera. Attualmente in uso sul servizio Bancomat Pay negli step di configurazione.
Stili default
<span class="c-sticker">1</span>
<span class="c-sticker">2</span>
<span class="c-sticker">10</span>Deprecated: utilizzata solo dal trading.