import { Heading, VStack } from "astralis-ui";

const levels = ["h1", "h2", "h3", "h4", "h5", "h6"] as const;

export function HeadingDemo() {
  return (
    <VStack gap="2" alignItems="start">
      {levels.map((level) => (
        <Heading key={level} as={level}>
          Heading {level}
        </Heading>
      ))}
    </VStack>
  );
}

import { Heading, Text, VStack } from "astralis-ui";

export function HeadingSizeOverride() {
  return (
    /* Semantics and visuals are independent: pick the level for the
       document outline, the size for the design. */
    <VStack gap="1" alignItems="start">
      <Heading as="h2" size="6xl" letterSpacing="tighter">
        Visually huge
      </Heading>
      <Text color="muted" size="sm">
        …but still an h2 in the document outline.
      </Text>
    </VStack>
  );
}