Style Guide Unibo Card

In questa pagina ci sono i componenti custom relativi ai contenitori sviluppati con una grafica a card.

Card Option

Questo elemento può essere utilizzato come box esplicativo per linkare un servizio o una sezione.
Può contenere un'icona (Fontawesome), del testo (anche titolazioni) e un pulsante.

Ci sono due versioni di questo elemento:

SCSS da includere: u_card_option.scss
Classe da utilizzare: u-card-option

Card Option Basic

          		
          

            
            
Robortis nisl ut aliquip

            
Energistically deliver user-centric systems without orthogonal catalysts for change. Synergistically productivate market positioning niches whereas distributed best practices.

            
Assistenza

            
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

            Vedi tutto

Robortis nisl ut aliquip

Energistically deliver user-centric systems without orthogonal catalysts for change. Synergistically productivate market positioning niches whereas distributed best practices.

Assistenza

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

Vedi tutto

Card Option con larghezza fissa

Questo componente può essere inserito in una griglia per avere più blocchi di elementi. In alternativa, può avere una larghezza fissa di 300px se viene inserita la classe fixed-width. 

          		
          

            
            
Robortis nisl ut aliquip

            
Del illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit.

            
Assistenza

            
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

            Vedi tutto

Robortis nisl ut aliquip

Del illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit.

Assistenza

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

Vedi tutto

Card feature

Questo elemento può essere utilizzato come box per comparare diverse feature e spiegare la differenza tra diverse opzioni.

Graficamente è uguale al componente Radio card a parte che non ha la possibilità di selezionare l'opzione.

Questo elemento può essere utilizzato come box esplicativo per linkare un servizio o una sezione.
Può contenere un'icona (Fontawesome), del testo (anche titolazioni) e un pulsante.

SCSS da includere: u_comparison_card.scss
Classe da utilizzare: u-comparison-card 
          		
          

          
              

                  
                  
SMS

                  
Energistically deliver user-centric systems without orthogonal catalysts for change. Synergistically productivate market positioning niches whereas distributed best practices.

                  
                  

                          
Vantaggi

                          
    
                              
  • Interactively maintain fully researched materials after stand-alone
    • 
                              
  • Materials after stand-alone web-readiness
    • 
                              
  • Assertively morph client-centered leadership
    • 
                          

                      

                      

                          
Svantaggi

                          
    
                              
  • Uniquely supply corporate ideas with distributed communities
    • 
                              
  • Skills before multidisciplinary scenarios
    • 
                              
  • Globally streamline flexible infrastructures
    • 
                          

                      

              

          
              

                  
                  
APP

                  
Conveniently coordinate economically sound testing procedures.

                  

                      
Vantaggi

                      
    
                          
  • Rather than sustainable data
    • 
                          
  • Energistically productize performance based potentialities
    • 
                          
  • Ethical synergy
    • 
                      

                  

                  

                      
Svantaggi

                      
    
                          
  • Monotonectally promote B2C initiatives
    • 
                          
  • Future-proof e-services
    • 
                          
  • Proseculim sot risulum
    •

SMS

Energistically deliver user-centric systems without orthogonal catalysts for change. Synergistically productivate market positioning niches whereas distributed best practices.

Vantaggi

  • Interactively maintain fully researched materials after stand-alone
  • Materials after stand-alone web-readiness
  • Assertively morph client-centered leadership

Svantaggi

  • Uniquely supply corporate ideas with distributed communities
  • Skills before multidisciplinary scenarios
  • Globally streamline flexible infrastructures

APP

Conveniently coordinate economically sound testing procedures.

Vantaggi

  • Rather than sustainable data
  • Energistically productize performance based potentialities
  • Ethical synergy

Svantaggi

  • Monotonectally promote B2C initiatives
  • Future-proof e-services
  • Proseculim sot risulum

Radio card

Elemento che si contraddistingue come fosse una card ma in realtà è un radio button che permette di effettuare una scelta.

SCSS da includere: u_radiocard.scss
Classe da utilizzare: u-radiocard 
          	
          	

          	
          	    

          	        
          	        

          	            
          	            
SMS

          	            
Energistically deliver user-centric systems without orthogonal catalysts for change. Synergistically productivate market positioning niches whereas distributed best practices.

          	            
          	            
          	            

          	                    
Vantaggi

          	                    
    
          	                        
  • Interactively maintain fully researched materials after stand-alone
    • 
          	                        
  • Materials after stand-alone web-readiness
    • 
          	                        
  • Assertively morph client-centered leadership
    • 
          	                    

          	                

          	                

          	                    
