Overview of the Phoenix LiveView Typography Component
The Mishka Chelekom Typography component is a versatile and customizable Phoenix LiveView component designed to enhance text presentation. It supports a wide range of typographic elements, including headings, paragraphs, and emphasis tags, all while allowing full control over font size, weight, and color. With its flexible options, this component seamlessly integrates into your application's design, improving readability and user experience.
This Phoenix LiveView component offers dynamic styling options such as font weight, size, and color schemes, making it easy to create visually appealing and accessible content. Whether you're working with headers or body text, this tool provides everything needed for clean and effective typography.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the components, allowing for flexible design changes.
Typography components
The typography system comprises various components designed to enhance text presentation and semantics in your application. These include headings like
h1
through
h6
, which help structure content hierarchically. The
p
component is used for standard paragraphs, while
strong
and
em
emphasize text. The
dl
,
dt
, and
dd
components create descriptive lists. Additional elements like
abbr
for abbreviations,
figure
and
figcaption
for images and captions, as well as
mark
,
small
,
s
,
u
,
cite
, and
del
for various text styles and annotations, contribute to a comprehensive typography framework that enhances readability and user experience.
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4
Heading Level 5
Heading Level 6
Paragraph
Strong text Emphasized text-
Description list
<.h1>Heading Level 1</.h1> <.h2>Heading Level 2</.h2> <.h3>Heading Level 3</.h3> <.h4>Heading Level 4</.h4> <.h5>Heading Level 5</.h5> <.h6>Heading Level 6</.h6> <.p>Paragraph</.p> <.strong>Strong text</.strong> <.em>Emphasized text</.em> <.dl>Description list</.dl> <.dt>Definition term</.dt> <.dd>Definition description</.dd> <.abbr>Abbreviation</.abbr> <.figure>Figure</.figure> <.figcaption>Figure caption</.figcaption> <.mark>Highlighted text</.mark> <.small>Small text</.small> <.s>Strikethrough text</.s> <.u>Underlined text</.u> <.cite>Citation</.cite> <.del>Deleted text</.del>
Color prop
The
color
attribute in the typography component defines the theme and appearance of the typography by offering a wide range of color options. You can choose from predefined color values such as
white
,
natural
,
primary
,
secondary
,
dark
,
success
,
warning
,
danger
,
info
,
silver
,
misc
,
dawn
, and
inherit
.
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 4
Paragraph 5
Paragraph 6
Paragraph
Strong text Emphasized text-
Description list
<.h1 color="primary">Heading Level 1</.h1> <.h2 color="secondary">Heading Level 2</.h2> <.h2 color="natural">Heading Level 2</.h2> <.h3 color="dark">Heading Level 3</.h3> <.h4 color="success">Heading Level 4</.h4> <.h5 color="warning">Heading Level 5</.h5> <.h6 color="danger">Heading Level 6</.h6> <.p color="info">Paragraph</.p> <.strong color="silver">Strong text</.strong> <.em color="misc">Emphasized text</.em> <.dl color="dawn">Description list</.dl> <.dt color="inherit">Definition term</.dt> <.dd color="primary">Definition description</.dd> <.abbr color="secondary">Abbreviation</.abbr>
Size prop
The size attribute in the typography component offers a range of predefined sizes, including
extra_small
,
small
,
medium
,
large
, and
extra_large
. These options allow you to control the text size of the components.
Extra Small Paragraph
Small Paragraph
Medium Paragraph
Large Paragraph
Extra Large Paragraph
Double Large Paragraph
Triple Large Paragraph
Quadruple Large Paragraph
<.p size="extra_small">Extra Small Paragraph</.p> <.p size="small">Small Paragraph</.p> <.p size="medium">Medium Paragraph</.p> <.p size="large">Large Paragraph</.p> <.p size="extra_large">Extra Large Paragraph</.p> <.p size="double_large">Double Large Paragraph</.p> <.p size="triple_large">Triple Large Paragraph</.p> <.p size="quadruple_large">Quadruple Large Paragraph</.p>
Font weight prop
The
font_weight
attribute in the typography components allows you to specify Tailwind CSS font weight classes, giving you flexibility in styling text. You can use classes like
font-normal
,
font-bold
,
font-semibold
, or any other Tailwind font weight utility.
Extra Small Paragraph
Small Paragraph
Medium Paragraph
<.p font_weight="font-bold">Extra Small Paragraph</.p> <.p font_weight="font-light">Small Paragraph</.p> <.p font_weight="font-black">Medium Paragraph</.p>