03 · Components · 표현

인용문Quote

다른 사람의 말이나 글을 가져와 강조할 때 쓰는 에디토리얼 타입세팅. 본문 흐름을 잠깐 멈추고 리듬을 바꿔 주목도를 만듭니다.

Stable

풀 쿼트

tsx

<blockquote className="border-l-[3px] border-[color:var(--color-accent)] bg-[color:var(--color-surface-muted)] px-6 py-5">
  <p className="text-[17px] leading-[1.7] text-[color:var(--color-text)]">
    좋은 디자인 시스템은 비슷한 문제를 매번 새로 풀지 않게 해주는 기반이다.
  </p>
  <footer className="mt-3 text-[13px] text-[color:var(--color-text-muted)]">
    — 주님의교회 PCL 원칙
  </footer>
</blockquote>

미리보기

좋은 디자인 시스템은 비슷한 문제를 매번 새로 풀지 않게 해주는 기반이다.
— 주님의교회 PCL 원칙

인라인 인용

tsx

<p>
  교회의 모토는 <q>주님이 주인 되시는 교회</q>라는 고백에서 출발한다.
</p>

미리보기

교회의 모토는 주님이 주인 되시는 교회라는 고백에서 출발한다.

풀 쿼트

인라인 인용

도움이 필요하신가요?