Intégrate León
cover
  • Main
  • Dark
  • Soft
  • Softer
  • Second
  • Dark
  • Soft
  • Softer
  • Darker
  • Dark
  • Neutro
  • Soft
  • Softer
box-info (default)
box-info.ok
box-info.warning

THEME V1.0

H1 Encabezado

H2 Encabezado

H3 Encabezado

H4 Encabezado

H5 Encabezado
H6 Encabezado

< p class="txt-small" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras feugiat mollis scelerisque. Ut dictum massa neque, non finibus elit scelerisque suscipit. Curabitur mollis auctor aliquet. Aliquam condimentum ullamcorper nulla, at porttitor mauris maximus id. Sed iaculis nec nulla nec commodo. Nulla vel mattis lacus. Maecenas viverra neque in tempor porttitor. Praesent semper pretium ipsum, id euismod velit commodo a. Donec eu finibus ligula. Elemplo de enlace

  • Gradient Main Soft
  • Gradient Main
  • Gradient Main dark

Los gradientes se determinan con la propiedad backgroubd-image, ejem:
{ background-image:var(--gradient-main); }

  • Gradient Second Soft
  • Gradient Second
  • Gradient Second dark
  • Gradient Neutro Soft
  • Gradient Neutro
  • Gradient neutro darker
  • Gradient combinado uno
  • Gradient combinado dos
  • Gradient combinado tres

< p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras feugiat mollis scelerisque. Ut dictum massa neque, non finibus elit scelerisque suscipit. Curabitur mollis auctor aliquet. Aliquam condimentum ullamcorper nulla, at porttitor mauris maximus id. Sed iaculis nec nulla nec commodo. Nulla vel mattis lacus. Maecenas viverra neque in tempor porttitor. Praesent semper pretium ipsum, id euismod velit commodo a. Donec eu finibus ligula. Mauris faucibus dapibus placerat. Elemplo de enlace eu turpis non lectus varius consequat. Aliquam erat volutpat. Nulla luctus egestas tellus sit amet efficitur. Sed a venenatis nisi. Mauris elementum, velit eu venenatis commodo, lectus purus varius ante, sit amet tempus felis dui sed mi. Mauris ipsum ante, hendrerit nec blandit at, congue vitae nisi. Sed tincidunt, tellus placerat ornare pellentesque, eros erat mattis felis, nec venenatis libero ligula ac ex. Proin et nisl eu enim interdum sagittis.

< p class="large" >
Content 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras feugiat mollis scelerisque. Ut dictum massa neque, non finibus elit scelerisque suscipit. Curabitur mollis auctor aliquet. Aliquam condimentum ullamcorper nulla, at porttitor mauris maximus id. Sed iaculis nec nulla nec commodo. Nulla vel mattis lacus. Maecenas viverra neque in tempor porttitor. Praesent semper pretium ipsum, id euismod velit commodo a. Donec eu finibus ligula. Elemplo de enlace

< p class="medium" >
Content 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras feugiat mollis scelerisque. Ut dictum massa neque, non finibus elit scelerisque suscipit. Curabitur mollis auctor aliquet. Aliquam condimentum ullamcorper nulla, at porttitor mauris maximus id. Sed iaculis nec nulla nec commodo. Nulla vel mattis lacus. Maecenas viverra neque in tempor porttitor. Praesent semper pretium ipsum, id euismod velit commodo a. Donec eu finibus ligula. Elemplo de enlace

< p class="small" >
Content 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras feugiat mollis scelerisque. Ut dictum massa neque, non finibus elit scelerisque suscipit. Curabitur mollis auctor aliquet. Aliquam condimentum ullamcorper nulla, at porttitor mauris maximus id. Sed iaculis nec nulla nec commodo. Nulla vel mattis lacus. Maecenas viverra neque in tempor porttitor. Praesent semper pretium ipsum, id euismod velit commodo a. Donec eu finibus ligula. Elemplo de enlace

< p class="add-columns" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras feugiat mollis scelerisque. Ut dictum massa neque, non finibus elit scelerisque suscipit. Curabitur mollis auctor aliquet. Aliquam condimentum ullamcorper nulla, at porttitor mauris maximus id. Sed iaculis nec nulla nec commodo. Nulla vel mattis lacus. Maecenas viverra neque in tempor porttitor. Praesent semper pretium ipsum, id euismod velit commodo a. Donec eu finibus ligula. < p class="add-columns" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras feugiat mollis scelerisque. Ut dictum massa neque, non finibus elit scelerisque suscipit. Curabitur mollis auctor aliquet. Aliquam condimentum ullamcorper nulla, at porttitor mauris maximus id. Sed iaculis nec nulla nec commodo. Nulla vel mattis lacus. Maecenas viverra neque in tempor porttitor. Praesent semper pretium ipsum, id euismod velit commodo a. Donec eu finibus ligula.

