import CodeRender from '../../CodeRender'

### Card

<CodeRender code={`
<div class="card w-96 bg-base-100 shadow-xl">
  <figure><img src="/pig.jpg" 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="justify-end card-actions"><button class="btn btn-primary">Buy Now</button></div>
  </div>
</div>

`} />
  
```html
<div class="card w-96 bg-base-100 shadow-xl">
  <figure><img src="/pig.jpg" 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="justify-end card-actions"><button class="btn btn-primary">Buy Now</button></div>
  </div>
</div>

```
### Compact card (less padding for `card-body`)

<CodeRender code={`
<div class="card w-96 bg-base-100 card-compact shadow-xl">
  <figure><img src="/pig.jpg" 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="justify-end card-actions"><button class="btn btn-primary">Buy Now</button></div>
  </div>
</div>

`} />
  
```html
<div class="card w-96 bg-base-100 card-compact shadow-xl">
  <figure><img src="/pig.jpg" 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="justify-end card-actions"><button class="btn btn-primary">Buy Now</button></div>
  </div>
</div>

```
### Card with badge

<CodeRender code={`
<div class="card w-96 bg-base-100 shadow-xl">
  <figure><img src="/pig.jpg" alt="Shoes" /></figure>
  <div class="card-body">
    <h2 class="card-title">
      Shoes!
      <div class="badge badge-secondary">NEW</div>
    </h2>
    <p>If a dog chews shoes whose shoes does he choose?</p>
    <div class="justify-end card-actions">
      <div class="badge badge-outline">Fashion</div>
      <div class="badge badge-outline">Products</div>
    </div>
  </div>
</div>

`} />
  
```html
<div class="card w-96 bg-base-100 shadow-xl">
  <figure><img src="/pig.jpg" alt="Shoes" /></figure>
  <div class="card-body">
    <h2 class="card-title">
      Shoes!
      <div class="badge badge-secondary">NEW</div>
    </h2>
    <p>If a dog chews shoes whose shoes does he choose?</p>
    <div class="justify-end card-actions">
      <div class="badge badge-outline">Fashion</div>
      <div class="badge badge-outline">Products</div>
    </div>
  </div>
</div>

```
### Card with bottom image

<CodeRender code={`
<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>
  <figure><img src="/pig.jpg" alt="Shoes" /></figure>
</div>

`} />
  
```html
<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>
  <figure><img src="/pig.jpg" alt="Shoes" /></figure>
</div>

```
### Card with centered content and paddings

<CodeRender code={`
<div class="card w-96 bg-base-100 shadow-xl">
  <figure class="px-10 pt-10"><img src="/pig.jpg" alt="Shoes" class="rounded-xl" /></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"><button class="btn btn-primary">Buy Now</button></div>
  </div>
</div>

`} />
  
```html
<div class="card w-96 bg-base-100 shadow-xl">
  <figure class="px-10 pt-10"><img src="/pig.jpg" alt="Shoes" class="rounded-xl" /></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"><button class="btn btn-primary">Buy Now</button></div>
  </div>
</div>

```
### Card with image overlay

<CodeRender code={`
<div class="card w-96 bg-base-100 shadow-xl image-full">
  <figure><img src="/pig.jpg" 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="justify-end card-actions"><button class="btn btn-primary">Buy Now</button></div>
  </div>
</div>

`} />
  
```html
<div class="card w-96 bg-base-100 shadow-xl image-full">
  <figure><img src="/pig.jpg" 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="justify-end card-actions"><button class="btn btn-primary">Buy Now</button></div>
  </div>
</div>

```
### Card with no image

<CodeRender code={`
<div class="card w-96 bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">Card title!</h2>
    <p>If a dog chews shoes whose shoes does he choose?</p>
    <div class="justify-end card-actions"><button class="btn btn-primary">Buy Now</button></div>
  </div>
</div>

`} />
  
```html
<div class="card w-96 bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">Card title!</h2>
    <p>If a dog chews shoes whose shoes does he choose?</p>
    <div class="justify-end card-actions"><button class="btn btn-primary">Buy Now</button></div>
  </div>
</div>

```
### Card with custom color

