Components Typography

Petal Pro is the full SaaS app this is built for

Auth, billing, admin, and Claude Code integration included. One purchase, unlimited projects.

See what's included

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

heex 
          <.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
elixir 
            # <.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

heex 
          <.p>Here is a paragraph</.p>
Paragraph properties
elixir 
            # <.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
  1. List item 1
  2. List item 2
  3. List item 3
heex 
          <.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
elixir 
            # <.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
heex 
          <.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
elixir 
            # <.prose>
  attr(:class, :string, default: "", doc: "CSS class")
  attr(:rest, :global)
  slot(:inner_block, required: false)