Typography

Typography is the cheapest way to make an app look finished, and the easiest thing to get subtly wrong. Petal Components ships the whole type scale with that work already done: headings, body, lead, blockquote, inline code, lists, text helpers and a divider, all on consistent emphasis tiers with vertical rhythm built in. Drop them into a page and it reads the way a designed page should, in light and dark, with no manual spacing. To render raw HTML such as converted markdown, use Prose.

In context

Every element composing together with no manual spacing. Drop the components in and the vertical rhythm just works, in light and dark.

Headings

Heading 1

<.h1>The Lighthouse at the Edge of the Map</.h1>

Heading 2

<.h2>Where the ferries stopped running</.h2>

Heading 3

<.h3>A keeper and her lamp</.h3>

Heading 4

<.h4>The night the fog rolled in</.h4>

Heading 5

<.h5>Notes from the harbour master</.h5>

Custom colour

<.h2 class="text-sky-500 dark:text-sky-400">The blue hour</.h2>

Gradient

<.h1>
  <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
    A light that never dims
  </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

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

Paragraph properties

            # <.p>
  attr(:class, :string, default: "", doc: "CSS class")
  attr(:no_margin, :boolean, default: nil, doc: "removes the bottom margin")
  attr(:rest, :global)
  slot(:inner_block, required: false)

        

Lead

A larger, muted introductory paragraph for the top of a page or section.

<.lead>Petal Components is a set of HEEx components for Phoenix.</.lead>

Blockquote

<.blockquote>"The defaults just look right."</.blockquote>

Inline code

For code snippets within a sentence.

<.p>Install with <.inline_code>mix deps.get</.inline_code> to begin.</.p>

Text helpers

Emphasis and secondary copy: text_large, text_muted and text_small.

<.text_large>Emphasised body text.</.text_large>
<.text_muted>Captions, hints and metadata.</.text_muted>
<.text_small>Tight label text.</.text_small>

Lists

<.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)

        

Divider

A horizontal rule with sensible vertical spacing.

<.hr />

Prose

<.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)