Card

A container component for visually grouping content.

Import


import { Card } from '@grannyshot/ui'


<Card>
  <h3>Title</h3>
  <p>Content inside the card.</p>
</Card>

Use the padding prop to control inner spacing.


<Card padding="sm">Small padding</Card>
<Card padding="md">Medium padding (default)</Card>
<Card padding="lg">Large padding</Card>

Set hoverable to highlight the border and shadow on hover.


<Card hoverable>
  Clickable card
</Card>


<Card padding="lg" hoverable>
  <h3>Project Name</h3>
  <p>Project description goes here.</p>
</Card>

Prop	Type	Default	Description
`padding`	`'sm' \| 'md' \| 'lg'`	`'md'`	Inner padding size
`hoverable`	`boolean`	`false`	Highlight effect on hover
`className`	`string`	—	Additional CSS classes

Extends all native <div> HTML attributes.