HomeAppsModulesGems

Typography

Typography is the art of arranging letters and words to create visual harmony and传达信息.

On this page

Headers#

Use the typography-h1 through typography-h6 classes to style headings.

Heading 1 - Main Title

Heading 2 - Section Title

Heading 3 - Subsection

Heading 4 - Minor Heading

Heading 5 - Small Heading
Heading 6 - Smallest Heading
<h1 class="typography-h1">Heading 1 - Main Title</h1>
<h2 class="typography-h2">Heading 2 - Section Title</h2>
<h3 class="typography-h3">Heading 3 - Subsection</h3>
<h4 class="typography-h4">Heading 4 - Minor Heading</h4>
<h5 class="typography-h5">Heading 5 - Small Heading</h5>
<h6 class="typography-h6">Heading 6 - Smallest Heading</h6>

Paragraphs#

Use the typography-body class to style paragraphs.

This is a regular paragraph with some bold text and italic text. It demonstrates the default body text styling and how inline elements are rendered.

This is large text for emphasis or important content.

This is small text for captions, footnotes, or secondary information.

<p class="typography-body">
  This is a regular paragraph with some
  <strong>bold text</strong>
  and
  <em>italic text</em>
  . It demonstrates the default body text styling and how inline elements are rendered.
</p>

<p class="typography-body text-lg">This is large text for emphasis or important content.</p>
<p class="typography-body text-sm">This is small text for captions, footnotes, or secondary information.</p>

Blockquotes#

Use the typography-blockquote class to style blockquotes.

This is a blockquote. It's used for highlighting important quotes or testimonials. The styling should make it stand out from regular paragraph text.

— Author Name 
<blockquote class="typography-blockquote">
  <p>This is a blockquote. It's used for highlighting important quotes or testimonials. The styling should make it stand out from regular paragraph text.</p>
  <cite>— Author Name</cite>
</blockquote>

Lists#

Use the typography-list class to style lists.

  • First unordered list item
  • Second item with a link
  • Third item with inline code
  1. First ordered list item
  2. Second numbered item
  3. Third item in sequence
<ul class="typography-list">
  <li>First unordered list item</li>
  <li>
    Second item with
    <a href="#">a link</a>
  </li>

  <li>
    Third item with
    <code>inline code</code>
  </li>
</ul>

<ol class="typography-list">
  <li>First ordered list item</li>
  <li>Second numbered item</li>
  <li>Third item in sequence</li>
</ol>

Code Blocks#

Use the typography-code-block class to style code blocks.

// This is a code block
function example() {
  console.log("Hello, World!");
  return true;
}
<pre class="typography-code-block">
  <code>// This is a code block
function example() {
  console.log("Hello, World!");
  return true;
}</code>
</pre>

Inline Elements#

Use the typography-kbd and typography-mark classes to style inline elements.

Here's some keyboard input styling and a highlighted text example.

<p>
  Here's some
  <kbd class="typography-kbd">keyboard input</kbd>
  styling and a
  <mark class="typography-mark">highlighted</mark>
  text example.
</p>

HTML Content#

Surround any content with the typography class to apply the default typography styling to the entire contents.

Heading 6 - Smallest Heading

This is a regular paragraph with some bold text and italic text. It demonstrates the default body text styling and how inline elements are rendered.

This is large text for emphasis or important content.

This is small text for captions, footnotes, or secondary information.

This is a blockquote. It's used for highlighting important quotes or testimonials. The styling should make it stand out from regular paragraph text.

— Author Name
  • First unordered list item
  • Second item with a link
  • Third item with inline code
  1. First ordered list item
  2. Second numbered item
  3. Third item in sequence
<div class="typography">
  <h6>Heading 6 - Smallest Heading</h6>
  <p>
    This is a regular paragraph with some
    <strong>bold text</strong>
    and
    <em>italic text</em>
    . It demonstrates the default body text styling and how inline elements are rendered.
  </p>

  <p class="text-large">This is large text for emphasis or important content.</p>
  <p class="text-small">This is small text for captions, footnotes, or secondary information.</p>
  <blockquote>
    <p>This is a blockquote. It's used for highlighting important quotes or testimonials. The styling should make it stand out from regular paragraph text.</p>
    <cite>— Author Name</cite>
  </blockquote>

  <ul>
    <li>First unordered list item</li>
    <li>
      Second item with
      <a href="#">a link</a>
    </li>

    <li>
      Third item with
      <code>inline code</code>
    </li>
  </ul>

  <ol>
    <li>First ordered list item</li>
    <li>Second numbered item</li>
    <li>Third item in sequence</li>
  </ol>
</div>