CardContentInner

Card content variant with reduced padding for stacked use inside a single Card. When several blocks of card content sit next to one another, the default vertical padding of <CardContent> doubles between blocks and wastes space — CardContentInner zeroes out vertical padding for inner items and keeps it for the first and last children.

Usage

import { Card } from "@/components/ui/card";
import { CardContentInner } from "@/components/admin/card-content-inner";
 
const Stack = () => (
  <Card>
    <CardContentInner>First section</CardContentInner>
    <CardContentInner>Second section</CardContentInner>
    <CardContentInner>Third section</CardContentInner>
  </Card>
);

The first child receives top padding and the last child receives bottom padding so the outer card edges still breathe. Inner children stack flush against each other.

Props