Themes

Advanced

Utils

Heading

시맨틱 제목 요소.

View source Report an issue View in Playground

The quick brown fox jumps over the lazy dog

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

API Reference

이 컴포넌트는 h1 요소를 기반으로 하며 common 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은 순수하게 시맨틱한 목적이며 시각적 모양을 변경하지 않습니다.

Level 1

Level 2

Level 3

<Heading as="h1">Level 1</Heading>
<Heading as="h2">Level 2</Heading>
<Heading as="h3">Level 3</Heading>

Size

size prop을 사용하여 제목의 크기를 제어하세요. 이 prop은 올바른 행 높이와 보정된 자간을 제공합니다—텍스트 크기가 커질수록 상대적인 행 높이와 자간이 감소합니다.

제목 크기는 Text 크기와 일치합니다. 하지만 제목은 일반 텍스트보다 짧은 경향이 있어 행 높이가 더 조밀하게 설정됩니다.

The quick brown fox jumps over the lazy dog

<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을 사용하여 텍스트 두께를 설정하세요.

The quick brown fox jumps over the lazy dog.

<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을 사용하여 텍스트 정렬을 설정하세요.

Left-aligned

Center-aligned

Right-aligned

<Heading align="left">Left-aligned</Heading>
<Heading align="center">Center-aligned</Heading>
<Heading align="right">Right-aligned</Heading>

Trim

trim prop을 사용하여 텍스트 박스의 시작, 끝 또는 양쪽의 여백 공간을 트림하세요.

이 prop은 곧 출시될 half-leading control 스펙과 유사하게 작동하지만, 크로스 브라우저 지원을 위해 일반적인 negative margin workaround를 사용합니다.

Without trim

With trim

<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>

행간 정렬은 카드 또는 기타 "박스형" 구성 요소에서 세로 간격을 조정할 떄 유용합니다. 그렇지 않으면 Padding이 측면보다 상단과 하단이 더 크게 보입니다.

Without trim

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.

With trim

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.

<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>

기본 정렬 값은 Confy-ui Themes에서 사용하는 시스템 폰트 스택에 맞게 구성되어 있습니다. 사용자 정의 폰트를 사용하는 경우 해당 CSS 변수를 사용하여 정렬 값을 조정할 수 있습니다.

.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을 사용하여 컨테이너를 넘어가는 텍스트를 말줄임표로 처리하세요.

The quick brown fox jumps over the lazy dog

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

Wrap

wrap prop을 사용하여 텍스트 줄바꿈을 제어하세요.

The quick brown fox jumps over the lazy dog

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

The quick brown fox jumps over the lazy dog

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

The quick brown fox jumps over the lazy dog

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

text-wrap: pretty는 실험적인 값으로 아직 모든 브라우저에서 지원되지 않습니다. 하지만 지원하는 브라우저에서는 점진적 향상으로 처리될 수 있습니다.

Color

color prop을 사용하여 특정 색상을 지정하세요. 텍스트 색상은 일반적인 배경색 위에서 최소 Lc 60 APCA 대비를 달성하도록 설계되었습니다.

The quick brown fox jumps over the lazy dog

<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을 사용하여 배경과의 색상 대비를 높이세요.

The quick brown fox jumps over the lazy dog.

<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>

PreviousText

NextBlockquote

Edit this page on GitHub.

Overview

Theme

Layout

Typography

Components

Utilities

Heading

The quick brown fox jumps over the lazy dog

Level 1

Level 2

Level 3

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Left-aligned

Center-aligned

Right-aligned

Without trim

With trim

Without trim

With trim

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.