Componentes · Ola 4 · Editorial

Eyebrow

La línea sobre un titular: el tema como link, una regla y la fecha. En la letra de las etiquetas de Arche (IBM Plex Mono de 12 px en mayúsculas, en text-subtle). El tema va en el color de link porque lleva a su archivo; sin corchetes ni píldoras.

import { Eyebrow } from '@archeblack/ui';

Ejemplos

Tema y fecha

El tema como link, la regla y la fecha, en Arche y en Hermes (data-product="hermes"): el link usa el rol link, así el tema sale en el acento del producto. Si no entran en una línea, la fecha baja y la regla ocupa el resto.

Filosofía 27 jul 2026

Svelte

<script lang="ts">
	import '@archeblack/ui/products/hermes.css';
	import { Eyebrow } from '@archeblack/ui';
</script>

<!-- El tema es un link a su archivo, en el rol link: blanco en Arche y el acento en cada producto.
     La regla ocupa lo que queda y la fecha va al final. -->
<div style="display: grid; gap: var(--arche-spacing-6); width: 100%">
	<Eyebrow topic="Filosofía" href="#filosofia" date="2026-07-27" />
	<Eyebrow data-product="hermes" topic="Filosofía" href="#filosofia" date="2026-07-27" />
</div>

En un listado del tema

En la página del propio tema, el tema es texto y el final, la cantidad de artículos.

Tema 5 artículos

Svelte

<script lang="ts">
	import { Eyebrow } from '@archeblack/ui';
</script>

<!-- En la página del propio tema, el tema es texto y el final, un dato propio. -->
<div style="width: 100%">
	<Eyebrow topic="Tema">
		{#snippet end()}5 artículos{/snippet}
	</Eyebrow>
</div>

Sin regla, inicio propio y centrado

Sin regla, el separador es « · ». El inicio propio sirve para la página de error, con la ruta en <code>. Centrado no lleva regla.

Cultura 14 may 2026

Error 404 /publicaciones/el-alma-pide-locura-2

Manifiesto 1 ene 2026

Svelte

<script lang="ts">
	import { Eyebrow } from '@archeblack/ui';
</script>

<!-- Sin regla (en una tarjeta), con un inicio propio y centrado. -->
<div style="display: grid; gap: var(--arche-spacing-6); width: 100%">
	<Eyebrow topic="Cultura" href="#cultura" date="2026-05-14" rule={false} />
	<Eyebrow>
		{#snippet start()}Error 404{/snippet}
		{#snippet end()}<code>/publicaciones/el-alma-pide-locura-2</code>{/snippet}
	</Eyebrow>
	<Eyebrow topic="Manifiesto" date="2026-01-01" align="center" />
</div>

Props

Props de Eyebrow
Prop	Descripción
`topic?` `string`	El tema, al inicio. Con `href` es un link en el color de link (D8a); sin `href`, texto en `text-subtle`.
`href?` `string`	Destino del tema: su archivo.
`start?` `Snippet`	Inicio propio, en lugar de `topic` (por ejemplo, «Error 404»).
`date?` `Date \| string`	Fecha del final, en un `<time>`. Un texto va tal cual en `datetime` (ISO) y una `Date`, con `toISOString()`. Se muestra como «27 jul 2026».
`locale?` `string` Por defecto `'es'`	Idioma del formato de fecha.
`timeZone?` `string` Por defecto `'UTC'`	Zona horaria del formato. En UTC el servidor y el navegador muestran el mismo día.
`end?` `Snippet`	Final propio, en lugar de `date`: «5 artículos» o una ruta en `<code>` (sin mayúsculas y partida donde haga falta).
`rule?` `boolean` Por defecto `true`	Regla entre el inicio y el final. Sin final o centrado no hay regla; sin regla, el separador es « · ».
`align?` `'start' \| 'center'` Por defecto `'start'`	Centrado, para una cabecera centrada (el manifiesto). Centrado no lleva regla.
`class?` `ClassValue`	Se suma a `arche-eyebrow`.
`...rest` `HTMLAttributes`	Van al `<p>` raíz.

Accesibilidad

Es un párrafo (<p>): se lee como una línea, antes del título. La regla y el separador son decorativos (aria-hidden).
La fecha es un <time datetime> con el valor ISO: el lector la lee en palabras y un buscador la entiende.
El tema como link tiene su subrayado (no depende solo del color) y un área de 26 px de alto sin mover la línea (WCAG 2.5.8).
Las mayúsculas son de CSS: el texto sigue escrito como frase.
En colores forzados la regla es un borde (queda en el color del texto) y el link toma el color de links del sistema.

Qué evitar

Corchetes o píldoras alrededor del tema («[ FILOSOFÍA ]»). El tema solo, en el color de link si lleva a su archivo.
Un número delante del tema («01 / Filosofía»). Solo el tema (D11b).
El tema como link en la página del propio tema. Texto, sin href: un link a la página en la que ya estás no lleva a ningún lado.
Una cifra gigante como titular de la página de error. «Error 404» en el eyebrow y el titular en palabras (D2).