GitHub
Docs
Typography

Typography

Type styles, scales, and text elements used across Bangkok Bank.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

<h1 className="scroll-m-20 text-4xl font-bold tracking-tight">Heading 1</h1>
<h2 className="scroll-m-20 text-3xl font-semibold tracking-tight">Heading 2</h2>
<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">Heading 3</h3>
<h4 className="scroll-m-20 text-xl font-semibold tracking-tight">Heading 4</h4>

Paragraph

The king, seeing how much happier his subjects were, realized the error of his ways and repealed the joke tax.

<p className="leading-7 [&:not(:first-child)]:mt-6">
  The king, seeing how much happier his subjects were...
</p>

Lead, Large, Small & Muted

A modal dialog that interrupts the user with important content.

Are you absolutely sure?
Email address

Enter your email address.

<p className="text-xl text-muted-foreground">Lead text</p>
<div className="text-lg font-semibold">Large text</div>
<small className="text-sm font-medium leading-none">Small text</small>
<p className="text-sm text-muted-foreground">Muted text</p>

Blockquote

“After all,” he said, “everyone enjoys a good joke, so it's only fair that they should pay for the privilege.”
<blockquote className="mt-6 border-l-2 pl-6 italic">
  "After all," he said, "everyone enjoys a good joke..."
</blockquote>

List

  • 1st level of indentation
  • 2nd level of indentation
  • 3rd level of indentation
<ul className="my-6 ml-6 list-disc [&>li]:mt-2">
  <li>1st level of indentation</li>
  <li>2nd level of indentation</li>
</ul>

Inline code

@radix-ui/react-alert-dialog
<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
  @radix-ui/react-alert-dialog
</code>
IntroductionButton