Heading

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

<!-- Los cinco tamaños, con el mismo nivel: el nivel es la semántica y el tamaño, la voz. -->
<div style="display: grid; gap: var(--arche-spacing-8); width: 100%">
	<Heading level={4} size="4xl">El Alma Pide Locura</Heading>
	<Heading level={4} size="2xl">Jimmy Mora</Heading>
	<Heading level={4} size="xl">La silla ocupada</Heading>
	<Heading level={4} size="lg">La esquina</Heading>
	<Heading level={4} size="md">Hécate de los tres caminos</Heading>
</div>

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

	/** Titulares reales de Hermes. */
	const titles = [
		'Lo que cambia cuando alguien escucha',
		'El Doctor que Bailó con el Tiempo',
		'Lo Numinoso en CONTROL'
	];
</script>

<!-- Con text-wrap: balance, las líneas quedan parejas y ninguna termina con una palabra sola. -->
<div style="display: grid; gap: var(--arche-spacing-10); width: 100%">
	{#each titles as title (title)}
		<Heading level={4} size="4xl">{title}</Heading>
	{/each}
</div>

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

<!-- Sin size, el tamaño sale del nivel: h1 → 4xl, h2 → xl, h3 → lg y h4 a h6 → md. -->
<div style="display: grid; gap: var(--arche-spacing-5); width: 100%">
	<Heading level={4} size="xl">Publicaciones</Heading>
	<Heading level={5} size="lg">Filosofía</Heading>
	<Heading level={6}>Cultura</Heading>
</div>