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
# <.h1>, <.h2>, <.h3>, <.h4>, <.h5>
attr(:class, :string, default: "", doc: "CSS class")
attr(:label, :string, default: nil, doc: "label your heading")
attr(:no_margin, :boolean, default: nil, doc: "removes margin from headings")
attr(:underline, :boolean, default: false, doc: "underlines a heading")
attr(:color_class, :string, default: nil, doc: "adds a color class")
attr(:rest, :global)
slot(:inner_block, required: false)
Paragraphs
Here is a paragraph
<.p>Here is a paragraph</.p>
Paragraph properties
# <.p>
attr(:class, :string, default: "", doc: "CSS class")
attr(:rest, :global)
slot(:inner_block, required: false)
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
# <.ul, <.ol>
attr(:class, :string, default: "", doc: "CSS class")
attr(:rest, :global)
slot(:inner_block, required: false)
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
# <.prose>
attr(:class, :string, default: "", doc: "CSS class")
attr(:rest, :global)
slot(:inner_block, required: false)