Privacy Policy

Privacy

Il nuovo Regolamento UE 2016/679, in materia di protezione dei dati personali, ha introdotto delle novità per quanto riguarda diritti e garanzie che Pubbliche Amministrazioni ed Imprese private devono assicurare ai cittadini.

Il Garante per la Privacy ha elaborato una prima guida sulle principali innovazioni introdotte e fornisce utili indicazioni circa gli adempimenti previsti dalla normativa europea già in vigore dal 24 maggio 2016 e che sarà pienamente operante dal 25 maggio 2018.

Attendiamo dal MIUR direttive sull’applicazione alle scuole della normativa europea e delle linee guida del Garante, perché nelle scuole di ogni ordine e grado vengono trattate giornalmente moltissime informazioni sugli studenti, sulle famiglie, sulla loro situazione sociale, sugli accertamenti delle disabilità, ecc. e il nuovo Regolamento Europeo sulla Privacy introduce nuove e stringenti regole che trovano diretta applicazione anche negli Istituti Scolastici.

Guida all’applicazione del Regolamento UE 2016/679 

 

Finalità del trattamento
I dati personali da Voi forniti potranno essere trattati unicamente per le seguenti finalità:
  • finalità strettamente connesse e necessarie alla fruizione del Sito e dei Servizi richiesti
  • finalità funzionali allo svolgimento di ricerche, analisi economiche e statistiche, invio di materiale informativo e di aggiornamenti su iniziative e programmi del Liceo Labriola.
Modalità del trattamento
Il trattamento dei dati personali consiste nella raccolta, registrazione, organizzazione, conservazione, elaborazione, modificazione, selezione, estrazione, raffronto, utilizzo, interconnessione, blocco, comunicazione, diffusione, cancellazione e distruzione dei medesimi dati, comprese la combinazione di due o più delle suddette operazioni. Il trattamento dei dati personali è effettuato per le finalità di cui sopra, in conformità a quanto stabilito dall'articolo 11 del D.Lgs. n. 196/2003, sia su supporto cartaceo, informatico che telematico, per mezzo di strumenti elettronici o comunque automatizzati, nel rispetto delle regole di riservatezza e di sicurezza previste dalla normativa vigente. I dati saranno conservati per un periodo di tempo non superiore a quello necessario agli scopi per i quali essi sono stati raccolti o successivamente trattati conformemente a quanto previsto dagli obblighi di legge.
 
Natura del conferimento dei dati personali e conseguenze di un eventuale rifiuto di rispondere
Il conferimento dei dati personali è facoltativo. L'eventuale rifiuto di conferirli può comportare l'impossibilità di utilizzare il Sito e fruire dei relativi Servizi. L'invio facoltativo, esplicito e volontario di posta elettronica agli indirizzi indicati su questo Sito comporta la successiva acquisizione dell'indirizzo del mittente, necessario per rispondere alle richieste, nonché degli eventuali altri dati personali inseriti nella missiva.
 
Comunicazione e diffusione dei dati
I dati potranno essere comunicati, nel rispetto della normativa vigente, a società esterne incaricate dal Il Liceo Labriola di svolgere servizi di varia natura, quali a titolo esemplificativo, la manutenzione e l'assistenza del Sito e dei relativi Servizi. I dati personali non sono soggetti a diffusione.
 
Diritti dell'interessato
L'interessato ha diritto di ottenere la conferma dell'esistenza o meno di dati personali che lo riguardano, anche se non ancora registrati, e la loro comunicazione in forma intelligibile. L'interessato ha diritto di ottenere l'indicazione:
  • dell'origine dei dati personali
  • delle finalità e modalità del trattamento
  • della logica applicata in caso di trattamento effettuato con l'ausilio di strumenti elettronici
  • degli estremi identificativi del titolare, dei responsabili e del rappresentante designato ai sensi dell'articolo 5, comma 2
  • dei soggetti o delle categorie di soggetti ai quali i dati personali possono essere comunicati o che possono venirne a conoscenza in qualità di rappresentante
  • designato nel territorio dello Stato, di responsabili o incaricati
