Display

Heading

A native heading whose look is chosen by size, including the display text role for editorial and marketing headlines.

<script>
  import { Heading } from "@codeatlasdev/ui";
</script>

<Heading level={1} size="display">Ship the interface</Heading>

Heading renders a real <h1> to <h6> (level) and draws it at size, so the document outline and the look are decoupled. Without size it uses the size of its level.

Heading has no id prop (it takes level, size, class and its children only), so it cannot be the target of an aria-labelledby. A section title that names its <section> is a plain <h2 id="pricing-title"> with aria-labelledby="pricing-title" on the Section; use Heading for the headline whose look matters (the hero display), and aria-label on the section when the headline is the only name it needs.

size="display" is the display text role. It reads --ca-font-display (the body font until the theme sets fonts.display), --ca-display-tracking, --ca-display-leading and the fluid --ca-font-size-display-1. display-2 and display-3 are the smaller steps of the same role. Set the knobs once in the theme: defineTheme({ fonts: { display: "Fraunces, serif" }, typography: { displayTracking: "-0.055em", displayLeading: 0.84 } }).

Title-bearing components take the same role with a display prop: AuthCard, PageShell, EmptyState (title at --ca-font-size-display-3) and SiteHeader (the current crumb). Without it their titles keep the compact heading look.

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

<div class="stack">
	<Heading level={1} size="display">Display headline</Heading>
	<Heading level={2} size="display-3">Display 3, fluid</Heading>
	<Heading level={2} size="h4">An h2 that looks like an h4</Heading>
</div>

<style>
	.stack {
		display: flex;
		flex-direction: column;
		gap: var(--ca-space-3);
		width: 100%;
	}
</style>