# Card
Groups related content into a titled surface.
```html
Content
```
## 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
This is a simple card with basic content. It contains a title, icon, and some descriptive text.
This card includes action buttons in the header area. Users can interact with these actions to perform related tasks.
Cards can contain multiple action buttons for different operations.
```
## Content variations
Cards with different content structures and multiple sections.
```html
Source Files
Contains all the main application source code and modules.
Test Files
Unit tests, integration tests, and test utilities.
Documentation
API documentation, guides, and project notes.
Response Time: 245ms
Throughput: 1,250 req/sec
Error Rate: 0.12%
Last updated: 2 minutes ago
```
## Different icons
Cards showcasing different icon types and purposes.
```html
Current database health and connection status information.
User account information and profile settings.
Recent notifications and system alerts.
```