En la siguiente lista solo se muestran alguno de los shortcodes. Parrafos, encabezados y demás componentes básicos son omitidos.

Importante: Antes de utilizar alguno de estos shortcodes procura tener activado el visor HTML en tu entrada.

Básico

Leads

<p class="leads">Tu mensaje</p>

---

Drop caps

<p class="drop-caps">Tu mensaje</p>

Tablas

<div class="table">
  <table>
      <tr class="table-headline">
        <th>th.headline-content</th>
        <th>th.headline-content</th>
        <th>th.headline-content</th>
      </tr>
      <tr class="table-body">
        <td>td.content-text</td>
        <td>td.content-text</td>
        <td>td.content-text</td>
      </tr>
    </table>
</div>

---

Video y audio

video

<div class="cv-embed">
  <iframe src="url_video"></iframe>
  <!-- o <video src="url_video" controls></video> -->
</div>

audio

<audio controls="">
  <source src="url_audio" type="audio/mp3">
</audio>

---

Alerts

<p class="alert">Tu mensaje</p>

Estilos adicionales

Si copias y usas el html anterior, obtendremos un estilo por defecto en nuestro alert lo cual dependiendo del caso no nos sería de mucha ayuda. Por ello se han diseñado 4 estilos adicionales para suplir las diferentes acciones que quieras transmitir en tus Alerts.

Nombre clase	Tipo de mensaje
alert	Cualquier tipo de mensaje
alert-red	Mensajes de error
alert-green	Mensajes de éxito
alert-blue	Mensajes de tips y/o consejos
alert-yellow	Mensajes de alertas o avisos

para usar alguno de los estilos mencionados arriba, simplemente cambia el valor alert del atributo class por alguno disponible arriba.

---

Imagenes

Alinear una imagen

Para alinear una imagen ya sea a la izquierda o derecha, debemos usar uno de las siguientes clases en una etiqueta <img>.

Nombre clase	Resultado
align-image:left	Alinea una imagen a la izquierda
align-image:right	Alinea una imagen a la derecha
align-image:clear	Evita que elementos flotantes se situen uno al lado de otro.

Siguiendo la tabla anterior, si quisieramos alinear nuestra imagen a la izquierda, bastaría con escoger la clase correspondiente. En este caso align-image:left:

<p><img class="align-image:left" src="url_imagen"/> ...Tu mensaje</p>
<div cass="align-image:clear"></div>

Es importante que la imagen se encuentre dentro de un elemento en bloque y que éste esté seguido de una etiqueta con la clase align-image:clear.

Estilos

Sombreado

<div class="image image:shadow">
  <img src="url_imagen">
</div>

---

Con texto

<div class="image image:caption" data-caption="Tu texto va aquí">
  <img src="url_imagen">
</div>

Si quieres intercambiar la posición del texto. Reemplaza image:caption por image:caption-top o image:caption-bottom

---

<div class="image image:caption-overlay" data-caption="Tu texto va aquí">
  <img src="url_imagen">
</div>

Si quieres intercambiar la posición del texto. Reemplaza image:caption-overlay por image:caption-overlay-top o image:caption-overlay-bottom

---

<div class="image image image:caption-hover" data-caption="Tu texto va aquí">
  <img src="url_imagen">
</div>

Tabs

horizontal

<div class="cv-tabs">
  <div class="cv-tabs-select">
    <button class="is-selected">tab item #1</button>
    <!-- {...botones} -->
  </div>
  <div class="cv-tabs-body">
    <div class="cv-tabs-item is-selected">
      Tu mensaje
    </div>
    <!-- {...contenido} -->
  </div>
</div>

Vertical

<div class="cv-tabs cv-tabs--vertical">
  <div class="cv-tabs-select">
    <button class="is-selected">tab item #1</button>
    <!-- {...botones} -->
  </div>
  <div class="cv-tabs-body">
    <div class="cv-tabs-item is-selected">
      Tu mensaje
    </div>
    <!-- {...contenido} -->
  </div>
</div>

Spoiler

normal

<div class="cv-toggle">
  <div class="cv-toggle__trigger cv-btn">nombre spoiler</div>
  <div class="cv-toggle__body">
    <!-- {contenido} -->
  </div>
</div>

<div class="cv-toggle">
  <div class="cv-toggle__trigger cv-btn"><i class="fas fa-plus ico"></i> nombre spoiler</div>
  <div class="cv-toggle__body">
    <!-- {contenido} -->
  </div>
</div>

accordion

<div class="cv-accordion">
  <div class="cv-accordion__trigger cv-btn">Nombre spoiler</div>
  <div class="cv-accordion__body">
    <!-- {contenido} -->
  </div>
</div>

---

Botones

<!-- Botón por defecto -->
<a href="#" class="cv-btn">botón por defecto</a>
<!-- Botón con un ícono -->
<a href="#" class="cv-btn"><i class="fas fa-plus"></i> botón por defecto</a>
<!-- Botón de solo ícono -->
<a href="#" class="cv-btn cv-btn:icon"><i class="fas fa-plus"></i></a>

estilos adicionales

Nombre clase	Tipo de mensaje
cv-btn	Estilo por defecto
cv-btn:red	Devuelve un tono de rojo
cv-btn:green	Devuelve un tono de verde
cv-btn:blue	Devuelve un tono de azul
cv-btn:yellow	Devuelve un tono de amarillo
cv-btn:color	Devuelve el color principal

para usar alguno de los estilos mencionados arriba, simplemente cambia el valor cv-btn del atributo class por alguno de los disponible arriba.