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
- List item 1
- List item 2
- 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. |