L'interessato ha diritto di ottenere:
  • l'aggiornamento, la rettificazione ovvero, quando vi ha interesse, l'integrazione dei dati
  • la cancellazione, la trasformazione in forma anonima o il blocco dei dati trattati in violazione di legge, compresi quelli di cui non è necessaria la conservazione in relazione agli scopi per i quali i dati sono stati raccolti o successivamente trattati
  • l'attestazione che le operazioni di cui alle lettere a) e b) sono state portate a conoscenza, anche per quanto riguarda il loro contenuto, di coloro ai quali i dati sono stati comunicati o diffusi, eccettuato il caso in cui tale adempimento si rivela impossibile o comporta un impiego di mezzi manifestamente sproporzionato rispetto al diritto tutelato.
L'interessato ha diritto di opporsi, in tutto o in parte:
  • per motivi legittimi al trattamento dei dati personali che lo riguardano, ancorché pertinenti allo scopo della raccolta al trattamento di dati personali che lo riguardano a fini di invio di materiale pubblicitario o di vendita diretta o per il compimento di ricerche di mercato o di comunicazione commerciale
Titolari e responsabili del trattamento
Titolare del trattamento dei dati è il Il Liceo Labriola, via Capo Sperone, 50 00122, Roma, al quale ci si potrà rivolgere per esercitare i diritti di cui all'articolo 7 del D.Lgs. cit e/o per conoscere l'elenco aggiornato di tutti i Responsabili del trattamento dei dati.
 

Termini e condizioni

 
2. Limitazione di responsabilità

IN NESSUNA CIRCOSTANZA, IVI COMPRESA, SENZA ALCUNA LIMITAZIONE LA NEGLIGENZA, Il LICEO LABRIOLA, I SUOI FORNITORI O I COLLABORATORI POTRANNO ESSERE RITENUTI RESPONSABILI PER QUALSIASI DANNO DIRETTO, INDIRETTO, INCIDENTALE, CONSEQUENZIALE, LEGATO ALL'USO DEL PRESENTE SITO WEB O DI ALTRI SITI WEB AD ESSO COLLEGATI DA UN LINK IPERTESTO, IVI COMPRESI SENZA ALCUNA LIMITAZIONE, I DANNI QUALI LA PERDITA DI PROFITTI O FATTURATO, L'INTERRUZIONE DI ATTIVITÀ AZIENDALE O PROFESSIONALE, LA PERDITA DI PROGRAMMI O ALTRO TIPO DI DATI UBICATI SUL SISTEMA INFORMATICO DELL'UTENTE O ALTRO SISTEMA. LA PRESENTE CLAUSOLA DI ESCLUSIONE DELLA RESPONSABILITÀ NON HA LO SCOPO DI ELUDERE IL RISPETTO DEI REQUISITI PRESCRITTI DALLA NORMATIVA VIGENTE, NÈ DI ESCLUDERE LA RESPONSABILITÀ PER I CASI NEI QUALI ESSA NON POSSA ESSERE ESCLUSA AI SENSI DELLA NORMATIVA APPLICABILE.
 
Copyright
 
