- 1.5.0

Card

Placeholder landscape
Interactive Card
Click this card to see the hover effect.
Attribute Type Documentation Default Value
id :any

HTML id attribute
class :any

Additional CSS classes
body_class :any

CSS classes for card body
variant :string

Card layout variant
shadow :string

Card shadow size
interactive :boolean

Make card clickable/hoverable
false
padding :string

Card padding size
image :string

Card image URL
image_alt :string

Card image alt text
""
rest :global
title :slot

Card title content
Show slot attributes Hide slot attributes
id :any

Title element id
class :any

Title CSS classes

 
<:title>Interactive Card</:title>
Click this card to see the hover effect.
<:action>
  <button type="button" class="btn btn-primary btn-sm">Learn More</button>
</:action>
action :slot

Card action buttons
Show slot attributes Hide slot attributes
id :any

Action container id
class :any

Action container CSS classes

 
<:title>Interactive Card</:title>
Click this card to see the hover effect.
<:action>
  <button type="button" class="btn btn-primary btn-sm">Learn More</button>
</:action>
inner_block :slot

Card body content