Cards

Flexible card components with header, body, footer, and image sections. Includes hover effects, horizontal layout, compact mode, flat style, and padding modifiers.

Installation

npm install @thenewcss/cards

Examples

Basic Card

A card with header, body, and footer sections.

Card Header

Card Title

This is the card body with some example content. Cards are flexible containers for grouping related information.

Card Footer

<div class="card">
  <div class="card-header">Card Header</div>
  <div class="card-body">
    <h4>Card Title</h4>
    <p>This is the card body with some example content.</p>
  </div>
  <div class="card-footer">Card Footer</div>
</div>

Card with Image

Use .card-img-top for a top image. Here a placeholder div substitutes for an actual image.

Image Card

A card with an image at the top, followed by body content.

<div class="card">
  <img class="card-img-top" src="image.jpg" alt="...">
  <div class="card-body">
    <h4>Image Card</h4>
    <p>A card with an image at the top.</p>
  </div>
</div>

Hover Effect

Add .card-hover for a lift effect on hover with enhanced shadow.

Hover Me

This card lifts up and gains a larger shadow when you hover over it.

<div class="card card-hover">
  <div class="card-body">
    <h4>Hover Me</h4>
    <p>This card lifts up on hover.</p>
  </div>
</div>

Horizontal Layout

Use .card-horizontal for a side-by-side layout. Images are capped at 40% width.

Horizontal Card

Content sits alongside the image in a horizontal layout. The image takes up to 40% of the card width.

<div class="card card-horizontal">
  <img class="card-img-top" src="image.jpg" alt="...">
  <div class="card-body">
    <h4>Horizontal Card</h4>
    <p>Content sits alongside the image.</p>
  </div>
</div>

Compact Variant

Add .card-compact to reduce padding on all sections.

Compact Header

Compact Card

This card has reduced padding on all sections for tighter layouts.

Compact Footer

<div class="card card-compact">
  <div class="card-header">Compact Header</div>
  <div class="card-body">
    <h4>Compact Card</h4>
    <p>Reduced padding on all sections.</p>
  </div>
  <div class="card-footer">Compact Footer</div>
</div>

Flat Variant

Use .card-flat for a card with no shadow, no border, and a gray-100 background.

Flat Card

No shadow, no border. Uses a subtle gray background instead.

<div class="card card-flat">
  <div class="card-body">
    <h4>Flat Card</h4>
    <p>No shadow, no border. Subtle gray background.</p>
  </div>
</div>

Padding Variants

Control card section padding with .card-p-0 (no padding) and .card-p-lg (larger padding).

card-p-0 — no padding on sections

card-p-lg — larger padding on sections

<!-- No padding -->
<div class="card card-p-0">
  <div class="card-body">No padding on sections</div>
</div>

<!-- Large padding -->
<div class="card card-p-lg">
  <div class="card-body">Larger padding on sections</div>
</div>

Grid of Cards

Combine cards with the grid utility for responsive card layouts.

Card One

First card in a responsive three-column grid.

Card Two

Second card in a responsive three-column grid.

Card Three

Third card in a responsive three-column grid.

<div class="grid sm:grid-cols-3 gap-4">
  <div class="card card-hover">
    <div class="card-body">
      <h4>Card One</h4>
      <p>First card in a grid.</p>
    </div>
  </div>
  <div class="card card-hover">
    <div class="card-body">
      <h4>Card Two</h4>
      <p>Second card in a grid.</p>
    </div>
  </div>
  <div class="card card-hover">
    <div class="card-body">
      <h4>Card Three</h4>
      <p>Third card in a grid.</p>
    </div>
  </div>
</div>

Class Reference

Base

Class	Description
`.card`	Base card container. White background, border-radius lg, 1px gray-200 border, default box-shadow, overflow hidden.

Sections

Class	Description
`.card-header`	Card header section. Padding 1rem / 1.5rem with a bottom border.
`.card-body`	Card body section. Padding 1.5rem.
`.card-footer`	Card footer section. Padding 1rem / 1.5rem with a top border.
`.card-img-top`	Top image slot. Width 100%, height auto, display block.

Effects

Class	Description
`.card-hover`	Adds hover effect. Transition on transform and box-shadow (200ms). On hover: translateY(-2px) with shadow-lg.

Layouts

Class	Description
`.card-horizontal`	Horizontal card layout. Flex-direction row with image max-width 40%.
`.card-compact`	Compact card. Reduced padding on all sections.
`.card-flat`	Flat card. No shadow, no border, gray-100 background.

Padding

Class	Description
`.card-p-0`	Removes all padding from card sections.
`.card-p-lg`	Larger padding on all card sections.