Packages
noora
0.86.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
docs/components/card.md
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# Card
Groups related content into a titled surface.
```html
<noora-card icon="layers" title="Overview">Content</noora-card>
```
## Attributes
| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `icon` | `string` | None | Sets a Noora icon in the header. |
| `title` | `string` | `""` | Sets the card title. |
## Slots
| 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. |
## Styling parts
| Part | Description |
| --- | --- |
| `card` | The card container. |
| `header` | The card header. |
| `body` | The card body section. |
## Basic
Basic card configurations with different content arrangements.
```html
<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>
```
## Content variations
Cards with different content structures and multiple sections.
```html
<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>
```
## Different icons
Cards showcasing different icon types and purposes.
```html
<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>
```