<.dm_card id="card-single-default">
  <:title>Star Wars</:title>
  Star Wars is an American epic space opera multimedia
  franchise created by George Lucas,
  which began with the eponymous 1977 film and
  quickly became a worldwide pop-culture phenomenon.
</.dm_card>

<.dm_card
  id="card-single-interactive-with-image"
  interactive
  image="https://picsum.photos/seed/duskmoon/400/200"
  shadow="lg"
  image_alt="Placeholder landscape"
>
  <: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>
</.dm_card>

<.dm_card id="card-variants-compact" variant="compact">
  <:title>Compact</:title>Reduced internal spacing.
</.dm_card>
<.dm_card
  id="card-variants-side"
  image="https://picsum.photos/seed/side/120/120"
  variant="side"
  image_alt="Side image"
>
  <:title>Side</:title>Content beside the image.
</.dm_card>
<.dm_card id="card-variants-bordered" variant="bordered">
  <:title>Bordered</:title>Visible border outline.
</.dm_card>
<.dm_card id="card-variants-glass" variant="glass">
  <:title>Glass</:title>Translucent glass morphism.
</.dm_card>

<.dm_card id="card-shadows-shadow-sm" shadow="sm">
  <:title>SM Shadow</:title>Shadow elevation demo.
</.dm_card>
<.dm_card id="card-shadows-shadow-md" shadow="md">
  <:title>MD Shadow</:title>Shadow elevation demo.
</.dm_card>
<.dm_card id="card-shadows-shadow-lg" shadow="lg">
  <:title>LG Shadow</:title>Shadow elevation demo.
</.dm_card>
<.dm_card id="card-shadows-shadow-xl" shadow="xl">
  <:title>XL Shadow</:title>Shadow elevation demo.
</.dm_card>

<.dm_card id="card-paddings-padding-none" padding="none">
  <:title>None Padding</:title>Padding level demo.
</.dm_card>
<.dm_card id="card-paddings-padding-sm" padding="sm">
  <:title>SM Padding</:title>Padding level demo.
</.dm_card>
<.dm_card id="card-paddings-padding-md" padding="md">
  <:title>MD Padding</:title>Padding level demo.
</.dm_card>
<.dm_card id="card-paddings-padding-lg" padding="lg">
  <:title>LG Padding</:title>Padding level demo.
</.dm_card>