Demo
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Default -->
<div class="p-6 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
  <h5 class="mb-2 text-2xl font-semibold tracking-tight text-heading"></h5>
  <div class="font-normal text-body">Use the following simple card component with a title and description.</div>
</div>
<!-- With Title Argument -->
<div class="p-6 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
  <h5 class="mb-2 text-2xl font-semibold tracking-tight text-heading">Card Title</h5>
  <div class="font-normal text-body">This card includes a title with the default styling.</div>
</div>
<!-- With Title Slot -->
<div class="p-6 bg-neutral-primary-soft border border-default rounded-base shadow-xs">
  <h1 class="text-3xl">This title replaces the entire title element</h1>
  <div class="font-normal text-body">Use the title slot to control all aspects of the title element</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
# Default
render(Flowbite::Card.new) { "Use the following simple card component with a title and description." }
# With Title Argument
render(Flowbite::Card.new(title: {content: "Card Title"})) do
  "This card includes a title with the default styling."
end
# With Title Slot
render(Flowbite::Card.new) do |component|
  component.with_title { "<h1 class=\"text-3xl\">This title replaces the entire title element</h1>".html_safe }
  "Use the title slot to control all aspects of the title element"
end

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

No params configured.