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

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)