noora/docs/components/card.md
Groups related content into a titled surface.
<noora-card icon="layers" title="Overview">Content</noora-card>
| Attribute | Type or allowed values | Default | Description |
|---|---|---|---|
icon | string | None | Sets a Noora icon in the header. |
title | string | "" | Sets the card title. |
| Slot | Description |
|---|---|
default | The card body. |
icon | A custom icon that takes precedence over the icon attribute. |
actions | Header actions. |
section | Additional independently styled card sections. |
| Part | Description |
|---|---|
card | The card container. |
header | The card header. |
body | The card body section. |
Basic card configurations with different content arrangements.
<noora-card style="width: 350px" icon="dashboard" title="Dashboard Overview">
<p>This is a simple card with basic content. It contains a title, icon, and some descriptive text.</p>
</noora-card>
<noora-card style="width: 350px" icon="chart_arcs" title="Recent Analytics">
<noora-button slot="actions" variant="secondary" label="View Details" size="medium"></noora-button>
<p>This card includes action buttons in the header area. Users can interact with these actions to perform related tasks.</p>
</noora-card>
<noora-card style="width: 400px" icon="settings" title="Project Settings">
<noora-button slot="actions" variant="secondary" label="Edit" size="medium"></noora-button>
<noora-button slot="actions" variant="primary" label="Save" size="medium"></noora-button>
<p>Cards can contain multiple action buttons for different operations.</p>
</noora-card>
Cards with different content structures and multiple sections.
<noora-card style="width: 400px" icon="folders" title="Project Structure">
<section slot="section"><h4>Source Files</h4><p>Contains all the main application source code and modules.</p></section>
<section slot="section"><h4>Test Files</h4><p>Unit tests, integration tests, and test utilities.</p></section>
<section slot="section"><h4>Documentation</h4><p>API documentation, guides, and project notes.</p></section>
</noora-card>
<noora-card style="width: 450px" icon="chart_donut_4" title="Performance Metrics">
<noora-button slot="actions" variant="secondary" label="Export" size="medium"></noora-button>
<section slot="section">
<div style="margin-bottom: 12px;"><strong>Response Time:</strong> 245ms</div>
<div style="margin-bottom: 12px;"><strong>Throughput:</strong> 1,250 req/sec</div>
<div style="margin-bottom: 12px;"><strong>Error Rate:</strong> 0.12%</div>
</section>
<section slot="section"><em>Last updated: 2 minutes ago</em></section>
</noora-card>
Cards showcasing different icon types and purposes.
<noora-card style="width: 320px" icon="database" title="Database Status">
<p>Current database health and connection status information.</p>
</noora-card>
<noora-card style="width: 320px" icon="user" title="User Profile">
<p>User account information and profile settings.</p>
</noora-card>
<noora-card style="width: 320px" icon="mail" title="Notifications">
<noora-button slot="actions" variant="secondary" label="Mark All Read" size="medium"></noora-button>
<p>Recent notifications and system alerts.</p>
</noora-card>