I contenuti del sito - codice di script, grafica, testi, tabelle, immagini, suoni, e ogni altra informazione disponibile in qualunque forma - sono protetti ai sensi della normativa in tema di opere dell'ingegno.
Ogni prodotto o società menzionati in questo sito sono marchi dei rispettivi proprietari o titolari e possono essere protetti da brevetti e/o copyright concessi o registrati dalle autorità preposte.
Non è consentito per per fini di lucro utilizzare, copiare e distribuire i documenti e le relative immagini disponibili su questo sito solo dietro permesso scritto (o egualmente valido a fini legali) del Liceo Labriola, fatte salve eventuali spettanze di diritto. Le note di copyright, gli autori ove indicati o la fonte stessa devono in tutti i casi essere citati nelle pubblicazioni in qualunque forma realizzate e diffuse.
Qualsiasi forma di link al presente Sito, se inserita da soggetti terzi, non deve recare danno all'immagine ed alle attività del Liceo Labriola
È vietato  l'utilizzo non trasparente, su siti di soggetti terzi, di parti del Sito.
L'eventuale inosservanza delle presenti disposizioni, salvo esplicita autorizzazione scritta, sarà perseguita nelle competenti sedi giudiziarie civili e penali.
I dati personali da Voi forniti in relazione all'uso del presente sito (di seguito il "Sito") e dei relativi servizi (di seguito i "Servizi") sono trattati in conformità al D.Lgs. n. 196/2003 recante il "Codice in materia di protezione dei dati personali". Ai sensi dell'articolo 13 della citata normativa, Vi comunichiamo le informazioni rispetto al trattamento dei Vostri dati personali.
 
 

 

Dettagli
Uncategorised
4658

Cookie e privacy: istruzioni per l'uso

Garante della protezione dei dati personali

Individuazione delle modalità semplificate per l’informativa e l’acquisizione del consenso per l’uso dei cookie - 8 maggio 2014

Normativa

Il parlamento Europeo ha emanato nel maggio 2011 una legge sulla privacy che obbliga i siti internet a richiedere il permesso degli utenti ad utilizzare i cookies relativi ai servizi offerti. La EU Cookie Law (legge europea sui cookies) è stata approvata anche in Italia entrando in vigore con decreto legislativo 69/2012 e 70/2012.

Il nuovo Regolamento europeo in materia di protezione dei dati personali (GDPR) Regolamento (UE) 2016/679, va a sostituire la normativa in materia di cookie chiarendo alcuni aspetti e, comunque, garantendo un maggior controllo sulle impostazioni, consentendo di accettare o rifiutare facilmente il monitoraggio dei cookies e di altri identificatori in caso di rischi per la riservatezza.

La regolamentazione dei cookie verrà ulteriormente modificata a seguito dell'entrata in vigore del Regolamento Eprivacy che sostituirà l'attuale direttiva e sarà armonizzata tra i paesi dell’Unione.   

Uso dei cookie

Ci sono vari tipi di cookies : 

Cookie prime parti: installati dal titolare del sito.

  Il nostro sito NON utilizza Cookie prime parti.

Cookie di terze parti: sono cookie impostati da un sito web diverso da quello che si sta attualmente visitando. Questi ultimi risultano i più pericolosi per la privacy degli utenti. Infatti sono generalmente i cookie di terze parti che vengono utilizzati, appunto dalle terze parti, a fini di profilazione e tracciamento dell'utente, in modo da poter registrare la sua navigazione online, le sue preferenze, i siti visitati, le pagine viste, i link cliccati, così da poter realizzare un profilo dei gusti e indirizzare a lui, sempre grazie all'uso dei cookie, pubblicità personalizzata. 

La maggiore invasività dei cookie di terze parti è dovuta al fatto che i gestori dei siti che incorporano i servizi delle terze parti non hanno un controllo diretto sui cookie delle terze parti, e quindi non hanno nemmeno una conoscenza adeguata di ciò che le terze parti raccolgono e quali trattamenti effettuano. 
Inoltre, l'utilizzo di tali cookie non è di immediata evidenza per gli utenti, i quali possono essere consapevoli della raccolta di dati da parte del gestore dei sito visitato, ma non sempre sono consapevoli della raccolta da parte di terzi. E tale raccolta avviene spesso senza nemmeno dover attendere un'azione positiva dell'utente, talvolta a seguito del mero accesso al sito vengono rilasciati dei cookie. 
Il trattamento dei dati degli utenti finisce per essere un trattamento occulto dei dati degli utenti, che ovviamente è vietato.  

Per i cookie di terze parti la normativa di dettaglio dei Garanti nazionali prevede che il gestore del sito debba inserire nella sua informativa i link alle rispettiva informative privacy delle terze parti, in modo da consentire all'utente di informarsi compiutamente sulle finalità dei cookie stessi. 

 

