Typography and UI Kit – HTML Demo

Cover image

RHYTHM


Headings

Praparjo para un prasarro. Texto con texto externo nexto. Incluye negritas, cursivas, enlace y marcado.

Heading 2

Bienvenido a la jungla, aquí está la anaconda en mi cuello la tundra brillando por la rotonda el vato no es rata, él mueve las patas Y las morras salen cuando al micro le rezonga bitch, cowabunga, te quites o te pongas te rapeo en conga, tales de Macumba.

Heading 4

A. List item

  1. List item

¿Qué miras, ojete? No soy delincuente

Rateros los de corbata, esos los tienes en frente. Raperos, no invеnten, solo tengo veintе y ninguno hace nada nuevo, tengo que ser el siguiente.

Back to the ’90s

No Billie Eilish, mira mi foto, no tengo stylist Busca en Safari, no en el Atari, Vick Vaporub si es necessary (Check ‘em out) tu bitch me grita tanto que parece Álex Lora, su novio me odia y ella se enamora, en mi hood no roban tanto como una distribuidora disqueras no aguanto, no hacen nada, solo cobran su novio me odia y ella se enamora.

Esto parece ilegal

Trafico barras, no te hablo de drogas no es normal que la poli siempre nos ve y nos corra “criminal” nos dicen los vecinos y se asoman no es normal, no es normal, no es normal le digo: “porfa, cállate, siéntate y escúchame” que todo lo que hago parece que ya son crímenes porfa, ya relájate, respira y solo explícame ¿que por qué me veo así? no me discrimines.

Lists

Lista no ordenada

Lista ordenada

  1. List item
  2. List item
Kerning
Ajuste de espacio entre pares de letras.
Tracking
Espaciado uniforme aplicado a un texto.

Tables

HeaderHeaderHeader
CellCellCell
CellCellCell
CellCellCell
CellCellCell
CellCellCell

24px


Forms


Citas y código

Perfect vertical rhythm is achieved by multiple line spacing between elements.
— Imperavi, Typography

// Bloque de código
function rhythm(base, multiplier) {
  return base * multiplier; // px
}

Otros elementos semánticos

Detalles/summary

Contenido plegable para probar estado abierto/cerrado.

Texto con eliminado y insertado. También tachado si lo necesitas.
Atajo de teclado: Ctrl + S. Resultado de programa: OK.

Category: Development

Tags: ui typography coding

About the author

Kazztor
Kazztor · Engineer & Host

Builder of Kodex. Writes about code, self-hosting, and hospitality ops.