import { Heading } from "@shavin/ui";

{/* Render as a semantic h1, styled as a small heading */}
<Heading as="h1" size="sm">
  h1 tag, rendered at sm size
</Heading>

{/* Render as a semantic h4, styled as a huge heading */}
<Heading as="h4" size="2xl">
  h4 tag, rendered at 2xl size
</Heading>

import { Heading } from "@shavin/ui";

<Heading weight="normal">Weight normal</Heading>
<Heading weight="medium">Weight medium</Heading>
<Heading weight="semibold">Weight semibold</Heading>
<Heading weight="bold">Weight bold</Heading>

import { Text } from "@shavin/ui";

{/* The uppercase micro-label used above groups of content */}
<Text size="overline" color="subtle">Section label</Text>