Il nostro sito uttilizza cookies tecnici e di terze parti per funzionalità quali la condivisione sul social network Facebook (Cookie Policy Facebook). 

Nel sito sono inoltre inclusi video del servizio YouTube. Queste componenti possono utilizzare dei cookie generati direttamente dai server di You Tube e suoi partner.

Come modificare le impostazioni sui cookie

La maggior parte dei browser permette di cancellare i cookie dal disco fisso del computer, di bloccare l’accettazione dei cookie o di ricevere un avviso prima che un cookie venga memorizzato.

Come disabilitare i cookie di servizi di terzi

Garante della Privacy sui Cookie

Le funzionalità dei cookie possono essere disattivate anche tramite l’apposita pagina messa a disposizione dalla EDAA (European Interactive Digital Advertising Alliance) all’indirizzo EDAA.

Fonte: Wikipedia, l'enciclopedia libera

In informatica i cookie HTTP (più comunemente denominati Web cookie, tracking cookie o semplicemente cookie) sono righe di testo usate per eseguire autenticazioni automatiche, tracciatura di sessioni e memorizzazione di informazioni specifiche riguardanti gli utenti che accedono al server, come ad esempio siti web preferiti o, in caso di acquisti via internet, il contenuto dei loro "carrelli della spesa".

Nel dettaglio, sono stringhe di testo di piccola dimensione inviate da un server ad un Web client (di solito un browser) e poi rimandati indietro dal client al server (senza subire modifiche) ogni volta che il client accede alla stessa porzione dello stesso dominio web. Il termine "cookie" – letteralmente "biscotto" – deriva da magic cookie (biscotto magico), concetto noto in ambiente UNIX che ha ispirato sia l'idea che il nome dei cookie HTTP.

Ogni dominio o sua porzione che viene visitata col browser può impostare dei cookie. Poiché una tipica pagina Internet, ad esempio quella di un giornale in rete, contiene oggetti che provengono da molti domini diversi e ognuno di essi può impostare cookie, è normale ospitare nel proprio browser molte centinaia di cookie.

Poiché possono essere usati per monitorare la navigazione su Internet, i cookie sono oggetto di discussioni concernenti il diritto alla privacy. Molti paesi ed organizzazioni, fra cui gli Stati Uniti e l'Unione europea, hanno legiferato in merito. I cookie sono stati inoltre criticati perché non sempre sono in grado di identificare l'utente in modo accurato ed inoltre perché possono potenzialmente essere oggetto di attacchi informatici. Esistono alcune alternative ai cookie, ma tutte, insieme ad alcuni vantaggi, presentano controindicazioni.

I cookie vengono spesso erroneamente ritenuti veri e propri programmi e ciò genera errate convinzioni. In realtà essi sono semplici blocchi di dati, incapaci, da soli, di compiere qualsiasi azione sul computer. In particolare non possono essere né spyware, né virus. Ciononostante i cookie provenienti da alcuni siti sono catalogati come spyware da molti prodotti anti-spyware perché rendono possibile l'individuazione dell'utente. I moderni browser permettono agli utenti di decidere se accettare o no i cookie, ma l'eventuale rifiuto rende alcuni oggetti inutilizzabili. Ad esempio, gli shopping cart implementati con i cookie non funzionano in caso di rifiuto.

Un cookie è un header aggiuntivo presente in una richiesta (Cookie:) o risposta (Set-cookie:) HTTP: nel caso il server voglia assegnare un cookie all'utente, lo aggiungerà tra gli header di risposta. Il client deve notare la presenza del cookie e memorizzarlo in un'area apposita (in genere, si utilizzava una directory dove ogni cookie veniva memorizzato in un file, Attualmente i cookies sono gestiti in maniera molto più evoluta, in un unico file, per esempio Mozilla e Chrome usano SQL - SQLite). Il cookie è composto da una stringa di testo arbitraria, una data di scadenza (oltre la quale non deve essere considerato valido) e un pattern per riconoscere i domini a cui rimandarlo. È possibile impostare più cookie in una sola risposta HTTP.

