Solapas4.5.0

Elemento que permite describir de una manera creativa un determinado elemento con una visión del tipo banda envolvente con una leyenda que permite darle al usuario una descripción bastante detallada.

Muestra

Vamos a realizar una muestra del elemento absoluto, pero previamente debemos insertar la clase .relative-container al elemento padre.
Es importante aclarar que elemento que se está documentando en esta sección posee un posicionamiento absoluto, lo cual obliga a que el contenedor padre tenga un posicionamiento relativo.

Esta es una solapa Bodyui

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia inventore similique porro!

Esta es una solapa Roja

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia inventore similique porro!

Esta es una solapa Gris

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia inventore similique porro!

Esta es una solapa Verde

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia inventore similique porro!

Esta es una solapa Azul

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia inventore similique porro!

Esta es una solapa Blanca

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia inventore similique porro!

Esta es una solapa Negra

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia inventore similique porro!

    

        

            

                
Esta es una solapa Bodyui

                
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia inventore similique porro!

            

        

        

            

                
Esta es una solapa Roja

                
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia inventore similique porro!

            

        

        

            

                
Esta es una solapa Gris

                
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia inventore similique porro!

            

        

        

            

                
Esta es una solapa Verde

                
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia inventore similique porro!

            

        

        

            

                
Esta es una solapa Azul

                
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia inventore similique porro!

            

        

        

            

                
Esta es una solapa Blanca

                
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia inventore similique porro!

            

        

        

            

                
Esta es una solapa Negra

                
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia inventore similique porro!
Notese que para los ejemplos anteriores se utilizaron clases de:

Tabla de Colores

Se muestra a continuación una tabla descriptiva con las clases y los colores asociados.

Español Inglés Color
.badge-solapa-bodyui .badge-flap-bodyui
.badge-solapa-rojo .badge-flap-red
.badge-solapa-verde .badge-flap-green
.badge-solapa-azul .badge-flap-blue
.badge-solapa-gris .badge-flap-grey
.badge-solapa-negro .badge-flap-black
.badge-solapa-blanco .badge-flap-white

Ejemplos Con Tarjetas

Veamis ejemplos en contenedores más complejos y determinar el funcionamiento del posicionamiento de los elementos.
Es importante reiterar que cualquier elemento contenedor padre debe tener incorporada la clase .relative-container para que la solapa permanezca dentro del contenedor padre.

Ejemplo de Solapa en una Tarjeta

Título de la tarjetaNew

Pequeña descripción

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic ex et optio. 

    
 
        
Ejemplo de Solapa en una Tarjeta

        
 
            
Título de la tarjetaNew

            Pequeña descripción
            

                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic ex et optio.
`r`n