Phoenix + DaisyUI

Card

Card Open in playground
Shoes

Shoes!

If a dog chews shoes whose shoes does he choose?

<.card class="bg-base-100 w-96 shadow-xl">
  <figure>
    <img
      src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
      alt="Shoes" />
  </figure>
  <:card_title>Shoes!</:card_title>
  <:card_body>
    <p>If a dog chews shoes whose shoes does he choose?</p>
  </:card_body>
  <:card_actions class="justify-end">
    <button class="btn btn-primary">Buy Now</button>
  </:card_actions>
</.card>
Modifiers Open in playground
Shoes

Shoes!

If a dog chews shoes whose shoes does he choose?

Shoes

Shoes!

If a dog chews shoes whose shoes does he choose?

<.card class="bg-base-100 w-96 shadow-xl" modifier="side">
  <figure>
    <img
      src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
      alt="Shoes" />
  </figure>
  <:card_title>Shoes!</:card_title>
  <:card_body>
    <p>If a dog chews shoes whose shoes does he choose?</p>
  </:card_body>
  <:card_actions class="justify-end">
    <button class="btn btn-primary">Buy Now</button>
  </:card_actions>
</.card>
<.card class="bg-base-100 w-96 shadow-xl" modifier="image_full">
  <figure>
    <img
      src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
      alt="Shoes" />
  </figure>
  <:card_title>Shoes!</:card_title>
  <:card_body>
    <p>If a dog chews shoes whose shoes does he choose?</p>
  </:card_body>
  <:card_actions class="justify-end">
    <button class="btn btn-primary">Buy Now</button>
  </:card_actions>
</.card>
Compact Open in playground
Shoes

Shoes!

If a dog chews shoes whose shoes does he choose?

<.card class="bg-base-100 w-96 shadow-xl" padding="compact">
  <figure>
    <img
      src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
      alt="Shoes" />
  </figure>
  <:card_title>Shoes!</:card_title>
  <:card_body>
    <p>If a dog chews shoes whose shoes does he choose?</p>
  </:card_body>
  <:card_actions class="justify-end">
    <button class="btn btn-primary">Buy Now</button>
  </:card_actions>
</.card>
Card with bottom image Open in playground

Shoes!

If a dog chews shoes whose shoes does he choose?

Shoes 
<.card class="bg-base-100 w-96 shadow-xl" placement="bottom">
  <figure>
    <img
      src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
      alt="Shoes" />
  </figure>
  <:card_title>Shoes!</:card_title>
  <:card_body>
    <p>If a dog chews shoes whose shoes does he choose?</p>
  </:card_body>
  <:card_actions class="justify-end">
    <button class="btn btn-primary">Buy Now</button>
  </:card_actions>
</.card>
Card with no image Open in playground

Shoes!

If a dog chews shoes whose shoes does he choose?

<.card class="bg-base-100 w-96 shadow-xl">
  <:card_title>Shoes!</:card_title>
  <:card_body>
    <p>If a dog chews shoes whose shoes does he choose?</p>
  </:card_body>
  <:card_actions class="justify-end">
    <button class="btn btn-primary">Buy Now</button>
  </:card_actions>
</.card>