Cartas
Partes
Las cartas se contienen dentro de un .card que toma el ancho de lo que lo contenga y el alto de su contenido. Pueden tener cabecera, imagen, contenido y pie, no le afecta si no tiene alguno de sus
elementos.
<div class="card">
<div class="card-header">
<h3>Título</h3>
</div>
<div class="card-image">
<img src="img/gallery/callejon.jpeg" />
</div>
<div class="card-content">
<p>Contenido</p>
</div>
<div class="card-footer">
Pie <a href="#">Hipervínculo</a>
</div>
</div>
<div class="card">
<div class="card-image">
<img src="img/gallery/callejon.jpeg" />
</div>
<div class="card-footer">
<button class="button-small">Botón</button>
</div>
</div>
Cartas vacías
<div class="card card-empty">
<p>Carta vacía</p>
</div>
Tamaños
Para dejar el alto de las imagenes de las cartas del mismo tamaño, se agregan justo después de .card-image, las clases .card-height-small, .card-height-med ó
.card-height-big.
Con ésto no importará de que tamaño sea la imagen, todas las imagenes que tengan la misma clase, se verán del mismo tamaño.
<div class="card">
<div class="card-image card-height-small">
<img src="img/gallery/callejon.jpeg" />
</div>
</div>
<div class="card">
<div class="card-image card-height-med">
<img src="img/gallery/callejon.jpeg" />
</div>
</div>
<div class="card">
<div class="card-image card-height-big">
<img src="img/gallery/callejon.jpeg" />
</div>
</div>
Colapsable *
Las secciones colapsables son elementos que muestran el contenido cuando se le da click a su título, se utilizan comúnmente en las páginas de preguntas frecuentes.
Normalmente la funcionalidad se hace con javaScript, éste es un componente de prueba, tiene el alto máximo fijo para poder animarlo, por lo que si se tiene un contenido más grande que éste, no mostrará el contenido completo.
Se
puede solucionar quitando la animación y el alto máximo fijo de la clase, o haciendo más grande el alto máximo, pero si se hay secciones con contenido muy pequeño, igual parecerá que no se anima la transición de cerrado a abierto.
En fin, está bueno si son preguntas frecuentes de tamaños similares porque te ahorra la librería de la animación, pero no es óptimo si no se sabe que carajos va a tener de contenido. Úsese bajo su propio riesgo*
Con checkbox
Puedes abrir todas las secciones al mismo tiempo
<div class="collapsable">
<label for="cc-1">Título</label>
<input id="cc-1" type="checkbox" />
<div class="collapsable-content">
<p>Contenido... </p>
</div>
</div>
<div class="collapsable">
<label for="cc-2">Otro título</label>
<input id="cc-2" type="checkbox" />
<div class="collapsable-content">
<p>Contenido... </p>
</div>
</div>
Con radio button
Solo puedes abrir uno a la vez y siempre se mantiene abierto uno
<div class="collapsable">
<label for="cr-1">Título</label>
<input id="cr-1" type="radio" name="cr" checked="checked" />
<div class="collapsable-content">
<p>Contenido... </p>
</div>
</div>
<div class="collapsable">
<label for="cr-2">Título</label>
<input id="cr-2" type="radio" name="cr" />
<div class="collapsable-content">
<p>Contenido... </p>
</div>
</div>
<div class="collapsable">
<label for="cr-3">Título</label>
<input id="cr-3" type="radio" name="cr" />
<div class="collapsable-content">
<p>Contenido... </p>
</div>
</div>
Insignias
Las insignias tienen fondo de color principal y color de texto del color del fondo general, pero se puede agregar cualquiera de las variables que aparecen en la sección de color para editarlo.
1
2
123
<span class="badge">1</span>
<span class="badge bg-accent">2</span>
<span class="badge bg-white color-primary">123</span>
Migas de pan
Las migas de pan son esa sección en la cabecera de las páginas que nos dice en donde estamos y que nos permiten volver sobre nuestros pasos al origen de la página en que nos encontramos.
<div class="breadcrumb">
<a href="#" class="link-breadcrumb">Origen</a>
<a href="#" class="link-breadcrumb">Antes</a>
<span>Ahora</span>
</div>
Pestañas *
Estos componentes normalmente utilizan JavaScript para su funcionamiento. Los que están en ésta libredía están armados con input radio, para tener un elemento con dos estados.
Debe seguirse cuidadosamente la estructura del html, hasta el div consecutivo al input radio, para que funcione correctamente y especificar con las clases .tab-2, .tab-3 o .tab-4, la cantidad de
tabuladores que tendrá el componente .tags. Los elementos dentro de los divs que tengan acciones como links o botones deben tener el atributo tabindex="-1" para que al presional el tab no se
muevan los contenedores para buscar el contenido. Úsese con bajo su propio riesgo*
Dos pestañas
<div class="tabs">
<div class="tab-2">
<label for="tab2-1">Uno</label>
<input id="tab2-1" name="tabs-two" type="radio" checked="checked">
<div>
<h4>Pestaña uno</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in mauris <a tabindex="-1" href="#">maecenas faucibus</a> felis.
</p>
</div>
</div>
<div class="tab-2">
<label for="tab2-2">Dos</label>
<input id="tab2-2" name="tabs-two" type="radio" checked="checked">
<div>
<h4>Pestaña dos</h4>
<p>
Quisque vehicula risus ac sem rhoncus faucibus.
</p>
<button tabindex="-1">Botón</button>
</div>
</div>
</div>
Tres pestañas
<div class="tabs">
<div class="tab-3">
<label for="tab3-1">Uno</label>
<input id="tab3-1" name="tabs-three" type="radio" checked="checked">
<div>
<h4>Pestaña uno</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in mauris <a tabindex="-1" href="#">maecenas faucibus</a> felis.
</p>
</div>
</div>
<div class="tab-3">
<label for="tab3-2">Dos</label>
<input id="tab3-2" name="tabs-three" type="radio" checked="checked">
<div>
<h4>Pestaña dos</h4>
<p>
Quisque vehicula risus ac sem rhoncus faucibus.
</p>
<button tabindex="-1">Botón</button>
</div>
</div>
<div class="tab-3">
<label for="tab3-3">Tres</label>
<input id="tab3-3" name="tabs-three" type="radio" checked="checked">
<div>
<h4>Pestaña tres</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vehicula risus ac sem rhoncus faucibus.
</p>
</div>
</div>
</div>
Cuatro pestañas
<div class="tabs">
<div class="tab-4">
<label for="tab4-1">Uno</label>
<input id="tab4-1" name="tabs-four" type="radio" checked="checked">
<div>
<h4>Pestaña uno</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in mauris <a tabindex="-1" href="#">maecenas faucibus</a> felis.
</p>
</div>
</div>
<div class="tab-4">
<label for="tab4-2">Dos</label>
<input id="tab4-2" name="tabs-four" type="radio" checked="checked">
<div>
<h4>Pestaña dos</h4>
<p>
Quisque vehicula risus ac sem rhoncus faucibus.
</p>
<button tabindex="-1">Botón</button>
</div>
</div>
<div class="tab-4">
<label for="tab4-3">Tres</label>
<input id="tab4-3" name="tabs-four" type="radio" checked="checked">
<div>
<h4>Pestaña tres</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vehicula risus ac sem rhoncus faucibus.
</p>
</div>
</div>
<div class="tab-4">
<label for="tab4-4">Cuatro</label>
<input id="tab4-4" name="tabs-four" type="radio" checked="checked">
<div>
<h4>Pestaña cuatro</h4>
<p>
Consectetur adipiscing elit. Quisque vehicula risus ac sem rhoncus faucibus.
</p>
</div>
</div>
</div>
Separador
Para separar el contenido se puede utilizar simplemente la etiqueta <hr>
Línea uno
Línea dos
Línea uno
<hr>
Línea dos
Separador horizontal
El ancho del separador es el mismo al contenedor en donde se encuentre y el texto de separación puede ser el que sea.
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.
<p class="text-center">Lorem ipsum dolor sit amet.</p>
<div class="divider-horizontal">
<div class="divider-content">lo que sea</div>
</div>
<p class="text-center">Consectetur adipiscing elit.</p>
Separador vertical
Toma el alto de los elementos a los que separe, por lo mismo necesita que el contenido sea lo suficientemente alto para que puedan aparecer las líneas arriba y abajo del texto de separación.
Lorem ipsum dolor sit amet.
Consectetur adipiscing elit.
<div class="row">
<div class="flex-1_3">
<p class="text-center">Lorem ipsum dolor sit amet.</p>
</div>
<div class="divider-horizontal">
<div class="divider-content">lo que sea</div>
</div>
<div class="flex-1_3">
<p class="text-center">Consectetur adipiscing elit.</p>
</div>
</div>
Etiqueta con imagen