LineaUI.Components.Typography (linea_ui v0.1.1)

Copy Markdown View Source

LineOne's typography: headings in every level and weight, display headings, gradient and decorated text, decorated links, inline code and keyboard keys.

<.heading level={1}>Heading H1</.heading>
<.heading level={3} weight="light" color="info">Light H3</.heading>
<.heading display={2}>Display 2</.heading>

<.text size="lg" decoration="underline">Underlined</.text>
<.text as="span" size="lg" weight="semibold" gradient="sky-blue">Gradient</.text>
<.text_link href="#" decoration_color="info" decoration_style="wavy">Tattooine</.text_link>

Press <.kbd>Ctrl</.kbd> + <.kbd>K</.kbd>, or run <.inline_code>mix test</.inline_code>.

Summary

Functions

heading(assigns)

Renders a heading, <h1> to <h6>, sized as LineOne's. display renders LineOne's display headings (an <h1> unless level says otherwise) from 1, the largest, to 5.

inline_code(assigns)

Renders code inside running text, the way LineOne's pages show class names.

kbd(assigns)

Renders a keyboard key.

text(assigns)

Renders a run of text: a paragraph unless as says otherwise.

text_link(assigns)

Renders a link inside running text, underlined in a theme color and style as LineOne's text decoration examples.

Functions

heading(assigns)

Renders a heading, <h1> to <h6>, sized as LineOne's. display renders LineOne's display headings (an <h1> unless level says otherwise) from 1, the largest, to 5.

<.heading level={3} weight="semibold" color="primary">Orders</.heading>
<.heading display={1}>Welcome</.heading>

Attributes

  • level (:integer) - Defaults to nil.Must be one of nil, 1, 2, 3, 4, 5, or 6.
  • display (:integer) - Defaults to nil.Must be one of nil, 1, 2, 3, 4, or 5.
  • weight (:string) - Defaults to "normal". Must be one of "normal", "light", "medium", "semibold", or "bold".
  • color (:string) - Defaults to "default". Must be one of "default", "error", "info", "muted", "neutral", "primary", "secondary", "success", or "warning".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

inline_code(assigns)

Renders code inside running text, the way LineOne's pages show class names.

Use the <.inline_code>rounded-full</.inline_code> utility.

Attributes

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

Slots

  • inner_block (required)

kbd(assigns)

Renders a keyboard key.

<.kbd>Ctrl</.kbd> + <.kbd>K</.kbd>

Attributes

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

Slots

  • inner_block (required)

text(assigns)

Renders a run of text: a paragraph unless as says otherwise.

<.text size="lg" weight="semibold" gradient="amber-orange">Hello</.text>

Attributes

  • as (:string) - Defaults to "p". Must be one of "p", "span", "div", "strong", "em", or "small".
  • size (:string) - Defaults to "inherit". Must be one of "inherit", "xs", "xs-plus", "sm", "base", "lg", or "xl".
  • weight (:string) - Defaults to "normal". Must be one of "normal", "light", "medium", "semibold", or "bold".
  • color (:string) - Defaults to "default". Must be one of "default", "error", "info", "muted", "neutral", "primary", "secondary", "success", or "warning".
  • gradient (:string) - Paints the text with one of LineOne's gradients. Defaults to nil. Must be one of nil, "sky-blue", "green-fuchsia", "fuchsia-pink", "amber-orange", or "purple-indigo".
  • decoration (:string) - Defaults to nil.Must be one of nil, "underline", "overline", "line-through", or "none".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

text_link(assigns)

Renders a link inside running text, underlined in a theme color and style as LineOne's text decoration examples.

<.text_link navigate={~p"/about"} decoration_color="secondary" decoration_style="dotted">
  About us
</.text_link>

Attributes

  • decoration_color (:string) - Defaults to "current". Must be one of "current", "primary", "secondary", "info", "success", "warning", or "error".
  • decoration_style (:string) - Defaults to "solid". Must be one of "solid", "wavy", "double", "dotted", or "dashed".
  • class (:any) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["href", "navigate", "patch", "method", "download"].

Slots

  • inner_block (required)