RapidRails UI Book
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<div class="space-y-12">
  <div class="space-y-2">
    <h5 class="text-lg md:text-xl font-semibold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal text-lg md:text-xl font-semibold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal" role="heading" aria-level="5">Headings 1-6</h5>
    <h1 class="text-4xl md:text-5xl font-extrabold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal text-4xl md:text-5xl font-extrabold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal" role="heading" aria-level="1">Heading 1</h1>
    <h2 class="text-3xl md:text-4xl font-extrabold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal text-3xl md:text-4xl font-extrabold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal" role="heading" aria-level="2">Heading 2</h2>
    <h3 class="text-2xl md:text-3xl font-bold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal text-2xl md:text-3xl font-bold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal" role="heading" aria-level="3">Heading 3</h3>
    <h4 class="text-xl md:text-2xl font-bold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal text-xl md:text-2xl font-bold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal" role="heading" aria-level="4">Heading 4</h4>
    <h5 class="text-lg md:text-xl font-semibold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal text-lg md:text-xl font-semibold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal" role="heading" aria-level="5">Heading 5</h5>
    <h6 class="text-base md:text-lg font-semibold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal text-base md:text-lg font-semibold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal" role="heading" aria-level="6">Heading 6</h6>
  </div>
  <div class="space-y-2">
    <h5 class="text-lg md:text-xl font-semibold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal text-lg md:text-xl font-semibold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal" role="heading" aria-level="5">Headings with Custom Colors</h5>
    <h3 class="text-2xl md:text-3xl font-bold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal text-2xl md:text-3xl font-bold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal" role="heading" aria-level="3">Heading 3 (Primary) left</h3>
    <h3 class="text-2xl md:text-3xl font-bold text-sky-700 dark:text-sky-300 text-right justify-end font-sans leading-normal tracking-normal text-2xl md:text-3xl font-bold text-sky-700 dark:text-sky-300 text-right justify-end font-sans leading-normal tracking-normal" role="heading" aria-level="3">Heading 3 (Secondary) right</h3>
    <h3 class="text-2xl md:text-3xl font-bold text-zinc-700 dark:text-zinc-300 text-center justify-center font-sans leading-normal tracking-normal text-2xl md:text-3xl font-bold text-zinc-700 dark:text-zinc-300 text-center justify-center font-sans leading-normal tracking-normal" role="heading" aria-level="3">Heading 3 (Muted) center</h3>
    <h3 class="text-2xl md:text-3xl font-bold text-red-700 dark:text-red-300 text-right justify-end font-sans leading-normal tracking-normal text-2xl md:text-3xl font-bold text-red-700 dark:text-red-300 text-right justify-end font-sans leading-normal tracking-normal" role="heading" aria-level="3">Heading 3 (Danger) right</h3>
    <h3 class="text-2xl md:text-3xl font-bold text-green-700 dark:text-green-300 text-center justify-center font-sans leading-normal tracking-normal text-2xl md:text-3xl font-bold text-green-700 dark:text-green-300 text-center justify-center font-sans leading-normal tracking-normal" role="heading" aria-level="3">Heading 3 (Success) center</h3>
    <h3 class="text-2xl md:text-3xl font-bold text-yellow-700 dark:text-yellow-300 text-left justify-start font-sans leading-normal tracking-normal text-2xl md:text-3xl font-bold text-yellow-700 dark:text-yellow-300 text-left justify-start font-sans leading-normal tracking-normal" role="heading" aria-level="3">Heading 3 (Warning) left</h3>
  </div>
  <div class="space-y-2">
    <h5 class="text-lg md:text-xl font-semibold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal text-lg md:text-xl font-semibold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal" role="heading" aria-level="5">Paragraphs</h5>
    <p class="text-lg font-normal text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal mb-4 text-lg font-normal text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal mb-4">This is a large paragraph. You can customize size, weight, color, and alignment.</p>
    <p class="text-lg font-normal text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal mb-4 text-lg font-normal text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal mb-4">This is a large paragraph. You can customize size, weight, color, and alignment.</p>
  </div>
  <div class="space-y-2">
    <h5 class="text-lg md:text-xl font-semibold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal text-lg md:text-xl font-semibold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal" role="heading" aria-level="5">Blockquotes</h5>
    <blockquote class="border-l-4 pl-4 italic bg-zinc-500/30 hover:bg-zinc-500/50 border-zinc-500/20 text-zinc-700 hover:text-zinc-800
        focus:ring-2 focus:outline-none focus:ring-zinc-300 dark:focus:ring-zinc-800
        dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80 dark:hover:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal my-6 border-l-4 pl-4 italic bg-zinc-500/30 hover:bg-zinc-500/50 border-zinc-500/20 text-zinc-700 hover:text-zinc-800
        focus:ring-2 focus:outline-none focus:ring-zinc-300 dark:focus:ring-zinc-800
        dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80 dark:hover:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal my-6" aria-describedby="typography-cite-rapidrailsui-docs">This is a blockquote with a citation.<cite class="block mt-2 text-sm text-zinc-500 dark:text-zinc-400" id="typography-cite-rapidrailsui-docs">RapidRailsUI Docs</cite></blockquote>
    <blockquote class="border-l-4 pl-4 italic bg-zinc-500/30 hover:bg-zinc-500/50 border-zinc-500/20 text-zinc-700 hover:text-zinc-800
        focus:ring-2 focus:outline-none focus:ring-zinc-300 dark:focus:ring-zinc-800
        dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80 dark:hover:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal my-6 border-l-4 pl-4 italic bg-zinc-500/30 hover:bg-zinc-500/50 border-zinc-500/20 text-zinc-700 hover:text-zinc-800
        focus:ring-2 focus:outline-none focus:ring-zinc-300 dark:focus:ring-zinc-800
        dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80 dark:hover:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal my-6" aria-describedby="typography-cite-rapidrailsui-docs">A quote with a semantic citation.<cite class="block mt-2 text-sm text-zinc-500 dark:text-zinc-400" id="typography-cite-rapidrailsui-docs">RapidRailsUI Docs</cite></blockquote>
  </div>
  <div class="space-y-2">
    <h5 class="text-lg md:text-xl font-semibold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal text-lg md:text-xl font-semibold text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal" role="heading" aria-level="5">Inline Text</h5>
    <span class="text-base font-normal text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal text-base font-normal text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal">This is muted inline text.</span>
    <br>
    <span class="text-base font-normal text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal text-base font-normal text-zinc-700 dark:text-zinc-300 text-left justify-start font-sans leading-normal tracking-normal">This is primary inline text.</span>
    <br>
    <span class="text-base font-normal text-sky-700 dark:text-sky-300 text-left justify-start font-sans leading-normal tracking-normal text-base font-normal text-sky-700 dark:text-sky-300 text-left justify-start font-sans leading-normal tracking-normal">This is secondary inline text.</span>
    <br>
    <span class="text-base font-normal text-red-700 dark:text-red-300 text-left justify-start font-sans leading-normal tracking-normal text-base font-normal text-red-700 dark:text-red-300 text-left justify-start font-sans leading-normal tracking-normal">This is danger inline text.</span>
    <br>
    <span class="text-base font-normal text-green-700 dark:text-green-300 text-left justify-start font-sans leading-normal tracking-normal text-base font-normal text-green-700 dark:text-green-300 text-left justify-start font-sans leading-normal tracking-normal">This is success inline text.</span>
    <br>
    <span class="text-base font-normal text-yellow-700 dark:text-yellow-300 text-left justify-start font-sans leading-normal tracking-normal text-base font-normal text-yellow-700 dark:text-yellow-300 text-left justify-start font-sans leading-normal tracking-normal">This is warning inline text.</span>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="space-y-12">
  <div class="space-y-2">
      <%= rui_typography(type: :heading, level: :h5) { "Headings 1-6" } %>
      <%= rui_typography(type: :heading, level: :h1) { "Heading 1" } %>
      <%= rui_typography(type: :heading, level: :h2) { "Heading 2" } %>
      <%= rui_typography(type: :heading, level: :h3) { "Heading 3" } %>
      <%= rui_typography(type: :heading, level: :h4) { "Heading 4" } %>
      <%= rui_typography(type: :heading, level: :h5) { "Heading 5" } %>
      <%= rui_typography(type: :heading, level: :h6) { "Heading 6" } %>
  </div>
  <div class="space-y-2">
      <%= rui_typography(type: :heading, level: :h5) { "Headings with Custom Colors" } %>
      <%= rui_typography(type: :heading, level: :h3, color: :primary) { "Heading 3 (Primary) left" } %>
      <%= rui_typography(type: :heading, level: :h3, color: :secondary, align: :right) { "Heading 3 (Secondary) right" } %>
      <%= rui_typography(type: :heading, level: :h3, color: :muted, align: :center) { "Heading 3 (Muted) center" } %>
      <%= rui_typography(type: :heading, level: :h3, color: :danger, align: :right) { "Heading 3 (Danger) right" } %>
      <%= rui_typography(type: :heading, level: :h3, color: :success, align: :center) { "Heading 3 (Success) center" } %>
      <%= rui_typography(type: :heading, level: :h3, color: :warning) { "Heading 3 (Warning) left" } %>
  </div>
  <div class="space-y-2">
      <%= rui_typography(type: :heading, level: :h5) { "Paragraphs" } %>
      <%= rui_typography(type: :paragraph, size: :lg) { "This is a large paragraph. You can customize size, weight, color, and alignment." } %>
      <%= rui_typography(type: :paragraph, size: :lg, color: :primary) { "This is a large paragraph. You can customize size, weight, color, and alignment." } %>
  </div>
  <div class="space-y-2">
      <%= rui_typography(type: :heading, level: :h5) { "Blockquotes" } %>
      <%= rui_typography(type: :blockquote, cite: "RapidRailsUI Docs", color: :primary) { "This is a blockquote with a citation." } %>
      <%= rui_typography(type: :blockquote, cite: "RapidRailsUI Docs") { "A quote with a semantic citation." } %>
  </div>
  <div class="space-y-2">
      <%= rui_typography(type: :heading, level: :h5) { "Inline Text" } %>
      <%= rui_typography(type: :text, color: :muted) { "This is muted inline text." } %><br>
      <%= rui_typography(type: :text, color: :primary) { "This is primary inline text." } %><br>
      <%= rui_typography(type: :text, color: :secondary) { "This is secondary inline text." } %><br>
      <%= rui_typography(type: :text, color: :danger) { "This is danger inline text." } %><br>
      <%= rui_typography(type: :text, color: :success) { "This is success inline text." } %><br>
      <%= rui_typography(type: :text, color: :warning) { "This is warning inline text." } %>
  </div>
</div>

🚀 Typography Component Overview

This preview showcases various typography configurations and styles:

  • Different colors (primary, secondary, success, danger, etc.)
  • Different sizes (heading6Xl, heading5Xl, heading4Xl, xl, lg, md, sm, xs)
  • Different weights (normal, medium, semibold, bold, extrabold, black)
  • Different alignments (left, center, right, justify)
  • Different types (heading, paragraph, text, blockquote)
  • Different heading levels (h1, h2, h3, h4, h5, h6)

Overview of all typography types

No params configured.