제목

제목 (Heading)

시맨틱한 제목(heading) 요소예요. h1 요소 기반으로 만들어졌어요.

출처: 문서

본문

시맨틱한 제목 요소예요.

<Heading>The quick brown fox jumps over the lazy dog</Heading>

API Reference

이 컴포넌트는 h1 요소를 기반으로 하며 공통 margin props를 지원해요.

Prop	Type	Default
`as`	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`	`"h1"`
`asChild`	`boolean`	No default value
`size`	`Responsive<enum>`	`"6"`
`weight`	`Responsive<"light" \| "regular" \| "medium" \| "bold">`	No default value
`align`	`Responsive<"left" \| "center" \| "right">`	No default value
`trim`	`Responsive<"normal" \| "start" \| "end" \| "both">`	No default value
`truncate`	`boolean`	No default value
`wrap`	`Responsive<"wrap" \| "nowrap" \| "pretty" \| "balance">`	No default value
`color`	`enum`	No default value
`highContrast`	`boolean`	No default value

예제 (Examples)

As another element

as prop으로 제목 레벨을 변경해요. 이 prop은 순전히 시맨틱할 뿐이며 시각적 모양은 바꾸지 않아요.

<Heading as="h1">Level 1</Heading>

<Heading as="h2">Level 2</Heading>

<Heading as="h3">Level 3</Heading>

Size

size prop으로 제목의 크기를 제어해요. 이 prop은 올바른 줄 높이와 보정된 자간도 함께 제공해요. 텍스트 크기가 커질수록 상대적 줄 높이와 자간은 줄어들어요.

Heading 크기는 Text 크기와 일치해요. 다만 제목은 본문 텍스트보다 짧은 경향이 있어서 줄 높이는 조금 더 타이트하게 설정돼요.

<Flex direction="column" gap="3">
  <Heading size="1">The quick brown fox jumps over the lazy dog</Heading>

  <Heading size="2">The quick brown fox jumps over the lazy dog</Heading>

  <Heading size="3">The quick brown fox jumps over the lazy dog</Heading>

  <Heading size="4">The quick brown fox jumps over the lazy dog</Heading>

  <Heading size="5">The quick brown fox jumps over the lazy dog</Heading>

  <Heading size="6">The quick brown fox jumps over the lazy dog</Heading>

  <Heading size="7">The quick brown fox jumps over the lazy dog</Heading>

  <Heading size="8">The quick brown fox jumps over the lazy dog</Heading>

  <Heading size="9">The quick brown fox jumps over the lazy dog</Heading>
</Flex>

Weight

weight prop으로 텍스트 굵기를 설정해요.

<Heading weight="regular">

  The quick brown fox jumps over the lazy dog.

</Heading>



<Heading weight="medium">

  The quick brown fox jumps over the lazy dog.

</Heading>



<Heading weight="bold">

  The quick brown fox jumps over the lazy dog.

</Heading>

Align

align prop으로 텍스트 정렬을 설정해요.

<Heading align="left">Left-aligned</Heading>

<Heading align="center">Center-aligned</Heading>

<Heading align="right">Right-aligned</Heading>

Trim

trim prop으로 텍스트 상자 시작, 끝 또는 양쪽의 여백(leading space)을 잘라내요.

이 prop은 곧 나올 half-leading control 스펙과 비슷하게 동작하지만, 내부적으로는 크로스 브라우저 지원을 위해 공통 negative margin workaround를 사용해요.

<Flex direction="column" gap="3">
  <Heading
    trim="normal"
    style={{
      background: "var(--gray-a2)",
      borderTop: "1px dashed var(--gray-a7)",
      borderBottom: "1px dashed var(--gray-a7)",
    }}
  >
    Without trim
  </Heading>

  <Heading
    trim="both"
    style={{
      background: "var(--gray-a2)",
      borderTop: "1px dashed var(--gray-a7)",
      borderBottom: "1px dashed var(--gray-a7)",
    }}
  >
    With trim
  </Heading>
</Flex>

leading을 잘라내는 것은 카드나 다른 "상자(boxy)" 컴포넌트에서 세로 간격을 정밀하게 맞출 때 유용해요. 그렇지 않으면 패딩이 좌우보다 위아래에서 더 크게 보이거든요.

<Flex direction="column" gap="3">
  <Box
    style={{
      background: "var(--gray-a2)",
      border: "1px dashed var(--gray-a7)",
    }}
    p="4"
  >
    <Heading mb="1" size="3">
      Without trim
    </Heading>

    <Text>
      The goal of typography is to relate font size, line height, and line width in a proportional
      way that maximizes beauty and makes reading easier and more pleasant.
    </Text>
  </Box>

  <Box
    p="4"
    style={{
      background: "var(--gray-a2)",
      border: "1px dashed var(--gray-a7)",
    }}
  >
    <Heading mb="1" size="3" trim="start">
      With trim
    </Heading>

    <Text trim="end">
      The goal of typography is to relate font size, line height, and line width in a proportional
      way that maximizes beauty and makes reading easier and more pleasant.
    </Text>
  </Box>
</Flex>

기본 trim 값은 Radix Themes가 사용하는 시스템 폰트 스택에 맞춰 설정돼요. 커스텀 폰트를 사용한다면 해당 CSS 변수들로 trim 값을 조정할 수 있어요.

.radix-themes {
  --default-leading-trim-start: 0.42em;

  --default-leading-trim-end: 0.36em;

  --heading-leading-trim-start: 0.42em;

  --heading-leading-trim-end: 0.36em;
}

Truncate

truncate prop으로 텍스트가 컨테이너를 넘칠 때 생략 부호(...)로 잘라내요.

<Flex maxWidth="300px">
  <Heading truncate>The quick brown fox jumps over the lazy dog</Heading>
</Flex>

Wrap

wrap prop으로 텍스트 줄바꿈을 제어해요.

<Flex maxWidth="300px">
  <Heading wrap="nowrap">The quick brown fox jumps over the lazy dog</Heading>
</Flex>

<Flex maxWidth="300px">
  <Heading wrap="balance">The quick brown fox jumps over the lazy dog</Heading>
</Flex>

<Flex maxWidth="300px">
  <Heading wrap="pretty">The quick brown fox jumps over the lazy dog</Heading>
</Flex>

text-wrap: pretty는 실험적인 값으로써 아직 모든 브라우저에서 지원되지는 않아요. 하지만 이를 지원하는 브라우저에서는 점진적 향상(progressive enhancement)으로 처리할 수 있어요.

Color

color prop으로 특정 color를 지정해요. 텍스트 색상은 일반적인 배경색 위에서 최소 Lc 60 APCA 대비를 달성하도록 설계되었어요.

<Flex direction="column">
  <Heading color="indigo">The quick brown fox jumps over the lazy dog</Heading>

  <Heading color="cyan">The quick brown fox jumps over the lazy dog</Heading>

  <Heading color="orange">The quick brown fox jumps over the lazy dog</Heading>

  <Heading color="crimson">The quick brown fox jumps over the lazy dog</Heading>
</Flex>

High-contrast

highContrast prop으로 배경과의 색 대비를 높여요.

<Flex direction="column">
  <Heading color="gray">The quick brown fox jumps over the lazy dog.</Heading>

  <Heading color="gray" highContrast>
    The quick brown fox jumps over the lazy dog.
  </Heading>
</Flex>

더 알아보기 (Learn more)

Text 컴포넌트 — 본문 텍스트
typography 테마 — 폰트 크기와 trim 설정