Components Typography

Typography

The main typography components to get you started. If you wish to render basic HTML such as converted markdown then use Prose.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Modified heading

Fancy Heading 

          <.h1>h1.Heading 1</.h1>
<.h2>h2.Heading 2</.h2>
<.h3>h3.Heading 3</.h3>
<.h4>h4.Heading 4</.h4>
<.h5>h5.Heading 5</.h5>
<.h2 class="text-sky-500 dark:text-sky-400">Heading 2</.h2>
<.h1>
  <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
    Fancy Heading
  </span>
</.h1>
Heading properties

Defaults are indicated in bold. Required fields have * before the label. Hover over the name for docs.

Name Type Options/Default
label :string -
class :string -
inner_block* :slot -
[all additional properties] Forwarded to heading element.

Paragraphs

Here is a paragraph 

          <.p>Here is a paragraph</.p>
Paragraph properties

Defaults are indicated in bold. Required fields have * before the label. Hover over the name for docs.

Name Type Options/Default
class :string -
inner_block* :slot -
[all additional properties] Forwarded to paragraph element.

Lists

  • List item 1
  • List item 2
  • List item 3
  1. List item 1
  2. List item 2
  3. List item 3
          <.ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</.ul>

<.ol class="mt-5">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</.ol>
List properties

Defaults are indicated in bold. Required fields have * before the label. Hover over the name for docs.

Name Type Options/Default
class :string -
inner_block* :slot -
[all additional properties] Forwarded to list element.

Prose

Title

Here is a paragraph

Here is a another paragraph

  • List item 1
  • List item 2
          <.prose>
  <h1>Title</h1>
  <p>Here is a paragraph</p>
  <p>Here is a another paragraph</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</.prose>
Prose properties

Defaults are indicated in bold. Required fields have * before the label. Hover over the name for docs.

Name Type Options/Default
class :string -
inner_block* :slot -
[all additional properties] Forwarded to parent div element.