Estilos para contenido

Los estilos de contenido son todo aquello que enriquece el texto que escribimos (párrafos, listas, etc...). En este articulo te mostrare todos los que encontraras disponibles en nuestros trabajos.

Recursos que te pueden ayudar

code Lista de componentes disponibles description Estilos de contenido help ¿Necesitas ayuda?

Párrafos

<p>...</p>

Lead

<p class='lead'>...</p>

Drop caps

<p class='drop-caps'>...</p>

Blockquote

<blockquote>...</blockquote>

Tablas

<div class="table">
  <table>
    <tr class="table-headline">
      <th>...</th>
      {...}
    </tr>
    <tr class="table-body">
      <td>...</td>
      {....}
    </tr>
  </table>
</div>

Si desea que la tabla abarque todo el ancho del contenedor agregue la clase is-expanded a la clase table.

Separadores

<hr>
<hr class='is-dashed'>
<hr class='is-dotted'>
<hr class='is-double'>

Imágenes expandidas

<p class="img-expand">
    <img src="{url-image}">
</p>

Embed

Basico

<div class="embed aspect-16:9">
    <iframe src="{url}"></iframe>
</div>

<div class="embed aspect-16:9">
    <video controls><source src="{url-video}" type="video/mp4"></video>
</div>

Extendido

<div class='embed-extended'>
    <div class="embed aspect-16:9">
        <video controls><source src="{url-video}" type="video/mp4"></video>
    </div>
</div>

Aspect ratio

Para cambiar el aspect ratio de los videos, cambie la clase aspect-16:9 por aspect-3:2 o aspect-4:3