Elementos HTML
Informa a navegadores, buscadores y scripts sobre la página. Quien la visita no ve estos elementos, así que las tarjetas muestran solo el marcado.
Cambia la base de todas las URL relativas de la página y puede establecer un destino predeterminado para los enlaces. Usa como máximo uno y colócalo antes de cualquier etiqueta que contenga una URL.
Solo marcado: este elemento no se representa.
<base href="https://example.com/app/" target="_blank">LUZ no añade estilos: se mantiene el aspecto del navegador. También reescribe los enlaces solo con fragmento, como href="#top", así que úsalo con cuidado.
La parte de la página que quien la visita nunca ve: el título, el juego de caracteres, las hojas de estilos, los scripts y otros ajustes del navegador.
Solo marcado: este elemento no se representa.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My page</title>
</head>LUZ no añade estilos: se mantiene el aspecto del navegador.
Indica al navegador un archivo que necesita la página, normalmente una hoja de estilos, pero también iconos y recursos precargados. Carga primero tokens, luego core y, por último, el catálogo.
Solo marcado: este elemento no se representa.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/tokens@0.3.0/dist/luz-tokens.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@luz-ds/core@0.3.0/dist/luz.min.css">LUZ no añade estilos: se mantiene el aspecto del navegador.
Ajustes e información para navegadores y buscadores que no tienen una etiqueta propia: juego de caracteres, ventana gráfica, descripción y esquema de color.
Solo marcado: este elemento no se representa.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A vanilla design system in plain CSS.">LUZ no añade estilos: se mantiene el aspecto del navegador.
CSS escrito directamente en la página. Es mejor enlazar una hoja de estilos y reservar esto para unas pocas líneas de CSS crítico o generado.
Solo marcado: este elemento no se representa.
<style>
.banner { padding: var(--luz-space-md); }
</style>LUZ no añade estilos: se mantiene el aspecto del navegador.
El nombre de la página. Los navegadores lo muestran en la pestaña, los marcadores y los resultados de búsqueda lo usan, y los lectores de pantalla lo anuncian primero.
Solo marcado: este elemento no se representa.
<title>HTML elements: LUZ Design System</title>LUZ no añade estilos: se mantiene el aspecto del navegador.