Fluxbit ViewComponents
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<a href="https://flowbite.com/docs/images/blog/" class="border border-gray-200 dark:border-gray-700 shadow-sm rounded-lg bg-red-50 text-red-900 border-red-200 dark:bg-red-900 dark:text-white dark:border-red-800 transition-shadow hover:shadow-lg cursor-pointer hover:bg-red-100 dark:hover:bg-red-800 flex flex-row">
  <div class="x"><img src="https://flowbite.com/docs/images/blog/image-4.jpg" class="object-cover w-full rounded-t-lg h-96 md:h-auto md:w-48 md:rounded-none md:rounded-s-lg"></img></div>
<div class="flex-1">
  <div class="px-4 py-2 font-semibold text-gray-900 dark:text-gray-100">    
    <h5>Card Title</h5>
  </div>
  <div class="px-4 py-2 space-y-4 px-4 py-2">    
    <p>Paragraph of content.</p>
    <p>Paragraph of content.</p>
    <p>Paragraph of content.</p>
    <p>Paragraph of content.</p>
  </div>
  <div class="px-4 py-2 text-sm text-gray-500 dark:text-gray-400">    <small>Footer text</small>
  </div>
</div>
</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%= render Fluxbit::CardComponent.new(
  color: :danger,
  shadow: true,
  hoverable: true,
  tooltip_text: "Card info",
  image: 'https://flowbite.com/docs/images/blog/image-4.jpg',
  image_position: :left,
  image_props: {},
  href: 'https://flowbite.com/docs/images/blog/',
  color: :danger
) do |card| %>
  <% card.with_header do %>
    <h5>Card Title</h5>
  <% end %>
  <% card.with_section do %>
    <p>Paragraph of content.</p>
    <p>Paragraph of content.</p>
    <p>Paragraph of content.</p>
    <p>Paragraph of content.</p>
  <% end %>
  <% card.with_footer do %>
    <small>Footer text</small>
  <% end %>
<% end %>

Renders a basic text input.

No params configured.