Il browser client rimanderà il cookie, senza alcuna modifica, allegandolo a tutte le richieste HTTP che soddisfano il pattern, entro la data di scadenza. Il server può quindi scegliere di assegnare il cookie di nuovo, sovrascrivendo quello vecchio. Il reinvio tramite pattern permette a tutti i sottodomini di un dato dominio di ricevere il cookie, se così si vuole.

I cookie vengono utilizzati per aggiungere uno stato ad un protocollo privo di stato. Senza i cookie non vi sarebbe differenza in una pagina caricata prima di effettuare un login, dalla stessa pagina caricata dopo. Dato che i cookie permangono nel sistema per lunghi periodi, i siti possono assegnare un indice all'utente e tenere traccia della sua navigazione all'interno del sito, solitamente allo scopo di creare statistiche.

I cookie possono essere utilizzati anche per tracciare la navigazione su siti terzi, nel caso in cui questi siti terzi utilizzino contenuti provenienti dal sito che ha impostato il cookie. Solitamente la pubblicità sui siti viene gestita da compagnie che hanno inserzioni su svariati siti internet.

Il contenuto della pubblicità stessa viene caricato direttamente dal loro server (tramite una richiesta http) e visualizzato in maniera integrata nel sito che l'utente desidera visitare. In questo modo il server della compagnia pubblicitaria riceverà dal browser dell'utente l'indirizzo della pagina che si sta visualizzando, e potrà inviare un cookie al client. Tramite questo meccanismo le società pubblicitarie possono creare profili personalizzati per gli utenti e mostrare loro pubblicità mirate.

Dettagli
Uncategorised
1463

Base

This section shows the base look of all HTML elements on your page.

Headings

Use the <h1> to <h6> elements to define your headings.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Text-level semantics

The following list gives you a short overview of the most commonly used text-level semantics and how to utilize them.

Element Description
<a> Turn text into hypertext using the a element.
<em> Emphasize text using the em element.
<strong> Imply any extra importance using the strong element.
<code> Define inline code snippets using the code element.
<del> Mark document changes as deleted text using the del element.
<ins> Mark document changes as inserted text using the ins element.
<mark> Highlight text with no semantic meaning using the mark element.
<abbr> Define an abbreviation using the abbr element with a title.
<dfn> Define a definition term using the dfn element with a title.
<small> De-emphasize text for small print using the small element.

Horizontal rule

Create a horizontal rule by using the <hr> element. The greyish line below each section here in the Typography page is an example.

Blockquotes

For quoting multiple lines of content from another source within your document, use the <blockquote> element.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Someone famous 
<blockquote>
    <p>Quotation</p>
    <small>Source</small>
</blockquote>

Code blocks

For multiple lines of code, use the <pre> element which defines preformatted text. It creates a new text block that preserves spaces, tabs and line breaks. Nest a <code> element inside to define the code block.

IMPORTANTBe sure to escape any angle brackets in the code for proper rendering.

<pre>
    <code>...</code>
</pre>

Lists

Create an unordered list using the <ul> element and the <ol> element for ordered lists. The <li> element defines the list item.

  • Item 1
  • Item 2
    • Item 1
    • Item 2
      • Item 1
      • Item 2
  • Item 3
  • Item 4
  1. Item 1
  2. Item 2
    1. Item 1
    2. Item 2
      1. Item 1
      2. Item 2
  3. Item 3
  4. Item 4
<ul>
    <li>...</li>
    <li>...
        <ul>
            <li>...</li>
        </ul>
    </li>
</ul>
<ol>
    <li>...</li>
    <li>...
        <ol>
            <li>...</li>
        </ol>
    </li>
</ol>

NOTEYou can also use additional UIkit classes for the lists. You will find more details here.

Description lists

Create a description list using the <dl> element. Use <dt> to define the term and <dd> for the description.

