edge-components

Card: With Image On Side 

<div class="card card-side bg-base-100 shadow-xl">
    <figure><img src="https://picsum.photos/200/280" alt="Movie"></figure>
    <div class="card-body">
        <h2 class="card-title">New movie is released!</h2>
        <p>Click the button to watch on Jetflix app.</p>
        <div class="card-actions justify-end">

            <button class="btn btn-primary">
                Watch
            </button>

        </div>
    </div>

</div>
 
@jrmc.card({ class: 'card-side bg-base-100 shadow-xl' })
  @slot('top')
    <figure><img src="https://picsum.photos/200/280" alt="Movie"></figure>
  @end
  @jrmc.card.body()
    @!jrmc.card.title({ text: 'New movie is released!' })
    <p>Click the button to watch on Jetflix app.</p>

    @jrmc.card.actions()
      @!jrmc.button({ text: 'Watch', 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