edge-components

Card: Primary 

<div class="card w-96 bg-primary text-primary-content">

    <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">
                Buy Now
            </button>

        </div>
    </div>

</div>
 
@jrmc.card({ class: 'w-96 bg-primary text-primary-content' })
  @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' })
    @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