Description lists
A description list defines terms and their corresponding descriptions.
This is a term
This is a description.
This is a term
This is a description.
<dl>
    <dt>...</dt>
    <dd>...</dd>
</dl>

NOTEYou can also use additional UIkit classes for the description lists. You will find more details here.

Tables

You can easily create tables using the <table> element. Use <thead> to define the table headings, <tfoot> to define the table footers and <tbody> to define the table body.

Table Heading Table Heading Table Heading
Table Footer Table Footer Table Footer
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data 

<table>
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>...</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>

NOTEYou can also use additional UIkit classes for the tables. You will find more details here.

Form

You can easily create forms that contain different elements like <legend>, <input>, <select>, etc.

Form 
<form>
    <fieldset>
        <legend>...</legend>
        <input type="text" placeholder="">
        <input type="password" placeholder="">
        <select>
            <option>...</option>
            <option>...</option>
        </select>
    </fieldset>
</form>

NOTEYou can also use additional UIkit classes for the forms. You will find more details here.

Grid

This section shows how you can create different grids layouts with columns and rows.

Gantry5 Grid System

Gantry5 comes with its own CSS framework called "Nucleus". It is based on the Flexbox model and therefore is really flexible and allows you to build advanced layouts.

Block 1
Block 2
Block 3 

<div class="g-grid">
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
</div>

Gantry5 grid system or better said "Nucleus" grid system does not have a grid gutter, it uses the .g-content class instead.

As you can see in the above example, all 3 blocks are surrounded by empty space. This empty space comes from the .g-content class which adds some margin and padding to the element.

We have added a utility class to the template which takes care of the unnecessary spacing and makes the whole grid looks more natural. The utility class is called .g-gutter.

Block 1
Block 2
Block 3 

<div class="g-grid g-gutter">
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
</div>

"Nucleus" comes with another very useful class called .size-# where # is the percentage of the whole width of the grid a particular element should occupy.

Block 1
Block 2
Block 3

Block 1
Block 2
Block 3

Block 1
Block 2

Block 1
Block 2 

<div class="g-grid g-gutter">
    <div class="g-block size-20">
        <div class="g-content">...</div>
    </div>
    <div class="g-block size-60">
        <div class="g-content">...</div>
    </div>
    <div class="g-block size-20">
        <div class="g-content">...</div>
    </div>
</div>

<div class="g-grid g-gutter">
    <div class="g-block size-20">
        <div class="g-content">...</div>
    </div>
    <div class="g-block size-20">
        <div class="g-content">...</div>
    </div>
    <div class="g-block size-60">
        <div class="g-content">...</div>
    </div>
</div>

<div class="g-grid g-gutter">
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
    <div class="g-block">
        <div class="g-content">...</div>
    </div>
</div>

<div class="g-grid g-gutter">
    <div class="g-block size-25">
        <div class="g-content">...</div>
    </div>
    <div class="g-block size-75">
        <div class="g-content">...</div>
    </div>
</div>

UIkit Grid System

The grid system of UIkit follows the mobile-first approach and accomodates up to 10 grid columns. It uses units with predefined classes inside each grid, which define the column width.

To create the grid container, add the .uk-grid class to a parent element. Add one of the .uk-width-* classes to child elements to determine, how the units shall be sized. The grid supports 1, 2, 3, 4, 5, 6 and 10 unit divisions.

.uk-width-1-3
.uk-width-1-3
.uk-width-1-3
.uk-width-1-2
.uk-width-1-2
.uk-width-3-10
.uk-width-7-10 

<div class="uk-grid">
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>

NOTEYou can find more information about the UIkit Grid System here.

Buttons

This section shows the different button styles and classes you can use.

Default Buttons

Default Button Dark Button Empty Button 

<a href="#" class="button">Default Button</a>
<a href="#" class="button dark">Dark Button</a>
<a href="#" class="button empty">Empty Button</a>

Button Colors

Button Grey Button Green Button Orange Button Purple Button Blue 

