Componente che permette all'utente la configurazione della propria dashboard. Il widget può essere utilizzato per mostrare un saldo, un andamento, un grafico o altro genere di informazioni. La configurazione avviene tramite tre step che indirizzano l'utente verso specifiche funzioni fra cui la scelta di un colore e un nome.
La personalizzazione della componente avviene tramite le classi c-widget--palette* dove * è un numero da 1 a 8 che ne definisce l'aspetto secondo la palette definita.
Il widget può avere un link oppure no: nel primo caso è possibile utilizzare a class="c-widget__link" href="#", nel secondo div class="c-widget__box".
Per gli importi all'interno della componente è consigliato l'utilizzo del tag span class="u-nowrap" che previene lo split della stringa su due righe.
Questa componente utilizza anche le seguenti componenti:
Stili default
<div class="o-matrix">
<div class="c-widget c-widget--palette1" id="widget_12">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Grafico Patrimonio</h4>
<div class="c-widget__content">
<div class="c-highchart" data-chart data-chart-palette="pie:1" id="chart_dashboard_patrimonio_12"></div>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_12" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_12" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette2" id="widget_13">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Grafico Entrate/Uscite</h4>
<div class="c-widget__content">
<div class="c-highchart" data-chart data-chart-palette="columns:2" id="chart_dashboard_entrate_uscite_13"></div>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_13" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_13" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette3" id="widget_14">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Grafico Singolo Conto</h4>
<div class="c-widget__content">
<div class="c-highchart" data-chart data-chart-palette="index:3" id="chart_dashboard_singolo_conto_14"></div>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_14" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_14" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette4" id="widget_15">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Grafico Singolo Conto</h4>
<div class="c-widget__content">
<div class="c-highchart" data-chart data-chart-palette="index:4" id="chart_dashboard_singolo_conto_area_15"></div>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_15" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_15" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette1" id="widget_1">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Valore attuale <span>Filippo Marroni - Conto corrente</span></h4>
<div class="c-widget__content">
<ul>
<li><span class="c-widget__value">+ 150.000,00 €</span></li>
<li>Saldo disponibile al 24/03/2014</li>
</ul>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_1" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_1" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette2" id="widget_2">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Totale altre attività <span>Filippo Marroni - Conto corrente</span></h4>
<div class="c-widget__content">
<ul>
<li><span class="c-widget__value">+ 20.150.000,00 €</span></li>
<li>Dati al 24/03/2014</li>
</ul>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_2" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_2" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette3" id="widget_3">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Debito residuo al 12/12/2020 <span>Filippo Marroni - Conto corrente</span></h4>
<div class="c-widget__content">
<ul>
<li><span class="c-widget__value">+ 150.000,00 €</span></li>
<li>Debito residuo al 24/03/2014</li>
</ul>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_3" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_3" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette4" id="widget_4">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Fondo pensione/altre attività <span>Filippo Marroni - Conto corrente</span></h4>
<div class="c-widget__content">
<ul>
<li><span class="c-widget__value">+ 1.450.000,00 €</span></li>
<li>Dati al 24/03/2014</li>
</ul>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_4" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_4" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette5" id="widget_5">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Saldo conto <span>Filippo Marroni - Conto corrente</span></h4>
<div class="c-widget__content">
<ul>
<li><span class="c-widget__value">+ 999.000,00 €</span></li>
<li>Saldo disponibile al 24/03/2014</li>
</ul>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_5" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_5" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette6" id="widget_6">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Totale portafoglio titoli <span>Gianni Verdi - Conto corrente</span></h4>
<div class="c-widget__content">
<table>
<tr>
<th scope="row">Utile/perdita</th>
<td class="u-right@ms"><span class="u-nowrap">+ 5.000,00 €</span></td>
</tr>
<tr>
<th scope="row">Variazione</th>
<td class="u-right@ms"><span class="u-nowrap">+ 24%</span></td>
</tr>
<tr>
<th scope="row">Valore attuale</th>
<td class="u-right@ms"><span class="u-nowrap">- 30.000,00 €</span></td>
</tr>
</table>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_6" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_6" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette7 o-matrix__smith" id="widget_7">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Registro accessi <span>Maria Rossi - Conto corrente</span></h4>
<div class="c-widget__content">
<table>
<tr>
<th scope="row">Accesso da Inbank app</th>
<td>18/03/2016 - 18.15</td>
<td class="u-right@ms">iPhone Mario</td>
</tr>
<tr>
<th scope="row">Cambio password</th>
<td>18/03/2016 - 18.15</td>
<td class="u-right@ms">Chrome su Windows</td>
</tr>
<tr>
<th scope="row">Accesso da Inbank web</th>
<td>18/03/2016 - 18.15</td>
<td class="u-right@ms">Safari iOS</td>
</tr>
<tr>
<th scope="row">Accesso da Inbank web</th>
<td>18/03/2016 - 18.15</td>
<td class="u-right@ms">Safari iOS</td>
</tr>
</table>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_7" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_7" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette8 o-matrix__smith" id="widget_8">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Ultimi movimenti <span>Maria Rossi - Conto corrente</span></h4>
<div class="c-widget__content">
<table>
<tr>
<th scope="row">09/07/2015</th>
<td>Lorem ipsum dolor sit amet ipsum dolor Lorem ipsum dolor sit Lorem ipsum dolor sit</td>
<td class="u-right@ms"><span class="u-nowrap">+ 5.000,00 €</span></td>
</tr>
<tr>
<th scope="row">09/07/2015</th>
<td>Lorem ipsum dolor sit amet ipsum dolor Lorem ipsum dolor sit Lorem ipsum dolor sit</td>
<td class="u-right@ms"><span class="u-nowrap">+ 5.000,00 €</span></td>
</tr>
<tr>
<th scope="row">09/07/2015</th>
<td>Lorem ipsum dolor sit amet ipsum dolor Lorem ipsum dolor sit Lorem ipsum dolor sit</td>
<td class="u-right@ms"><span class="u-nowrap">+ 5.000,00 €</span></td>
</tr>
<tr>
<th scope="row">09/07/2015</th>
<td>Lorem ipsum dolor sit amet ipsum dolor Lorem ipsum dolor sit Lorem ipsum dolor sit</td>
<td class="u-right@ms"><span class="u-nowrap">+ 5.000,00 €</span></td>
</tr>
</table>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_8" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_8" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette1" id="widget_9">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Disposizioni in scadenza <span>Gianni Verdi - Conto corrente</span></h4>
<div class="c-widget__content">
<table>
<tr>
<th scope="col">Scadenza</th>
<th class="u-right@ms" scope="col">Importo</th>
</tr>
<tr>
<td scope="row">15/12/2020</td>
<td class="u-right@ms"><span class="u-nowrap">+ 5.000,00 €</span></td>
</tr>
<tr>
<td scope="row">15/12/2020</td>
<td class="u-right@ms"><span class="u-nowrap">+ 5.000,00 €</span></td>
</tr>
<tr>
<td scope="row">15/12/2020</td>
<td class="u-right@ms"><span class="u-nowrap">+ 5.000,00 €</span></td>
</tr>
</table>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_9" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_9" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette2" id="widget_10">
<a class="c-widget__link" href="/data.php">
<h4 class="c-widget__title">Ultimi movimenti <span>Maria Rossi - Conto corrente</span></h4>
<div class="c-widget__content">
<p>Non è presente nessun movimento nell'ultimo mese.</p>
</div>
</a>
</div>
<div class="c-widget c-widget--palette3 o-matrix__smith" id="widget_11">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Entrate uscite <span>Antonio Mercalli - Conto corrente</span></h4>
<div class="c-widget__content">
<table>
<tr>
<th aria-hidden="true"> </th>
<th scope="col">Entrate</th>
<th scope="col">Uscite</th>
</tr>
<tr>
<td>Giorno</td>
<td><span class="u-nowrap">+ 9.000,10 €</span></td>
<td><span class="u-nowrap">- 9.000,10 €</span></td>
</tr>
<tr>
<td>Sett.</td>
<td><span class="u-nowrap">+ 999.000,10 $</span></td>
<td><span class="u-nowrap">- 999.000,10 $</span></td>
</tr>
<tr>
<td>Mese</td>
<td><span class="u-nowrap">+ 7.123.999.000,10 ¥</span></td>
<td><span class="u-nowrap">- 7.123.999.000,10 ¥</span></td>
</tr>
</table>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_11" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_11" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette8 o-matrix__smith" id="widget_b2">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Esiti negativi <span>Maria Rossi - Conto corrente</span></h4>
<div class="c-widget__content">
<table>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 1</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 2</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 3</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 4</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
</table>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_b2" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_b2" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette1 o-matrix__smith" id="widget_b3">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Storico pagamento e incassi <span>Maria Rossi - Conto corrente</span></h4>
<div class="c-widget__content">
<table>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 1</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 2</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 3</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 4</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
</table>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_b3" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_b3" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette2 o-matrix__smith" id="widget_b4">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Storico ricariche <span>Maria Rossi - Conto corrente</span></h4>
<div class="c-widget__content">
<table>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 1</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 2</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 3</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 4</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
</table>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_b4" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_b4" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette4 o-matrix__smith" id="widget_b6">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Pagamenti effetti elettronici <span>Maria Rossi - Conto corrente</span></h4>
<div class="c-widget__content">
<table>
<tr>
<th scope="row">18/03/2016</th>
<td>Mario Rosso</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">18/03/2016</th>
<td>Antonio Esposito</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">18/03/2016</th>
<td>Maria Verdi</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">18/03/2016</th>
<td>Gianni Rossi</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
</table>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_b6" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_b6" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette6" id="widget_b8">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Documenti online <span>Maria Rossi - Conto corrente</span></h4>
<div class="c-widget__content">
<table>
<tr>
<th scope="row">09/07/2015</th>
<td>Documento 1 abc</td>
</tr>
<tr>
<th scope="row">09/07/2015</th>
<td>Documento 1 abc</td>
</tr>
<tr>
<th scope="row">09/07/2015</th>
<td>Documento 1 abc</td>
</tr>
<tr>
<th scope="row">09/07/2015</th>
<td>Documento 1 abc</td>
</tr>
</table>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_b8" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_b8" class="c-dropdown c-dropdown--small">
<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>
</div>
</div>La seguenti widget sono esclusive per le utenze di tipo business.
Stili default
<div class="o-matrix">
<div class="c-widget c-widget--palette7 o-matrix__smith" id="widget_b1">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Autorizzazioni pagamenti e incassi <span>Maria Rossi - Conto corrente</span></h4>
<div class="c-widget__content">
<table>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 1</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 2</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 3</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 4</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
</table>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_b1" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_b1" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette3 o-matrix__smith" id="widget_b5">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Sospesi <span>Maria Rossi - Conto corrente</span></h4>
<div class="c-widget__content">
<table>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 1</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 2</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 3</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">18/03/2016</th>
<td>Tipologia 4</td>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
</table>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_b5" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_b5" class="c-dropdown c-dropdown--small">
<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>
</div>
<div class="c-widget c-widget--palette5 o-matrix__smith" id="widget_b7">
<a class="c-widget__link" href="#">
<h4 class="c-widget__title">Inbank Trading situazione portafoglio <span>Maria Rossi - Conto corrente</span></h4>
<div class="c-widget__content">
<table>
<tr>
<th scope="row">Non scaduti</th>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">Scaduti da accreditare</th>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">Importo non anticipato</th>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">Importo non maturato</th>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
<tr>
<th scope="row">Disponibilità</th>
<td class="u-right@ms">+ 5.000,00 €</td>
</tr>
</table>
</div>
</a>
<div class="c-widget__controls">
<button type="button" data-dropdown-toggler class="c-dropdown-toggler" aria-controls="dropdown_rand_id_b7" aria-pressed="false" aria-label="Impostazioni widget"><i class="c-icon-r c-icon--ellipsis-h"></i></button>
<div id="dropdown_rand_id_b7" class="c-dropdown c-dropdown--small">
<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>
</div>
</div>