Flowbite::Card

Renders a card element.

To render a title in the card, use the title argument or the title slot.

Using the title slot

<%= render(Flowbite::Card.new) do |card| %>
  <% card.with_title do %>
    <div><%= parent_category.name %></div>
    <%= render(Flowbite::Card::Title.new) { category.name } %>
  <% end %>
<% end %>

Examples

Default Card

Use the following simple card component with a title and description.

API reference

Inherits from Flowbite

In namespace

Title

Slots

`title`	Flowbite::Card::Title	The title of the card, rendered at the top. Use +with_title+ to set custom content.

Constructor

def initialize(class: [], options: {}, title: {})

Parameters

`class`	Array<String>	Additional CSS classes for the card container.
`options`	Hash	Additional HTML options for the card container (e.g., custom classes, data attributes). These options are merged into the card's root element.
`title`	Hash	An optional title for the card. If provided, it will be rendered at the top of the card in a h5 tag using the Card::Title component. The hash can contain: - `content`: The text content of the title - `options`: Additional HTML options to pass to the title element Alternatively, you can use the `title` slot to provide the entire title element yourself.