<a href="#" class="button button-grey">Button Grey</a>
<a href="#" class="button button-green">Button Green</a>
<a href="#" class="button button-orange">Button Orange</a>
<a href="#" class="button button-purple">Button Purple</a>
<a href="#" class="button button-blue">Button Blue</a>

Button Icons

Default Button Dark Button Empty Button Button Green Button Purple 

<a href="#" class="button"><i class="fa fa-fw fa-download"></i> Default Button</a>
<a href="#" class="button dark"><i class="fa fa-fw fa-star"></i> Dark Button</a>
<a href="#" class="button empty"><i class="fa fa-fw fa-lock"></i> Empty Button</a>
<a href="#" class="button button-green"><i class="fa fa-fw fa-clock-o"></i> Button Green</a>
<a href="#" class="button button-purple"><i class="fa fa-fw fa-arrows"></i> Button Purple</a>

Button Sizes

Button XLarge Button Large Button Medium Button Small Button XSmall 

<a href="#" class="button button-xlarge">Button XLarge</a>
<a href="#" class="button dark button-large">Button Large</a>
<a href="#" class="button empty button-medium">Button Medium</a>
<a href="#" class="button button-green button-small">Button Small</a>
<a href="#" class="button button-purple button-xsmall">Button XSmall</a>

Button Block

Default Button
Dark Button
Empty Button

<a href="#" class="button button-block">Default Button</a>
<a href="#" class="button dark button-block">Dark Button</a>
<a href="#" class="button empty button-block">Empty Button</a>

NOTEYou can also use additional UIkit classes for the buttons. You will find more details here.

Alerts

This section shows the different alert styles and classes you can use.

Lorem ipsum dolor sit amet, conse adipiscing elit. Maecenas mauris orci, pellentesque at vestibulum quis.

Lorem ipsum dolor sit amet, conse adipiscing elit. Maecenas mauris orci, pellentesque at vestibulum quis.

Lorem ipsum dolor sit amet, conse adipiscing elit. Maecenas mauris orci, pellentesque at vestibulum quis.

Lorem ipsum dolor sit amet, conse adipiscing elit. Maecenas mauris orci, pellentesque at vestibulum quis.

<p class="alert alert-success">...</p>
<p class="alert alert-info">...</p>
<p class="alert alert-warning">...</p>
<p class="alert alert-error">...</p>

NOTEYou can also use additional UIkit classes for the alerts. You will find more details here.

Modal

This section shows how easy it is to use modals.

The modal component consists of an overlay, a dialog and a close button.

Class Description
<.uk-modal> Add this class to a <div> element to create the dialog container and an overlay that blanks out the page. It is important to add an id to indicate the element for toggling.
<.uk-modal-dialog> Add this class to a child <div> element to create the dialog box.
<.uk-modal-close> Add this class to an <a> or <button> element to create a close button within the dialog box. We recommend adding the .uk-close class from the Close component to give the button a proper styling, though you can also use text or an image.

You can use any element to toggle a modal dialog. An <a> element needs to be linked to the modal's id. To enable the necessary JavaScript, add the data-uk-modal attribute. If you are using another element, like a button, just add the data-uk-modal="{target:'#ID'}" attribute to target the modal's id.

Open 

<!-- This is an anchor toggling the modal -->
<a href="#my-id" data-uk-modal>...</a>

<!-- This is a button toggling the modal -->
<button class="button" data-uk-modal="{target:'#my-id'}">...</button>

<!-- This is the modal -->
<div id="my-id" class="uk-modal">
    <div class="uk-modal-dialog">
        <a class="uk-modal-close uk-close"></a>
        ...
    </div>
</div>

NOTEYou can find more details and options about the modals here.

Lightbox

This section shows how easy it is to create a fancy lightbox for images and videos.

To apply this component, add the data-uk-lightbox attribute to an anchor linking to the image you wish to display. If a title attribute exists it will be displayed as a caption for the lightbox.

Open lightbox 

