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
<div class="space-y-8">
  <div class="p-4 rounded border">
    <div class="flex flex-col gap-6">
      <h3 class="mb-2 text-lg font-semibold">Playground: ContentComponent with different options</h3>
      <article class="grid grid-cols-1 gap-2">
        <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">Mollit velit sunt elit consectetur voluptate voluptate eiusmod excepteur non amet id reprehenderit duis voluptate. Minim eiusmod tempor minim dolor dolore. Sint nulla cillum voluptate reprehenderit esse occaecat anim aliqua consectetur adipisicing id ea veniam laborum magna.</p>
        <p class="mb-2 text-left justify-start text-base text-zinc-700 dark:text-zinc-300 font-sans leading-normal tracking-normal font-normal" role="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </article>
      <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: default</li>
          <li>Layout: one_column</li>
          <li>Size: base</li>
          <li>Color: default</li>
          <li>Weight: normal</li>
          <li>Variant: </li>
          <li>Font: sans</li>
          <li>Align: left</li>
          <li>Line Height: normal</li>
          <li>Letter Spacing: normal</li>
          <li>Prose: false</li>
        </ul>
      </div>
    </div>
  </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
<div class="space-y-8">
  <div class="p-4 rounded border">
    <div class="flex flex-col gap-6">
      <h3 class="mb-2 text-lg font-semibold">Playground: ContentComponent with different options</h3>
      <%= rui_content(
        type: type, layout: layout, size: size, color: color, weight: weight,
        variant: variant, font: font, align: align, line_height: line_height,
        letter_spacing: letter_spacing, prose: prose, paragraphs: paragraphs, classes: classes
      ) %>
      <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>Layout: <%= layout %></li>
          <li>Size: <%= size %></li>
          <li>Color: <%= color %></li>
          <li>Weight: <%= weight %></li>
          <li>Variant: <%= variant %></li>
          <li>Font: <%= font %></li>
          <li>Align: <%= align %></li>
          <li>Line Height: <%= line_height %></li>
          <li>Letter Spacing: <%= letter_spacing %></li>
          <li>Prose: <%= prose %></li>
        </ul>
      </div>
    </div>
  </div>
</div>

🎉 Content Component Playground! 🎉

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

How to Use:

  1. Use the controls in the 'Params' section to customize your content.
  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

Type

Layout

Size

Color

Weight

Variant

Font

Align

Line Height

Letter Spacing

Prose Mode (Tailwind Typography)

Add custom Classes ->