DocsComponentsTypography

Typography

Text styles: headings, paragraph, lead, blockquote, list, inline code, and a prose wrapper for HTML content.

13 files

<div class="max-w-xl">
  <pb-ui.typography-h1>The Joke Tax Chronicles</pb-ui.typography-h1>
  <pb-ui.typography-lead class="mt-4">Once upon a time, in a far-off land, there was a very lazy king.</pb-ui.typography-lead>
  <pb-ui.typography-h2 class="mt-10">The King's Plan</pb-ui.typography-h2>
  <pb-ui.typography-p>The king thought long and hard, and decided to charge his subjects <pb-ui.typography-inline-code>a tax</pb-ui.typography-inline-code> for every joke they told.</pb-ui.typography-p>
  <pb-ui.typography-blockquote>“After all,” he said, “everyone enjoys a good joke, so it's only fair that they should pay for the privilege.”</pb-ui.typography-blockquote>
  <pb-ui.typography-list>
    <li>1st level of puns: 5 gold coins</li>
    <li>2nd level of jokes: 10 gold coins</li>
  </pb-ui.typography-list>
  <pb-ui.typography-muted>Enter your email address.</pb-ui.typography-muted>
</div>

Installation

pyblade-ui add typography

Copy these files into your project

components/ui/typography_h1.html

<h1 data-slot="typography-h1" {{ attributes.cn("scroll-m-20 text-4xl font-extrabold tracking-tight text-balance") }}>{{ slot }}</h1>

components/ui/typography_h2.html

<h2 data-slot="typography-h2" {{ attributes.cn("scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0") }}>{{ slot }}</h2>

components/ui/typography_h3.html

<h3 data-slot="typography-h3" {{ attributes.cn("scroll-m-20 text-2xl font-semibold tracking-tight") }}>{{ slot }}</h3>

components/ui/typography_h4.html

<h4 data-slot="typography-h4" {{ attributes.cn("scroll-m-20 text-xl font-semibold tracking-tight") }}>{{ slot }}</h4>

components/ui/typography_p.html

<p data-slot="typography-p" {{ attributes.cn("leading-7 [&:not(:first-child)]:mt-6") }}>{{ slot }}</p>

components/ui/typography_lead.html

<p data-slot="typography-lead" {{ attributes.cn("text-xl text-muted-foreground") }}>{{ slot }}</p>

components/ui/typography_large.html

<div data-slot="typography-large" {{ attributes.cn("text-lg font-semibold") }}>{{ slot }}</div>

components/ui/typography_small.html

<small data-slot="typography-small" {{ attributes.cn("text-sm leading-none font-medium") }}>{{ slot }}</small>

components/ui/typography_muted.html

<p data-slot="typography-muted" {{ attributes.cn("text-sm text-muted-foreground") }}>{{ slot }}</p>

components/ui/typography_blockquote.html

<blockquote data-slot="typography-blockquote" {{ attributes.cn("mt-6 border-l-2 pl-6 italic") }}>{{ slot }}</blockquote>

components/ui/typography_list.html

<ul data-slot="typography-list" {{ attributes.cn("my-6 ml-6 list-disc [&>li]:mt-2") }}>{{ slot }}</ul>

components/ui/typography_inline_code.html

<code data-slot="typography-inline-code" {{ attributes.cn("relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold") }}>{{ slot }}</code>

components/ui/prose.html

<div data-slot="prose" {{ attributes.cn(
    "max-w-none text-base leading-7 text-foreground",
    "[&_h1]:mt-0 [&_h1]:mb-6 [&_h1]:scroll-m-20 [&_h1]:text-4xl [&_h1]:font-extrabold [&_h1]:tracking-tight",
    "[&_h2]:mt-10 [&_h2]:mb-4 [&_h2]:scroll-m-20 [&_h2]:border-b [&_h2]:pb-2 [&_h2]:text-3xl [&_h2]:font-semibold [&_h2]:tracking-tight",
    "[&_h3]:mt-8 [&_h3]:mb-3 [&_h3]:text-2xl [&_h3]:font-semibold [&_h3]:tracking-tight [&_h4]:mt-6 [&_h4]:mb-2 [&_h4]:text-xl [&_h4]:font-semibold",
    "[&_p]:my-4 [&_a]:font-medium [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4 [&_strong]:font-semibold",
    "[&_ul]:my-4 [&_ul]:ml-6 [&_ul]:list-disc [&_ol]:my-4 [&_ol]:ml-6 [&_ol]:list-decimal [&_li]:mt-2",
    "[&_blockquote]:mt-6 [&_blockquote]:border-l-2 [&_blockquote]:pl-6 [&_blockquote]:italic [&_blockquote]:text-muted-foreground",
    "[&_:not(pre)>code]:rounded [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-[0.3rem] [&_:not(pre)>code]:py-[0.2rem] [&_:not(pre)>code]:font-mono [&_:not(pre)>code]:text-sm",
    "[&_pre]:my-6 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:border [&_pre]:bg-muted [&_pre]:p-4 [&_pre]:font-mono [&_pre]:text-sm",
    "[&_hr]:my-8 [&_hr]:border-border [&_img]:my-6 [&_img]:rounded-lg",
    "[&_table]:my-6 [&_table]:w-full [&_table]:text-sm [&_th]:border [&_th]:px-4 [&_th]:py-2 [&_th]:text-left [&_th]:font-semibold [&_td]:border [&_td]:px-4 [&_td]:py-2",
) }}>{{ slot }}</div>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tags <pb-ui.typography-h1> <pb-ui.typography-h2> <pb-ui.typography-h3> <pb-ui.typography-h4> <pb-ui.typography-p> <pb-ui.typography-lead> <pb-ui.typography-large> <pb-ui.typography-small> <pb-ui.typography-muted> <pb-ui.typography-blockquote> <pb-ui.typography-list> <pb-ui.typography-inline-code> <pb-ui.prose> are available in all your templates.

<pb-ui.typography-h1>The Joke Tax Chronicles</pb-ui.typography-h1>
<pb-ui.typography-lead>Once upon a time, in a far-off land...</pb-ui.typography-lead>
<pb-ui.prose>{!! article.html !!}</pb-ui.prose>

Examples

HTML content (prose)

‹ Resizable Sidebar ›