@pagedotapp/page-card

A flexible card container component

Installation

npm install @pagedotapp/page-card

Usage

import { PageCard } from "@pagedotapp/page-card"

function App() {
	return (
		<PageCard>
			<h3>Card Title</h3>
			<p>Card content goes here</p>
		</PageCard>
	)
}

Props

| Prop | Type | Default | Description | | ----------- | --------------------- | ------- | ------------------------- | | children | React.ReactNode | - | Card content | | className | string | "" | Additional CSS class name | | style | React.CSSProperties | - | Inline styles |

See the TypeScript definitions for detailed prop types.

Styling

This component uses CSS modules for styling. The styles are injected automatically when you use the component.

Custom Styling

You can customize the appearance using the className prop to add custom CSS classes or the style prop for inline styles:

// Using className
<PageCard className="custom-card">
  Content
</PageCard>

// Using inline styles
<PageCard style={{ backgroundColor: '#f0f8ff', padding: '20px' }}>
  Content
</PageCard>

// Combining both
<PageCard
  className="custom-card"
  style={{ transform: 'scale(1.05)' }}
>
  Content
</PageCard>

Dependencies

Peer Dependencies

• React >=16.8.0
• React DOM >=16.8.0

License

MIT © PageStudio