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.

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.

<.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 , primary , secondary , dark , success , warning , danger , info , light , misc , dawn , and inherit .

<.h1 color="primary">Heading Level 1</.h1>
<.h2 color="secondary">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="light">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.

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

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