Fundamentos
Clases sueltas que se aplican sobre marcado que ya existe: eyebrow, highlight e inactive van sobre el elemento que lleva el texto; button-group, field-group y prose, sobre el contenedor.
Separa un conjunto de botones. En pantallas estrechas los apila; a partir de 768px los pone en fila.
<div class="button-group">
<button class="button primary">Pagar factura</button>
<button class="button secondary">Descargar en PDF</button>
<button class="button secondary">Enviar por email</button>
</div>Etiqueta pequeña en mayúsculas con interletraje amplio, que antecede a un titular.
<span class="eyebrow">Hosting</span>
<h2>Rendimiento pensado para WordPress</h2>Apila campos de formulario con la separación del sistema.
<div class="field-group">
<vadavo-checkbox name="newsletter" checked>Suscribirme a la newsletter.</vadavo-checkbox>
<vadavo-checkbox name="terms" required>Acepto los términos y condiciones de uso.</vadavo-checkbox>
<vadavo-checkbox name="stack" disabled>Número nuevo desde un stack</vadavo-checkbox>
</div>Subrayado a mano alzada que marca un tramo de texto. Va sobre un span que envuelve el tramo, acompañada de su variante: primary para lo principal y secondary para lo secundario. Las dos conviven en el mismo texto, sea un titular o un párrafo.
<h2>Soporte <span class="highlight primary">de verdad</span>, sin <span class="highlight secondary">letra pequeña</span></h2>La altura del trazo va en em, así que sigue al tamaño de letra de lo que subraya, de un h1 a un párrafo, y el trazo se estira para cubrir todo el tramo.
Cámbiate cuando quieras: sin permanencia.
<h1>1 Gbps de <span class="highlight primary">fibra</span> simétrica</h1>
<h2>Soporte <span class="highlight secondary">de verdad</span></h2>
<h3>Disponible <span class="highlight primary">24 horas</span></h3>
<p>Cámbiate cuando quieras: <span class="highlight secondary">sin permanencia</span>.</p>| Token | Qué es |
|---|---|
--highlight--color--primary | El color del trazo en la variante primary. |
--highlight--color--secondary | El color del trazo en la variante secondary. |
--highlight--mask--stroke | La imagen de máscara (mask-image) con la forma del trazo. |
Da a un fragmento de texto el color del texto inactivo.
slupu.com no está disponible
<p><span class="inactive">slupu.com</span> no está disponible</p>Ritmo vertical de una columna de prosa: separa cada bloque hijo directo del siguiente y deja el último sin separación, para que el contenedor no acabe con hueco sobrante. Los titulares conservan su propio margen, más estrecho, que los mantiene junto al texto que introducen.
Un párrafo, y debajo otro.
El último bloque no arrastra separación.
<div class="prose">
<h2>Un titular</h2>
<p>Un párrafo, y debajo otro.</p>
<p>El último bloque no arrastra separación.</p>
</div>