블록 인용

블록 인용 (Blockquote)

다른 출처에서 가져온 블록 단위의 인용구를 나타내는 컴포넌트예요. blockquote 요소 기반으로 만들어졌어요.

출처: 문서

본문

다른 출처에서 가져온 블록 단위의 인용구예요.

<Blockquote>
  Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes near
  it in obstinacy.
</Blockquote>

API Reference

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

Prop Type Default
asChild boolean No default value
size Responsive<enum> No default value
weight Responsive<"light" | "regular" | "medium" | "bold"> No default value
color enum No default value
highContrast boolean No default value
truncate boolean No default value
wrap Responsive<"wrap" | "nowrap" | "pretty" | "balance"> No default value

예제 (Examples)

Size

size prop으로 크기를 제어해요.

<Flex direction="column" gap="5">
  <Box maxWidth="300px">
    <Blockquote size="1">
      Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
      near it in obstinacy.
    </Blockquote>
  </Box>

  <Box maxWidth="350px">
    <Blockquote size="2">
      Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
      near it in obstinacy.
    </Blockquote>
  </Box>

  <Box maxWidth="400px">
    <Blockquote size="3">
      Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
      near it in obstinacy.
    </Blockquote>
  </Box>

  <Box maxWidth="450px">
    <Blockquote size="4">
      Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
      near it in obstinacy.
    </Blockquote>
  </Box>

  <Box maxWidth="500px">
    <Blockquote size="5">
      Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
      near it in obstinacy.
    </Blockquote>
  </Box>

  <Box maxWidth="550px">
    <Blockquote size="6">
      Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
      near it in obstinacy.
    </Blockquote>
  </Box>

  <Box maxWidth="600px">
    <Blockquote size="7">
      Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
      near it in obstinacy.
    </Blockquote>
  </Box>

  <Box maxWidth="650px">
    <Blockquote size="8">
      Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
      near it in obstinacy.
    </Blockquote>
  </Box>

  <Box maxWidth="1000px">
    <Blockquote size="9">
      Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
      near it in obstinacy.
    </Blockquote>
  </Box>
</Flex>

Weight

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

<Flex direction="column" gap="3" maxWidth="500px">
  <Blockquote weight="regular">
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>

  <Blockquote weight="medium">
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>

  <Blockquote weight="bold">
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>
</Flex>

Color

color prop으로 특정 color를 지정해요.

<Flex direction="column" gap="3" maxWidth="500px">
  <Blockquote color="indigo">
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>

  <Blockquote color="cyan">
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>

  <Blockquote color="orange">
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>

  <Blockquote color="crimson">
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>
</Flex>

High-contrast

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

<Flex direction="column" gap="3" maxWidth="500px">
  <Blockquote color="gray">
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>

  <Blockquote color="gray" highContrast>
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>
</Flex>

Truncate

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

<Flex maxWidth="500px">
  <Blockquote truncate>
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>
</Flex>

더 알아보기 (Learn more)