Cuadrícula y datos

La mejor forma para adaptar los diseños a los distintos dispositivos móviles.

En esta sección te mostraremos ideas de cómo utilizar el sistema de cuadrícula insertando datos como; texto, imágenes, enlaces, etc... Para que entiendas bien el contenido de está sección deberás tener revisadas las siguientes secciones si aún no lo has hecho;

  1. Contenedores.
  2. Sistema de cuadrícula.
  3. Sistema de cuadrícula y datos.

-- Ejemplo con textos

class="col tab-8"

Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, repudiandae debitis voluptas libero numquam sed itaque iste tenetur ea adipisci.

class="col tab-4"

Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, repudiandae debitis voluptas libero numquam sed itaque iste tenetur ea adipisci.

class="col pha-4"

Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, repudiandae debitis voluptas libero numquam sed itaque iste tenetur ea adipisci.

class="col pha-4"

Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, repudiandae debitis voluptas libero numquam sed itaque iste tenetur ea adipisci.

class="col pha-4"

Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, repudiandae debitis voluptas libero numquam sed itaque iste tenetur ea adipisci.
HTML 

    

        

            
Title

        

        

            
col tab-8

            Text
        

        

            
col tab-4

            Text
        

        

            
col pha-4

            Text
        

        

            
col pha-4

            Text
        

        

            
col pha-4

            Text

-- Ejemplos con imágenes en filas

img01
img02
img03
img04
img05
img06
img07
img08
img09
img010
img011
img012
HTML 

    

        

            #
        

        

            #

-- Ejemplo con imágenes y textos

img013

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, asperiores!...

Button href
img014

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, asperiores!...

Button href
img015

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, asperiores!...

Button href
HTML 

    

        

            #
            
Lorem ipsum

            

                
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, asperiores!...

            

            Button href

-- Ejemplo con iframe

Lorem ipsum

Link href

Lorem ipsum

Link href

Lorem ipsum

Link href
Class Description
.box-iframe Clase para el contenedor de la etiqueta <iframe>.
.iframe Clase para la etiqueta <iframe>.
HTML 

    

        

            

                
            

            
Lorem ipsum

            

                Link href