Listas

< ul > (default)

  • Item 1
  • Item 2
  • Item 3

< ol > (default)

  1. Item 1
  2. Item 2
  3. Item 3

LIST ICON
< ul class="list-icon" >
< li >
< svg class="svg-icon" >
< use xlink:href="#icon-" >
< span > Nombre

  • #icon-ok
  • #icon-ok2
  • #icon-ok-full
  • #icon-arrow

Icons

  • #icon-home
  • #icon-btnmovil
  • #icon-btnmovil2
  • #icon-ok
  • #icon-ok2
  • #icon-ok-full
  • #icon-arrow
  • #icon-arrow-drop
  • #icon-email
  • #icon-search
  • #icon-pin
  • #icon-blog
  • #icon-download
  • #icon-close
  • #icon-movil
  • #icon-phone
  • #icon-facebook
  • #icon-whatsapp
  • #icon-youtube
  • #icon-instagram
  • #icon-twitter
  • #icon-linkedin
  • #icon-libelula
  • #icon-kubox
  • #icon-klu
  • #icon-send

< I > I © I ® I — I ¯ I – I — I ° I · I º I × I • I … I ← I ↑ I → I ↓

Buscador

Check enable-disable

Checkbox

Radio

Select

Formulario

  • Enviar
  • ....

Social bar

< ul class="menu add-button rounded social-bar" >

Social bar + vertical

< ul class="menu vertical add-button rounded social-bar" >

Floating

< ul class="social-bar vertical" >

Boton base

Botón individual: < a class="button" >
Menú: < ul class="menu add-button" >

  • Button < a >
  • < a >
  • Button < span >
  • < span >

TAG: usamos < span > (no links)
Botón individual: < a class="tag" >
Menú: < ul class="menu add-add-tag" >

  • Tag < span >
  • < span >

MEDIUM

  • Button < a >
  • < a >
  • Button < span >
  • < span >
  • Tag < span >
  • < span >

SMALL

  • Button < a >
  • < a >
  • Button < span >
  • < span >
  • Tag < span >
  • < span >

Botón individual: < a class="button rounded" >
Menú: < ul class="menu add-button rounded" >

  • Button < a >
  • < a >
  • Button < span >
  • < span >
  • Tag < span >
  • < span >

MEDIUM

  • Button < a >
  • < a >
  • Button < span >
  • < span >
  • Tag < span >
  • < span >

SMALL

  • Button < a >
  • < a >
  • Button < span >
  • < span >
  • Tag < span >
  • < span >

Botón individual: < a class="button outline" >
Menú: < ul class="menu add-button outline" >

  • Button < a >
  • < a >
  • Button < span >
  • < span >
  • Tag < span >
  • < span >

MEDIUM

  • Button < a >
  • < a >
  • Button < span >
  • < span >
  • Tag < span >
  • < span >

SMALL

  • Button < a >
  • < a >
  • Button < span >
  • < span >
  • Tag < span >
  • < span >

Botón individual: < a class="button rounded outline" >
Menú: < ul class="menu add-button rounded outline" >

  • Button < a >
  • < a >
  • Button < span >
  • < span >
  • Tag < span >
  • < span >

MEDIUM

  • Button < a >
  • < a >
  • Button < span >
  • < span >
  • Tag < span >
  • < span >

SMALL

  • Button < a >
  • < a >
  • Button < span >
  • < span >
  • Tag < span >
  • < span >

Menu actions

Menú: < ul class="menu-actions add-button" >

  • Button < a >
  • < a >
  • Button < span >
  • < span >

Menu tools

Botón individual: < a class="button button-tools small rounded" >
Menú: < ul class="menu add-button add-button-tools small rounded" >

  • Button < a >
  • < a >
  • Button < span >
  • < span >
  • Tag < span >
  • < span >

Menu tags

Botón individual: < a class="button button-tags small" >
Menú: < ul class="menu add-button add-button-tags small" >

  • Button < a >
  • < a >
  • Button < span >
  • < span >
  • Tag < span >
  • < span >

Menu inline

Botón individual: < a class="button-inline" >
Menú: < ul class="menu add-button-inline" >

  • Button < a >
  • < a >
  • Button < span >
  • < span >

MODALES

< a href="#modal-simple" rel="modal:open" >
< a href="modal-simple.html" rel="modal:open" >
< a href="#modal-simple" rel="modal:close" >