PetalComponents.Typography (petal_components v4.5.0)

Copy Markdown View Source

Everything related to text. Headings, paragraphs and links

Summary

Functions

blockquote(assigns)

A styled blockquote with a left border.

h1(assigns)
h2(assigns)
h3(assigns)
h4(assigns)
h5(assigns)
hr(assigns)

A horizontal rule with sensible vertical spacing.

inline_code(assigns)

Inline code styling for snippets within a sentence.

lead(assigns)

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

ol(assigns)

Usage

p(assigns)
prose(assigns)
text_large(assigns)

Slightly larger, emphasised body text.

text_muted(assigns)

Muted secondary text, e.g. a caption or helper line.

text_small(assigns)

Small, tight label text.

ul(assigns)

Usage

Functions

blockquote(assigns)

A styled blockquote with a left border.

<.blockquote>"This library shipped our marketing site in a weekend."</.blockquote>

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

h1(assigns)

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • label (:string) - label your heading. Defaults to nil.
  • no_margin (:boolean) - removes margin from headings. Defaults to nil.
  • underline (:boolean) - underlines a heading. Defaults to false.
  • color_class (:any) - adds a color class. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

h2(assigns)

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • label (:string) - label your heading. Defaults to nil.
  • no_margin (:boolean) - removes margin from headings. Defaults to nil.
  • underline (:boolean) - underlines a heading. Defaults to false.
  • color_class (:any) - adds a color class. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

h3(assigns)

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • label (:string) - label your heading. Defaults to nil.
  • no_margin (:boolean) - removes margin from headings. Defaults to nil.
  • underline (:boolean) - underlines a heading. Defaults to false.
  • color_class (:any) - adds a color class. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

h4(assigns)

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • label (:string) - label your heading. Defaults to nil.
  • no_margin (:boolean) - removes margin from headings. Defaults to nil.
  • underline (:boolean) - underlines a heading. Defaults to false.
  • color_class (:any) - adds a color class. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

h5(assigns)

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • label (:string) - label your heading. Defaults to nil.
  • no_margin (:boolean) - removes margin from headings. Defaults to nil.
  • underline (:boolean) - underlines a heading. Defaults to false.
  • color_class (:any) - adds a color class. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

hr(assigns)

A horizontal rule with sensible vertical spacing.

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • Global attributes are accepted.

inline_code(assigns)

Inline code styling for snippets within a sentence.

Run <.inline_code>mix deps.get</.inline_code> to install.

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

lead(assigns)

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>

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

ol(assigns)

Usage:

<.ol>
  <li>Item 1</li>
  <li>Item 2</li>
</.ol>

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

p(assigns)

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • no_margin (:boolean) - removes margin from paragraph. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

prose(assigns)

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

text_large(assigns)

Slightly larger, emphasised body text.

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

text_muted(assigns)

Muted secondary text, e.g. a caption or helper line.

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

text_small(assigns)

Small, tight label text.

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block

ul(assigns)

Usage:

<.ul>
  <li>Item 1</li>
  <li>Item 2</li>
</.ul>

Attributes

  • class (:any) - CSS class. Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block