Guía de estilos

Listado de los diferentes estilos de botones. Se aplican sobre un elemento enlace <a>.

Botón sólido redondo

Botón redondo

Botón sólido cuadrado

Botón cuadrado

Botón con borde redondo

Botón redondo

Botón con borde gris redondo

Botón redondo

Botón con sombra cuadrado

Botón cuadrado

Botón con icono vídeo

Botón vídeo

Diferentes tipos de listas numeradas y con viñetas

Lista viñetas sin estilos

Nam sed massa elementum, tincidunt lectus quis, tristique orci.
Etiam sed eros varius, pulvinar nunc eget, euismod nunc.
Duis aliquam nisi a odio tincidunt, ut bibendum neque porta.
Cras facilisis tellus quis viverra eleifend.

Lista numerada sin estilos

Nam sed massa elementum, tincidunt lectus quis, tristique orci.
Etiam sed eros varius, pulvinar nunc eget, euismod nunc.
Duis aliquam nisi a odio tincidunt, ut bibendum neque porta.
Cras facilisis tellus quis viverra eleifend.

Lista viñetas check

Nam sed massa elementum, tincidunt lectus quis, tristique orci.
Etiam sed eros varius, pulvinar nunc eget, euismod nunc.
Duis aliquam nisi a odio tincidunt, ut bibendum neque porta.
Cras facilisis tellus quis viverra eleifend.

Lista numerada mayúsculas

Nam sed massa elementum, tincidunt lectus quis, tristique orci.
Etiam sed eros varius, pulvinar nunc eget, euismod nunc.
Duis aliquam nisi a odio tincidunt, ut bibendum neque porta.
Cras facilisis tellus quis viverra eleifend.

Lista viñetas flechas

Nam sed massa elementum, tincidunt lectus quis, tristique orci.
Etiam sed eros varius, pulvinar nunc eget, euismod nunc.
Duis aliquam nisi a odio tincidunt, ut bibendum neque porta.
Cras facilisis tellus quis viverra eleifend.

Lista numerada minúsculas

Nam sed massa elementum, tincidunt lectus quis, tristique orci.
Etiam sed eros varius, pulvinar nunc eget, euismod nunc.
Duis aliquam nisi a odio tincidunt, ut bibendum neque porta.
Cras facilisis tellus quis viverra eleifend.

Lista viñetas verdadero

Nam sed massa elementum, tincidunt lectus quis, tristique orci.
Etiam sed eros varius, pulvinar nunc eget, euismod nunc.
Duis aliquam nisi a odio tincidunt, ut bibendum neque porta.
Cras facilisis tellus quis viverra eleifend.

Lista numerada mayúsculas romanos

Nam sed massa elementum, tincidunt lectus quis, tristique orci.
Etiam sed eros varius, pulvinar nunc eget, euismod nunc.
Duis aliquam nisi a odio tincidunt, ut bibendum neque porta.
Cras facilisis tellus quis viverra eleifend.

Lista viñetas falso

Nam sed massa elementum, tincidunt lectus quis, tristique orci.
Etiam sed eros varius, pulvinar nunc eget, euismod nunc.
Duis aliquam nisi a odio tincidunt, ut bibendum neque porta.
Cras facilisis tellus quis viverra eleifend.

Lista numerada minúsculas romanos

Nam sed massa elementum, tincidunt lectus quis, tristique orci.
Etiam sed eros varius, pulvinar nunc eget, euismod nunc.
Duis aliquam nisi a odio tincidunt, ut bibendum neque porta.
Cras facilisis tellus quis viverra eleifend.

Lista viñetas mayor

Nam sed massa elementum, tincidunt lectus quis, tristique orci.
Etiam sed eros varius, pulvinar nunc eget, euismod nunc.
Duis aliquam nisi a odio tincidunt, ut bibendum neque porta.
Cras facilisis tellus quis viverra eleifend.

Lista numerada decimal

Nam sed massa elementum, tincidunt lectus quis, tristique orci.
Etiam sed eros varius, pulvinar nunc eget, euismod nunc.
Duis aliquam nisi a odio tincidunt, ut bibendum neque porta.
Cras facilisis tellus quis viverra eleifend.

Lista viñetas circulo

Nam sed massa elementum, tincidunt lectus quis, tristique orci.
Etiam sed eros varius, pulvinar nunc eget, euismod nunc.
Duis aliquam nisi a odio tincidunt, ut bibendum neque porta.
Cras facilisis tellus quis viverra eleifend.

Lista viñetas cuadrado

Nam sed massa elementum, tincidunt lectus quis, tristique orci.
Etiam sed eros varius, pulvinar nunc eget, euismod nunc.
Duis aliquam nisi a odio tincidunt, ut bibendum neque porta.
Cras facilisis tellus quis viverra eleifend.

Estilos para las imágenes. Es necesario primero poner el estilo y después agregar la imagen.

Imagen por defecto

The referenced media source is missing and needs to be re-embedded.

Imagen con sombra

The referenced media source is missing and needs to be re-embedded.

Imagen redondeada

The referenced media source is missing and needs to be re-embedded.

Estilos para los párrafos

Texto con caja

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac risus quis sem lacinia aliquam. Cras quis lacinia odio. Morbi pharetra consequat mollis. Nam eget enim turpis. Fusce dignissim ultrices mollis. Proin pulvinar metus ut ex mattis pellentesque. Nulla at urna ultrices, tincidunt turpis vitae, ultricies ex. Nam sem libero, tempor luctus metus et, facilisis sodales lectus. Phasellus hendrerit gravida pharetra. Nullam at massa tortor. Nulla eget condimentum justo, luctus posuere est. Ut a tempus erat. Curabitur viverra turpis et ultrices lacinia. Proin eu tortor quis ipsum eleifend fringilla. Nullam maximus lorem et ante sollicitudin malesuada.

Texto con caja naranja

Texto con fondo

Texto con caja y fondo

Diferentes tipos de estructuras posibles

Acordeones

Título acordeón

Acordeón avanzado

The referenced media source is missing and needs to be re-embedded.

Vestibulum luctus metus nec venenatis euismod. Quisque vulputate luctus nisl eget tempor. Aliquam vitae tellus sit amet urna fermentum aliquam. Suspendisse dolor enim, condimentum vel suscipit vel, condimentum vitae ex. Quisque aliquam nibh et egestas fringilla. Mauris hendrerit enim at condimentum dapibus. Vivamus ullamcorper fringilla nulla. Cras non magna eros.

Phasellus eget augue efficitur, venenatis magna et, dictum neque.
Morbi viverra magna quis elit mollis, non facilisis magna tempor.
Sed convallis magna id ante laoreet, id vulputate lectus tempus.

Maecenas quam dolor, bibendum in pulvinar vel, varius vitae odio. Nulla volutpat posuere euismod. Fusce rutrum, velit vitae elementum lacinia, nisl augue aliquet ligula, at ultricies lacus augue at sem. Etiam sit amet libero mollis eros iaculis pretium. Vivamus facilisis quam non dolor pharetra, nec varius mauris consequat. Pellentesque convallis fermentum blandit. Suspendisse potenti. Nullam neque lorem, lacinia quis convallis eu, eleifend varius arcu. In hac habitasse platea dictumst.

Col 1 content area

Tab 6 Content

Tab 7 Content

Tab 8 Content