DocsComposantsTypography

Typography

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

13 fichiers

<div class="max-w-xl">
  <pb-ui.typography-h1>Les chroniques de l'impôt sur les blagues</pb-ui.typography-h1>
  <pb-ui.typography-lead class="mt-4">Il était une fois, dans un pays lointain, un roi très paresseux.</pb-ui.typography-lead>
  <pb-ui.typography-h2 class="mt-10">Le plan du roi</pb-ui.typography-h2>
  <pb-ui.typography-p>Le roi pensa longuement et décida qu'il ferait payer à ses sujets <pb-ui.typography-inline-code>une taxe</pb-ui.typography-inline-code> pour chaque blague racontée.</pb-ui.typography-p>
  <pb-ui.typography-blockquote>« Après tout, tout le monde aime une bonne blague, il est donc juste qu'ils paient ce privilège. »</pb-ui.typography-blockquote>
  <pb-ui.typography-list>
    <li>1er niveau de jeux de mots : 5 pièces d'or</li>
    <li>2e niveau de blagues : 10 pièces d'or</li>
  </pb-ui.typography-list>
  <pb-ui.typography-muted>Saisissez votre adresse email.</pb-ui.typography-muted>
</div>

Installation

pyblade-ui add typography

Copiez ces fichiers dans votre projet

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>

Adaptez le chemin à votre projet
Le dossier components est celui déclaré dans pyblade.toml.

Utilisation

Les balises <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> sont disponibles dans tous vos 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>

Exemples

Contenu HTML (prose)

‹ Resizable Sidebar ›