edge-components

Card: Image Overlay 

<div class="card w-96 bg-base-100 shadow-xl image-full">
    <figure><img src="https://picsum.photos/400/225" alt="Shoes" /></figure>
    <div class="card-body">
        <h2 class="card-title">Shoes!</h2>
        <p>If a dog chews shoes whose shoes does he choose?</p>
        <div class="card-actions justify-end">

            <button class="btn btn-primary">
                Buy Now
            </button>

        </div>
    </div>

</div>
 
@jrmc.card({ class: 'w-96 bg-base-100 shadow-xl image-full'})
  @slot('top')
    <figure><img src="https://picsum.photos/400/225" alt="Shoes" /></figure>
  @end
  @jrmc.card.body()
    @!jrmc.card.title({ text: 'Shoes!' })
    <p>If a dog chews shoes whose shoes does he choose?</p>

    @jrmc.card.actions()
      @!jrmc.button({ text: 'Buy Now', class: 'btn-primary' })
    @end
  @end
@end

Card

Doc : daisyui card

Cards are used to group and display content in a way that is easily readable.

Class name Type
card Component Container element
card-title Component Title of card
card-body Component Container for content
card-actions Component Container for buttons
card-bordered Modifier Adds border to
image-full Modifier The image in
element will be the background
card-normal Responsive Applies default paddings
card-compact Responsive Applies smaller paddings
card-side Responsive The image in
will be on to the side