Svantaggi

          	                    
    
          	                        
  • Uniquely supply corporate ideas with distributed communities
    • 
          	                        
  • Skills before multidisciplinary scenarios
    • 
          	                        
  • Globally streamline flexible infrastructures
    • 
          	                    

          	                

          	        

          	    

          	
          	    

          	        
          	        

          	            
          	            
APP

          	            
Conveniently coordinate economically sound testing procedures.

          	            
          	            
          	            

          	                
Vantaggi

          	                
    
          	                    
  • Rather than sustainable data
    • 
          	                    
  • Energistically productize performance based potentialities
    • 
          	                    
  • Ethical synergy
    • 
          	                

          	            

          	            

          	                
Svantaggi

          	                
    
          	                    
  • Monotonectally promote B2C initiatives
    • 
          	                    
  • Future-proof e-services
    • 
          	                    
  • Proseculim sot risulum
    •

SMS

Energistically deliver user-centric systems without orthogonal catalysts for change. Synergistically productivate market positioning niches whereas distributed best practices.

Vantaggi

  • Interactively maintain fully researched materials after stand-alone
  • Materials after stand-alone web-readiness
  • Assertively morph client-centered leadership

Svantaggi

  • Uniquely supply corporate ideas with distributed communities
  • Skills before multidisciplinary scenarios
  • Globally streamline flexible infrastructures

APP

Conveniently coordinate economically sound testing procedures.

Vantaggi

  • Rather than sustainable data
  • Energistically productize performance based potentialities
  • Ethical synergy

Svantaggi

  • Monotonectally promote B2C initiatives
  • Future-proof e-services
  • Proseculim sot risulum

Button Card

Elemento che si contraddistingue come fosse una card ma in realtà è un button che permette di effettuare una scelta.
Può avere sfondo colorato utilizzando la classe colored.

SCSS da includere: u_buttoncard.scss
Classe da utilizzare: u-buttoncard

Card con azioni

Questo elemento può essere utilizzato come box per verificare il corretto funzionamento di un processo o di un'azione.

Viene utilizzata la card card-tile per inserire i valori da verificare e successivamente le card card-tile success e card-tile failure definiscono il risultato che può essere positivo o negativo.

E' presente anche una card disabled per gestire anche gli stati intermedi di caricamento o disabilitate.

E' possibile usare questa tipologia di card anche in forma orizzontale usando la classe horizontal.

Ci sono due versioni di questo elemento:

SCSS da includere: u_action_card.scss
Classe da utilizzare: u-action-card

Card con azioni Basic

          		
          

              

                  
                  
Carica un documento

                  

                      
                  

                  Verifica
              

          
              

                  
                  
Caricamento...

                  

                      

                          Attendi il caricamento
                      

                  

              

              
              

                  
                  
Azione completata

                  

                      

                          nomedocumento.p7m
 è risultato valido.
                      

                      Carica un altro documento
                  

              

          
              

                  
                  
Documento non valido

                  

                      

                          nomedocumento.p7m
 è risultato non valido.
                      

                      Carica un altro documento

Carica un documento

Verifica

Caricamento...

Attendi il caricamento

Azione completata

nomedocumento.p7m
è risultato valido.

Carica un altro documento

Documento non valido

nomedocumento.p7m
è risultato non valido.

Carica un altro documento

Card con azioni orizzontale

          		
          
          

                  

                      

                          

                              
                          

              
                          

                              
Carica un documento

                              

                                  
                              

                          

                          

                              Verifica
                          

                      

                  

              
                  

                      

                          

                              
                          

              
                          

                              
Caricamento...

                              

                                  

                                      Il download inizierà entro 5 secondi.
                                  

                              

                          

                      

                  

              
              
                  

                      

                          

                              
                          

              
                          

                              
Azione completata

                              

                                  

                                      nomedocumento.p7m è risultato valido.
                                  

                                  Carica un altro documento
                              

                          

                      

                  

              
                  

                      

                          

                              
                          

              
                          

                              
Azione non completata

                              

                                  

                                      nomedocumento.p7m è risultato non valido.
                                  

                                  Carica un altro documento

Carica un documento

Verifica

Caricamento...

Il download inizierà entro 5 secondi.

Azione completata

nomedocumento.p7m è risultato valido.

Carica un altro documento

Azione non completata

nomedocumento.p7m è risultato non valido.

Carica un altro documento