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
<div class="space-y-8">
  <div class="p-4 rounded border">
    <div class="flex flex-col gap-6">
      <div>
        <h3 class="mb-2 text-lg font-semibold">Playground: Default Typography</h3>
        <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">
          Playground content. Try different options!
        </h2>
      </div>
    </div>
  </div>
  <div class="p-4 mt-4 text-gray-800 bg-white rounded-lg shadow dark:bg-gray-800 dark:text-gray-200">
    <h3 class="mb-2 text-lg font-semibold">Component Parameters:</h3>
    <ul class="list-disc list-inside">
      <li>Type: heading</li>
      <li>Level: h2</li>
      <li>Size: md</li>
      <li>Color: default</li>
      <li>Weight: normal</li>
      <li>Classes: </li>
    </ul>
  </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
<div class="space-y-8">
  <div class="p-4 rounded border">
    <div class="flex flex-col gap-6">
      <div>
        <h3 class="mb-2 text-lg font-semibold">Playground: Default Typography</h3>
        <%= rui_typography(type: type, level: level, size: size, color: color, weight: weight, classes: classes) do %>
          <%= content %>
        <% end %>
      </div>
    </div>
  </div>
  <div class="p-4 mt-4 text-gray-800 bg-white rounded-lg shadow dark:bg-gray-800 dark:text-gray-200">
    <h3 class="mb-2 text-lg font-semibold">Component Parameters:</h3>
    <ul class="list-disc list-inside">
      <li>Type: <%= type %></li>
      <li>Level: <%= level %></li>
      <li>Size: <%= size %></li>
      <li>Color: <%= color %></li>
      <li>Weight: <%= weight %></li>
      <li>Classes: <%= classes %></li>
    </ul>
  </div>
</div>

🎉 Typography Component Playground! 🎉

Welcome to the playground! Here you can experiment with different configurations to see how your typography will look and behave.

How to Use:

  1. Use the controls in the 'Params' section to customize your typography.
  2. Watch the preview update in real-time as you make changes.
  3. Experiment with different combinations to find what works best for your app!
Param Description Input

Typography content

Type

Heading Level

Size

Color

Weight

Add custom Classes ->