Botones
<button class="btn-space">Space</button>
<button class="btn-power">Power</button>
<button class="btn-reality">Reality</button>
<button class="btn-soul">Soul</button>
<button class="btn-time">Time</button>
<button class="btn-mind">Mind</button>
Tamanos de botones
<button class="btn-space btn-flex btn-block">btn-flex</button>
<button class="btn-power wi-20">wi-20</button>
<button class="btn-reality wi-40">wi-40</button>
<button class="btn-soul wi-60">wi-60</button>
<button class="btn-time wi-80">wi-80</button>
Grupos de botones
<div class="btn-grp">
<button class="btn-reality">1</button>
<button class="btn-time">2</button>
</div>
<div class="btn-grp flex">
<button class="btn-mind">3</button>
<button class="btn-soul">4</button>
<button class="btn-space">5</button>
</div>
Etiquetas
Título de la sección eti
Título de la sección eti
Título de la sección eti
Título de la sección eti
Título de la sección eti
<h2>Título de la sección <span class="eti eti-power">eti</span></h2>
<h3>Título de la sección <span class="eti eti-reality">eti</span></h3>
<h4>Título de la sección <span class="eti eti-soul">eti</span></h4>
<h5>Título de la sección <span class="eti eti-time">eti</span></h5>
<h6>Título de la sección <span class="eti eti-mind">eti</span></h6>
<button class="btn-space btn-flex btn-block">Botón <span class="eti eti-mind">eti</span></button>
Alertas
<div class="alert-space wi-60">Texto de prueba para la alerta<span class="icon icon-cross closable"></span></div>
<div class="alert-power wi-60">Texto de prueba para la alerta<span class="icon icon-cross closable"></span></div>
<div class="alert-reality wi-60">Texto de prueba para la alerta<span class="icon icon-cross closable"></span></div>
<div class="alert-soul wi-60">Texto de prueba para la alerta<span class="icon icon-cross closable"></span></div>
<div class="alert-time wi-60">Texto de prueba para la alerta<span class="icon icon-cross closable"></span></div>
<div class="alert-mind wi-60">Texto de prueba para la alerta<span class="icon icon-cross closable"></span></div>
Listas
- lorem
- lorem
- lorem
- lorem
- lorem
- lorem
<ul class="lista1 wi-20">
<li class="li-space">lorem</li>
<li class="li-power">lorem</li>
<li class="li-reality">lorem</li>
<li class="li-soul">lorem</li>
<li class="li-time">lorem</li>
<li class="li-mind">lorem</li>
</ul>
Grupo de listas
- lorem
- lorem
- lorem
- lorem
- lorem
<ul class="li-grp">
<li class="li-elem li-active">lorem</li>
<li class="li-elem li-disabled">lorem</li>
<li class="li-elem">lorem</li>
<li class="li-elem bg-mind">lorem</li>
<li class="li-elem">lorem</li>
</ul>
Paneles retractiles
Título del panel
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repudiandae necessitatibus nisi quae quas nihil eum neque, quos atque? Cumque aliquam quasi modi reprehenderit eaque voluptatibus et non iure nesciunt!
<div class="panel wi-90">
<div class="pan-title pan-space">
<h3 class="pan-h3">Título del panel <span class="icon icon-minus"></span></h3>
</div>
<div class="pan-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repudiandae necessitatibus nisi quae quas
nihil eum neque, quos atque? Cumque aliquam quasi modi reprehenderit eaque voluptatibus et
</p>
</div>
</div>
Inputs
<input type="text" class="in-standard" placeholder="texto">
<input type="text" class="in-space" placeholder="texto">
<input type="text" class="in-power" placeholder="texto">
<input type="text" class="in-reality" placeholder="texto">
<input type="text" class="in-soul" placeholder="texto">
<input type="text" class="in-time" placeholder="texto">
<input type="password" class="in-mind" placeholder="texto">
Grupos de inputs
<div class="in-grp">
<input type="text" class="in-space wi-20" value="texto">
<input type="text" class="in-power" value="texto">
<input type="text" class="in-reality" value="texto">
</div>
Checkbox y Radio buttons
Checkbox
<label class="ch-div">OPCION 4
<div class="boton-check"></div><input class="chbox" name="grupoC" class="chbox" type="checkbox">
</label>
<label class="ch-div li-disabled">
<div class="boton-check chk-disabled"></div>OPCION 5<input class="chbox" name="grupoC" type="checkbox" disabled>
</label>
Radio buttons
<label class="ra-div">OPCION 4
<div class="boton-rad"></div><input class="rad" name="grupo1" type="radio">
</label>
<label class="ra-div li-disabled">OPCION 5
<div class="boton-rad rad-disabled"></div><input class="rad" name="grupo1" type="radio" disabled>
</label>
Labels
<div class="div-lab lab-standard">
<label for="" class="lab">Lorem label</label>
</div>
<div class="div-lab lab-space">
<label for="" class="lab">Lorem label</label>
</div>
<div class="div-lab lab-power">
<label for="" class="lab">Lorem label</label>
</div>
<div class="div-lab lab-reality">
<label for="" class="lab">Lorem label</label>
</div>
<div class="div-lab lab-soul">
<label for="" class="lab">Lorem label</label>
</div>
<div class="div-lab lab-time">
<label for="" class="lab">Lorem label</label>
</div>
<div class="div-lab lab-mind">
<label for="" class="lab">Lorem label</label>
</div>
Select
<select name="" id="" class="sel-standard wi-40">
<option value="">lorem</option>
<option value="">lorem</option>
</select>
<select name="" id="" class="sel-space wi-40">
<option value="">lorem</option>
<option value="">lorem</option>
</select>
<select name="" id="" class="sel-power wi-40">
<option value="">lorem</option>
<option value="">lorem</option>
</select>
<select name="" id="" class="sel-reality wi-40">
<option value="">lorem</option>
<option value="">lorem</option>
</select>
<select name="" id="" class="sel-soul wi-40">
<option value="">lorem</option>
<option value="">lorem</option>
</select>
<select name="" id="" class="sel-time wi-40">
<option value="">lorem</option>
<option value="">lorem</option>
</select>
<select name="" id="" class="sel-mind wi-40">
<option value="">lorem</option>
<option value="">lorem</option>
</select>
Textarea
<div class="txtarcontainer wi-80"><textarea class="txar" name="" id="" cols="30" rows="10"></textarea>
<div class="wordCdiv">
<label for="" class="charcount">Caracteres: <span class="chars">0</span></label>
</div>
</div>
Links
Links (a)
<a href="#" class="a-link">ESTE ES UN LINK</a>
Barra de navegación
Barra de navegacion
<header class="header-sticky">
<nav class="navegacion">
<span class="menu" id="menu-btn">
<i class="icon icon-menu"></i>
</span>
<a href="#" class="logo" id="sctop">Nav con secciones</a>
<ul class="lista" id="ul-nav">
<li class="navli">
<a href="#uno" class="li-nav act">Opción 1</a>
</li>
<li class="navli">
<a href="#dos" class="li-nav">Opción 2</a>
</li>
<li class="navli">
<a href="#tres" class="li-nav">Opción 3</a>
</li>
</ul>
</nav>
</header>
Imagenes
Imágenes
![](img/img1.jpg)
![](img/img2.png)
![](img/img4.jpg)
<div class="panel wi-80">
<div class="pan-title pan-time">
<h3 class="pan-h3">Imágenes <span class="icon icon-minus"></span></h3>
</div>
<div class="pan-body">
<img src="img/img1.jpg" alt="" class="img-r imagen-b-r ">
<img src="img/img2.png" alt="" class="img-r imagen-circulo imagen-marco">
<img src="img/img4.jpg" alt="" class="img-r imagen-marco">
</div>
</div>
Elemento de galeria
![](img/img4.jpg)
Elemento de galería
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi facilis placeat optio? Quisquam et porro necessitatibus sequi. Architecto omnis debitis reprehenderit cum ratione optio fugit, obcaecati maxime impedit, atque necessitatibus.
<div class="gallery-item">
<img src="img/img4.jpg" alt="" class="img-r">
<div class="img-prop">
<h3>Elemento de galería</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi facilis placeat optio? Quisquam et
porro necessitatibus sequi. Architecto omnis debitis reprehenderit cum ratione optio fugit, obcaecati
maxime impedit, atque necessitatibus.</p>
</div>
</div>
Imágenes dentro de un pánel
![](img/img4.jpg)
Elemento de galería 1
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi facilis placeat optio? Quisquam et porro necessitatibus sequi. Architecto omnis debitis reprehenderit cum ratione optio fugit, obcaecati maxime impedit, atque necessitatibus.
![](img/img4.jpg)
Elemento de galería 2
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi facilis placeat optio? Quisquam et porro necessitatibus sequi. Architecto omnis debitis reprehenderit cum ratione optio fugit, obcaecati maxime impedit, atque necessitatibus.
Carrusel de imagenes
![](img/img1.jpg)
![](img/img2.png)
![](img/img4.jpg)
![](img/img3.jpg)
<div class="carrusel">
<div class="prev-slide">
<span class="icon icon-arrow-left"></span>
</div>
<div class="cont-img">
<img src="img/img1.jpg" alt="" class="curr">
<img src="img/img2.png" alt="" class="next">
<img src="img/img4.jpg" alt="" class="">
<img src="img/img3.jpg" alt="" class="prev">
</div>
<div class="next-slide">
<span class="icon icon-arrow-right"></span>
</div>
<div class="marcas">
<div class="cont-marcas">
<span class="icon icon-diamonds d-active"></span>
<span class="icon icon-diamonds"></span>
<span class="icon icon-diamonds"></span>
<span class="icon icon-diamonds"></span>
</div>
</div>
</div>
Section - Article - Aside
ARTICLE
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic ab minus alias ex nesciunt odit, cum obcaecati dolorem! Labore animi veritatis officia saepe hic neque alias commodi in. Recusandae, nam?
- lorem
- lorem
- lorem
- lorem
- lorem
<section>
<article class="wi-60 delim">
<h1>ARTICLE</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic ab minus alias ex nesciunt odit, cum obcaecati dolorem! Labore animi veritatis officia saepe hic neque alias commodi in. Recusandae, nam?</p>
<ul class="li-grp">
<li class="li-elem li-active">lorem</li>
<li class="li-elem li-disabled">lorem</li>
<li class="li-elem">lorem</li>
<li class="li-elem bg-mind">lorem</li>
<li class="li-elem">lorem</li>
</ul>
</article>
<aside class="delim">
<h1>ASIDE</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas facere asperiores nulla odit quae tempora, rerum omnis pariatur numquam sit adipisci perferendis quisquam sequi temporibus autem voluptatum aut voluptate praesentium.</p>
</aside>
</section>