Typography

import { Typography } from "@nili/ui"

export function Example() {
  return (
    <>
      <Typography variant="h1">The quick brown fox</Typography>
      <Typography variant="h2">The quick brown fox</Typography>
      <Typography variant="h3">The quick brown fox</Typography>
      <Typography variant="h4">The quick brown fox</Typography>
      <Typography variant="h5">The quick brown fox</Typography>
      <Typography variant="h6">The quick brown fox</Typography>
    </>
  )
}

import { Typography } from "@nili/ui"

export function Example() {
  return (
    <>
      <Typography variant="label-xlarge">The quick brown fox</Typography>
      <Typography variant="label-large">The quick brown fox</Typography>
      <Typography variant="label-medium">The quick brown fox</Typography>
      <Typography variant="label-small">The quick brown fox</Typography>
      <Typography variant="label-xsmall">The quick brown fox</Typography>
    </>
  )
}

import { Typography } from "@nili/ui"

export function Example() {
  return (
    <>
      <Typography variant="paragraph-xlarge">The quick brown fox</Typography>
      <Typography variant="paragraph-large">The quick brown fox</Typography>
      <Typography variant="paragraph-medium">The quick brown fox</Typography>
      <Typography variant="paragraph-small">The quick brown fox</Typography>
      <Typography variant="paragraph-xsmall">The quick brown fox</Typography>
    </>
  )
}

import { Typography } from "@nili/ui"

export function Example() {
  return (
    <>
      <Typography variant="subheading-medium">The quick brown fox</Typography>
      <Typography variant="subheading-small">The quick brown fox</Typography>
      <Typography variant="subheading-xsmall">The quick brown fox</Typography>
      <Typography variant="subheading-2xsmall">The quick brown fox</Typography>
    </>
  )
}

import { Typography } from "@nili/ui"

export function Example() {
  return (
    <>
      <Typography variant="body-large">The quick brown fox</Typography>
      <Typography variant="body-medium">The quick brown fox</Typography>
      <Typography variant="body-small">The quick brown fox</Typography>
    </>
  )
}

import { Typography } from "@nili/ui"

export function Example() {
  return (
    <>
      <Typography variant="docs-label">The quick brown fox</Typography>
      <Typography variant="docs-paragraph">The quick brown fox</Typography>
    </>
  )
}

import { Typography } from "@nili/ui"

export function Example() {
  return (
    <>
      {/* Looks like H3, but is a section heading */}
      <Typography variant="h3" as="h2">Section title</Typography>

      {/* Label styling on an inline element */}
      <Typography variant="label-small" as="span">Inline label</Typography>

      {/* Any element, including a link */}
      <Typography variant="paragraph-small" as="a" href="#">
        Read the guidelines
      </Typography>
    </>
  )
}