<a href="/my-image.jpg" data-uk-lightbox title="">...</a>

You can link multiple images to the same lightbox and switch between them from within the lightbox, thus creating a gallery. Just add the {group:'my-group'} option to the data attribute of each item using the same name on all items that you want to group.

<a href="/" data-uk-lightbox="{group:'my-group'}">...</a>

A lightbox is not restricted to images. Other media, like videos, can be displayed inside a lightbox and it will automatically generate the correct output by evaluating your path.

Image MP4 Vimeo YouTube

NOTEYou can find more details and options about the lightbox here.

Tooltip

This section shows how easy it is to create a nicely looking tooltip.

To create a tooltip, add the data-uk-tooltip attribute to an element. You also need to add a title attribute, whose value will represent your tooltip's text.

Hover me 

<button class="button" data-uk-tooltip title="">...</button>
<span data-uk-tooltip title="">...</span>

Add one of the following options to the data-uk-tooltip attribute to adjust the tooltip's alignment.

Attribute Description Example
<pos:'top'> Aligns the tooltip to the top.
<pos:'top-left'> Aligns the tooltip to the top left.
<pos:'top-right'> Aligns the tooltip to the top right.
<pos:'bottom'> Aligns the tooltip to the bottom.
<pos:'bottom-left'> Aligns the tooltip to the bottom left.
<pos:'bottom-right'> Aligns the tooltip to the bottom right.
<pos:'left'> Aligns the tooltip to the left.
<pos:'right'> Aligns the tooltip to the right. 

<button class="button" data-uk-tooltip="{pos:'bottom-left'}" title="">...</button>

NOTEYou can find more details about the tooltip here.

Tabs

This section shows how easy it is to create a tabbed navigation with different styles.

The Tab component consists of clickable tabs, that are aligned side by side.

Class Description
.uk-tab Add this class to a <ul> element to define the Tab component. Use <a> elements as tab items within the list.
.uk-active Add this class to a list item to apply an active state.
.uk-disabled Add this class to a list item to apply a disabled state.

The data-uk-tab attribute is required for two purposes. Firstly, it enables the responsive behaviour. If the parent container is too small to accomodate all tabs, they will be combined into a dropdown, toggled by a single tab, which represents the active tab item.

And secondly, its functionality is coupled to the Switcher component, which is necessary to dynamically transition through different contents using tabbed navigation.

<ul class="uk-tab" data-uk-tab>
    <li class="uk-active"><a href="#">...</a></li>
    <li><a href="#">...</a></li>
    <li><a href="#">...</a></li>
    <li class="uk-disabled"><a href="#">...</a></li>
</ul>

There are many more options and layouts available for the tabs, for example centered tabs, tabs on the left, tabs on the right, etc. You will find all these details on the UIkit website.

NOTEYou can find more details and options about the lightbox here.

Accordions

This section shows how easy it is to create a list of items, allowing each item's content to be expanded and collapsed by clicking its header.

To create an Accrodion, add the uk-accordion class and the data-uk-accordion attribute to a container element. Add the uk-accordion-content class to each of the content sections within the container. Finally, add the uk-accordion-title class to any element, like a heading, above the content section to create a toggle.

Heading 1

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

Heading 2

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

Heading 3

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

<div class="uk-accordion" data-uk-accordion>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

    <h3 class="uk-accordion-title">...</h3>
    <div class="uk-accordion-content">...</div>

</div>

NOTEYou can find more details and options about the accordion here.

UIkit

The things you see here, in the Typography page, are just a quick overview of the most commonly used elements. There are actually many, many more cool things that you can use, like Utility classes, Overlays, Text Styles, Switchers, Toggles, Scrollspy, Smooth scroll, Dynamic Grids, Sliders, Slidesets, Slideshows, Parallax, Sticky elements and more!

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. It comes with a wide range of reusable and combinable components. All UIkit classes are namespaced, so they won't interfere with other frameworks and extensions you might be using.

Check it out!

V!dea

Contattaci