<CodeRender code={`
<div class="card w-96 bg-primary text-primary-content">
  <div class="card-body">
    <h2 class="card-title">Card title!</h2>
    <p>If a dog chews shoes whose shoes does he choose?</p>
    <div class="justify-end card-actions"><button class="btn">Buy Now</button></div>
  </div>
</div>

`} />
  
```html
<div class="card w-96 bg-primary text-primary-content">
  <div class="card-body">
    <h2 class="card-title">Card title!</h2>
    <p>If a dog chews shoes whose shoes does he choose?</p>
    <div class="justify-end card-actions"><button class="btn">Buy Now</button></div>
  </div>
</div>

```
### Centered card with neutral color

<CodeRender code={`
<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>We are using cookies for no reason.</p>
    <div class="justify-end card-actions">
      <button class="btn btn-primary">Accept</button>
      <button class="btn btn-ghost">Deny</button>
    </div>
  </div>
</div>

`} />
  
```html
<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>We are using cookies for no reason.</p>
    <div class="justify-end card-actions">
      <button class="btn btn-primary">Accept</button>
      <button class="btn btn-ghost">Deny</button>
    </div>
  </div>
</div>

```
### Card with action on top

<CodeRender code={`
<div class="card w-96 bg-base-100 shadow-xl">
  <div class="card-body">
    <div class="justify-end card-actions">
      <button class="btn btn-square btn-sm">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          ></path>
        </svg>
      </button>
    </div>
    <p>We are using cookies for no reason.</p>
  </div>
</div>

`} />
  
```html
<div class="card w-96 bg-base-100 shadow-xl">
  <div class="card-body">
    <div class="justify-end card-actions">
      <button class="btn btn-square btn-sm">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          ></path>
        </svg>
      </button>
    </div>
    <p>We are using cookies for no reason.</p>
  </div>
</div>

```
### Card glass

<CodeRender code={`
<div class="card w-96 glass">
  <figure><img src="/pig.jpg" alt="car!" /></figure>
  <div class="card-body">
    <h2 class="card-title">Life hack</h2>
    <p>How to park your car at your garage?</p>
    <div class="justify-end card-actions"><button class="btn btn-primary">Learn now!</button></div>
  </div>
</div>

`} />
  
```html
<div class="card w-96 glass">
  <figure><img src="/pig.jpg" alt="car!" /></figure>
  <div class="card-body">
    <h2 class="card-title">Life hack</h2>
    <p>How to park your car at your garage?</p>
    <div class="justify-end card-actions"><button class="btn btn-primary">Learn now!</button></div>
  </div>
</div>

```
### Card with image on side

<CodeRender code={`
<div class="card card-side bg-base-100 shadow-xl">
  <figure><img src="/pig.jpg" 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="justify-end card-actions"><button class="btn btn-primary">Watch</button></div>
  </div>
</div>

`} />
  
```html
<div class="card card-side bg-base-100 shadow-xl">
  <figure><img src="/pig.jpg" 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="justify-end card-actions"><button class="btn btn-primary">Watch</button></div>
  </div>
</div>

```
### Responsive card (vertical on small screen, horizontal on large screen)

<CodeRender code={`
<div class="card lg:card-side bg-base-100 shadow-xl">
  <figure><img src="/pig.jpg" alt="Album" /></figure>
  <div class="card-body">
    <h2 class="card-title">New album is released!</h2>
    <p>Click the button to listen on Spotiwhy app.</p>
    <div class="justify-end card-actions"><button class="btn btn-primary">Listen</button></div>
  </div>
</div>

`} />
  
```html
<div class="card lg:card-side bg-base-100 shadow-xl">
  <figure><img src="/pig.jpg" alt="Album" /></figure>
  <div class="card-body">
    <h2 class="card-title">New album is released!</h2>
    <p>Click the button to listen on Spotiwhy app.</p>
    <div class="justify-end card-actions"><button class="btn btn-primary">Listen</button></div>
  </div>
</div>

```   

    