• Components
  • Card

Card

Shoes

Shoes!

If a dog chews shoes whose shoes does he choose?

@jrmc.card()
  @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
<div class="card w-96 bg-base-100 shadow-xl" >
      <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>

Card compact

Shoes

Shoes!

If a dog chews shoes whose shoes does he choose?

@jrmc.card({ class: 'card-compact w-96 bg-base-100 shadow-xl' })
  @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
<div class="card card-compact w-96 bg-base-100 shadow-xl" >
      <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>

Card with badge

Shoes

Shoes! NEW

If a dog chews shoes whose shoes does he choose?

@jrmc.card()
  @slot('top')
    <figure><img src="https://picsum.photos/400/225" alt="Shoes" /></figure>
  @end
  @jrmc.card.body()
    @jrmc.card.title()
      Shoes!
      @!jrmc.badge({ text: 'NEW', class: 'badge-secondary' })
    @end
    <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
<div class="card w-96 bg-base-100 shadow-xl" >
      <figure><img src="https://picsum.photos/400/225" alt="Shoes" /></figure>
  <div class="card-body">
  <h2 class="card-title">      Shoes!<span class="badge badge-secondary" >
  NEW
</span></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>

Card with bottom image

Shoes!

If a dog chews shoes whose shoes does he choose?

Shoes
@jrmc.card()
  @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
  @slot('bottom')
    <figure><img src="https://picsum.photos/400/225" alt="Shoes" /></figure>
  @end
@end
<div class="card w-96 bg-base-100 shadow-xl" >
  
  <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>

      <figure><img src="https://picsum.photos/400/225" alt="Shoes" /></figure>
</div>

Card with center content

Shoes

Shoes!

If a dog chews shoes whose shoes does he choose?

@jrmc.card()
  @slot('top')
    <figure class="px-10 pt-10"><img src="https://picsum.photos/400/225" alt="Shoes" /></figure>
  @end
  @jrmc.card.body({ class: 'items-center text-center' })
    @!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
<div class="card w-96 bg-base-100 shadow-xl" >
      <figure class="px-10 pt-10"><img src="https://picsum.photos/400/225" alt="Shoes" /></figure>
  <div class="card-body items-center text-center">
  <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>

Card with image overlay

Shoes

Shoes!

If a dog chews shoes whose shoes does he choose?

@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
<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>

Card no image

Shoes!

If a dog chews shoes whose shoes does he choose?

@jrmc.card()
  @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
<div class="card w-96 bg-base-100 shadow-xl" >
  
  <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>

Card primary

Shoes!

If a dog chews shoes whose shoes does he choose?

@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
<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>

Card center whith neutral color

Cookies!

If a dog chews shoes whose shoes does he choose?

@jrmc.card({ class: 'w-96 bg-neutral text-neutral-content' })
  @jrmc.card.body({ class: 'items-center text-center' })
    @!jrmc.card.title({ text: 'Cookies!' })
    <p>If a dog chews shoes whose shoes does he choose?</p>

    @jrmc.card.actions()
      @!jrmc.button({ text: 'Accept', class: 'btn-primary' })
      @!jrmc.button({ text: 'Deny' })
    @end
  @end
@end
<div class="card w-96 bg-neutral text-neutral-content" >
  
  <div class="card-body items-center text-center">
  <h2 class="card-title">Cookies!</h2>
    <p>If a dog chews shoes whose shoes does he choose?</p>
<div class="card-actions justify-end">
  <button  class="btn btn-primary">
  Accept
</button>
<button  class="btn">
  Deny
</button>
</div>
</div>
  
</div>

Card with image on side

Movie

New movie is released!

Click the button to watch on Jetflix app.

@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
<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>

Card with image on side vertical on small screen and horizontal on large screen edge

Movie

New movie is released!

Click the button to watch on Jetflix app.

@jrmc.card({ class: 'lg:card-side bg-base-100 shadow-xl' })
  @slot('top')
    <figure><img src="https://picsum.photos/400/400" 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
<div class="card lg:card-side bg-base-100 shadow-xl" >
      <figure><img src="https://picsum.photos/400/400" 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>