Basic Cards

Simple card components with minimal styling.

Handler

No data

Example Code
<BaseCard 
  variant="primary"
  fields={[{ id: 'handler-1', label: 'Handler', value: 'No data' }]}
/>

Primary Variant

Cards with the primary styling variant.

Product

Lorem ipsum dolor sit amet

Description

Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Price

$199.99

Example Code
<BaseCard 
  variant="primary"
  fields={[{ id: 'handler-1', label: 'Handler', value: 'No data' }]}
/>

Secondary Variant

Cards with the secondary styling variant.

Product

Ut enim ad minim veniam

Description

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Price

$249.99

Example Code
<BaseCard 
  variant="secondary"
  fields={[{ id: 'handler-1', label: 'Handler', value: 'No data' }]}
/>

Card Grid Layout

Multiple cards arranged in a responsive grid layout.

Product

Duis aute irure dolor

Price

$799.99

Product

Excepteur sint occaecat

Price

$1299.99

Product

Lorem ipsum dolor sit amet

Price

$199.99

Product

Ut enim ad minim veniam

Price

$249.99

Example Code
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
  <BaseCard variant="primary" fields={[{ id: 'handler-1', label: 'Handler', value: 'No data' }]} />
  <BaseCard variant="secondary" fields={[{ id: 'handler-1', label: 'Handler', value: 'No data' }]} />
  <BaseCard variant="primary" fields={[{ id: 'handler-1', label: 'Handler', value: 'No data' }]} />
  <BaseCard variant="secondary" fields={[{ id: 'handler-1', label: 'Handler', value: 'No data' }]} />
</div>

Card Component Catalog • Built with React and Tailwind CSS