Cards

Flexible content containers with optional header, body, footer, and image slots.

Basic Cards

Cards with different section combinations.

Simple Card

Just a card body — the most minimal configuration.

With Header

A card with a header section that provides context or a title.

Featured

Full Card

Header, body, and footer — all three sections in one card.

Updated 5 min ago

<div class="n-card"> <div class="n-card-header">Title</div> <div class="n-card-body">Content here</div> <div class="n-card-footer">Footer text</div> </div>

Colored Cards

Combine cards with background color utilities for emphasis.

Primary

Primary colored card with inverted text.

Success

Great for positive feedback messages.

Warning

Draw attention to important notices.

Dark

Sleek dark cards for contrast.

Cards with Actions

Use the footer for action buttons or metadata.

Project Alpha

A collaborative design project with the frontend team. Currently in the review phase.

Design In Review

3 members

Project Beta

Backend API development with comprehensive test coverage and documentation.

Backend Active

5 members

Card Grid Layouts

Combine cards with the grid system for responsive layouts.

Stats Dashboard

Total Users

12,847

↑ 12.5% this month

Revenue

$48.2K

↑ 8.3% this month

Orders

1,429

↓ 2.1% this month

Conversion

3.24%

↑ 0.5% this month

Pricing Cards

Free

$0

For personal projects

✓ 1 project
✓ Basic grid system
✗ Premium components

Popular

Pro

$29

For growing teams

✓ Unlimited projects
✓ All components
✓ Priority support

Enterprise

$99

For large organizations

✓ Everything in Pro
✓ Custom branding
✓ SLA guarantee