Unibo website
Style Guide Unibo Containers
In questa pagina ci sono i componenti custom relativi ai contenitori sviluppati ed utilizzati esclusivamente per applicazioni unibo.
Barra Login DSA
La barra di Login è composta da un dropdown menù di Foundation. Questo può avere dei sottomenù che si aprono sull'hover o sul click.
In linea generale è preferibile lasciare le voci di menù sempre visibili. In caso ci siano molte voci è tuttavia preferibile utilizzare la versione con l'apertura sul click poiché nella versione mobile, l'hover può non essere interpretato correttamente da alcuni dispositivi.
Ci sono più versioni di questo elemento:
SCSS da includere: u_barra_login.scss
Classe da utilizzare: u-barra-login
Login con dropdown che si apre al click
Login con dropdown che si apre all'hover
E' preferibile utilizzare la versione con l'apertura sul click poiché nella versione mobile, l'hover può non essere interpretato correttamente da alcuni dispositivi.
In questo caso per la versione responsive non abbiamo inserito l'apri/chiudi e non abbiamo inserito la classe vertical poiché preferiamo lasciare le voci visibili.
Login con impersonamento
E' preferibile utilizzare la versione con l'apertura sul click poiché nella versione mobile, l'hover può non essere interpretato correttamente da alcuni dispositivi.
In questo caso per la versione responsive non abbiamo inserito l'apri/chiudi e non abbiamo inserito la classe vertical poiché preferiamo lasciare le voci visibili.
-
Alessandro Alessandrini
-
Mario Rossi
Stai accedendo come alessadro.alessandrini@unibo.it,
per tornare al tuo utente puoi terminare questo impersonamento.
-
Logout
-
Alessandro Alessandrini
-
Mario Rossi
Stai accedendo come alessadro.alessandrini@unibo.it, per tornare al tuo utente puoi terminare questo impersonamento.
- Logout
-
SCSS da includere: u_header.scss
Classe da utilizzare: u-header-left solo se si vuole allineamento a sinistra
Header allineato a sinistra
Header centrato
Highlight text
Questo elemento può essere utilizzato in un layout ad una colonna per evidenziare o differenziare una sezione, in quanto inserisce uno sfondo grigio su tutta la riga.
Può avere una griglia di più colonne all'interno per avere più blocchi di elementi.
Ci sono due versioni di questo elemento:
SCSS da includere: u_highlight_text.scss
Classe da utilizzare: u-highlight-text
Highlight Basic
Lorem ipsum
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Highlight a dimensione fissa
Se viene inserita la classe fixed-width, l'elemento all'interno avrà una larghezza massima di 550px, utile per non avere un contenuto troppo lungo e difficile da leggere.
Lorem ipsum
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum
Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Tabella dark
Versione scura della tabella di default.
SCSS da includere: u_table.scss
Classe da utilizzare: dark
| Table Header | Table Header | Table Header | Table Header |
|---|---|---|---|
| Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Tabella senza bordi
Per ottenere una tabella senza i bordi.
SCSS da includere: u_table.scss
Classe da utilizzare: no-border
| Table Header | Table Header | Table Header | Table Header |
|---|---|---|---|
| Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Ordinamento tabella
Per ottenere lo stile sull'ordinamento.
La classe .sort inserisce un'icona con le doppie frecce che sta ad indicare che quella colonna è ordinabile.
Le classi .sorted-up e .sorted-down indicano se quella colonna è ordinata in modo crescente o decrescente.
E' possibile utilizzare le classi
.sorted-up-light e
.sorted-down-light nel
per avere uno stile più leggero nelle colonne ordinate.
Nelle celle della colonna evidenziata va inserito .sorted-light.
Si può utilizzare anche nelle tabelle .dark, in quel caso lo stile è differente in base ai colori più scuri della tabella.
Le classi da utilizzare per la tabella dark sono .sorted-up e .sorted-down.
Nelle celle della colonna evidenziata va inserito .sorted.
SCSS da includere: u_table.scss
Classi da utilizzare:
.sort ,
.sorted-up e
.sorted-down
Table Header
Table Header
Table Header
Table Header
Content Goes Here
This is longer content Donec id elit non mi porta gravida at eget metus.
Content Goes Here
Content Goes Here
Content Goes Here
This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.
Content Goes Here
Content Goes Here
Content Goes Here
This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.
Content Goes Here
Content Goes Here
| Table Header | Table Header | Table Header | Table Header |
|---|---|---|---|
| Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Tabella con stile light
Table Header
Table Header
Table Header
Table Header
Content Goes Here
This is longer content Donec id elit non mi porta gravida at eget metus.
Content Goes Here
Content Goes Here
Content Goes Here
This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.
Content Goes Here
Content Goes Here
Content Goes Here
This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.
Content Goes Here
Content Goes Here
| Table Header | Table Header | Table Header | Table Header |
|---|---|---|---|
| Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Tabella con stile dark
| Table Header | Table Header | Table Header | Table Header |
|---|---|---|---|
| Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Lista con numeri
Questo elemento può essere utilizzato come box per spiegare una procedura in più step.
Può anche essere centrato e a quel punto va aggiunta la classe centered
Ci sono due versioni di questo elemento:
SCSS da includere: u_numbered_list.scss
Classe da utilizzare:
u-numbered-list
Lista con numeri
-
Quickly build robust relationships for frictionless interfaces. Distinctively drive open-source testing procedures after holistic interfaces. Synergistically formulate stand-alone convergence whereas long-term high-impact services. Interactively streamline quality schemas after optimal action items. Interactively recaptiualize integrated ROI rather than end-to-end synergy.
Conveniently target timely alignments and turnkey paradigms. Enthusiastically.
-
Dynamically customize frictionless intellectual capital rather than ethical partnerships. Proactively recaptiualize team driven scenarios and e-business metrics. Monotonectally seize sticky core competencies after next-generation data. Conveniently evolve clicks-and-mortar initiatives through sustainable leadership skills. Completely impact inexpensive ideas whereas front-end products.
Energistically maximize equity invested opportunities via resource.
-
Efficiently drive interoperable infomediaries vis-a-vis timely process improvements. Collaboratively utilize business systems and top-line potentialities. Collaboratively foster strategic vortals vis-a-vis unique networks. Dynamically evolve emerging processes without inexpensive markets. Professionally redefine real-time niches before next-generation results.
Competently monetize fully tested processes and high-quality core competencies. Monotonectally revolutionize.
-
Quickly build robust relationships for frictionless interfaces. Distinctively drive open-source testing procedures after holistic interfaces. Synergistically formulate stand-alone convergence whereas long-term high-impact services. Interactively streamline quality schemas after optimal action items. Interactively recaptiualize integrated ROI rather than end-to-end synergy.
Conveniently target timely alignments and turnkey paradigms. Enthusiastically.
-
Dynamically customize frictionless intellectual capital rather than ethical partnerships. Proactively recaptiualize team driven scenarios and e-business metrics. Monotonectally seize sticky core competencies after next-generation data. Conveniently evolve clicks-and-mortar initiatives through sustainable leadership skills. Completely impact inexpensive ideas whereas front-end products.
Energistically maximize equity invested opportunities via resource.
-
Efficiently drive interoperable infomediaries vis-a-vis timely process improvements. Collaboratively utilize business systems and top-line potentialities. Collaboratively foster strategic vortals vis-a-vis unique networks. Dynamically evolve emerging processes without inexpensive markets. Professionally redefine real-time niches before next-generation results.
Competently monetize fully tested processes and high-quality core competencies. Monotonectally revolutionize.
Lista con numeri centrato
-
Quickly build robust relationships for frictionless interfaces. Distinctively drive open-source testing procedures after holistic interfaces. Synergistically formulate stand-alone convergence whereas long-term high-impact services. Interactively streamline quality schemas after optimal action items. Interactively recaptiualize integrated ROI rather than end-to-end synergy.
Conveniently target timely alignments and turnkey paradigms. Enthusiastically.
-
Dynamically customize frictionless intellectual capital rather than ethical partnerships. Proactively recaptiualize team driven scenarios and e-business metrics. Monotonectally seize sticky core competencies after next-generation data. Conveniently evolve clicks-and-mortar initiatives through sustainable leadership skills. Completely impact inexpensive ideas whereas front-end products.
Energistically maximize equity invested opportunities via resource.
-
Efficiently drive interoperable infomediaries vis-a-vis timely process improvements. Collaboratively utilize business systems and top-line potentialities. Collaboratively foster strategic vortals vis-a-vis unique networks. Dynamically evolve emerging processes without inexpensive markets. Professionally redefine real-time niches before next-generation results.
Competently monetize fully tested processes and high-quality core competencies. Monotonectally revolutionize.
-
Quickly build robust relationships for frictionless interfaces. Distinctively drive open-source testing procedures after holistic interfaces. Synergistically formulate stand-alone convergence whereas long-term high-impact services. Interactively streamline quality schemas after optimal action items. Interactively recaptiualize integrated ROI rather than end-to-end synergy.
Conveniently target timely alignments and turnkey paradigms. Enthusiastically.
-
Dynamically customize frictionless intellectual capital rather than ethical partnerships. Proactively recaptiualize team driven scenarios and e-business metrics. Monotonectally seize sticky core competencies after next-generation data. Conveniently evolve clicks-and-mortar initiatives through sustainable leadership skills. Completely impact inexpensive ideas whereas front-end products.
Energistically maximize equity invested opportunities via resource.
-
Efficiently drive interoperable infomediaries vis-a-vis timely process improvements. Collaboratively utilize business systems and top-line potentialities. Collaboratively foster strategic vortals vis-a-vis unique networks. Dynamically evolve emerging processes without inexpensive markets. Professionally redefine real-time niches before next-generation results.
Competently monetize fully tested processes and high-quality core competencies. Monotonectally revolutionize.
Contatto
Questo elemento può essere utilizzato come box inserire un contatto.
Se viene inserita la classe colored-icon l'icona sarà colorata con il colore primario
SCSS da includere: u_contact.scss
Classe da utilizzare: contact