Card

Groups related content into a titled surface.

Card web component

Groups related content into a titled surface.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Basic

Basic card configurations with different content arrangements.

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.

<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.

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

<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.

Current database health and connection status information.

User account information and profile settings.

Recent notifications and system alerts.

<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>

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

Name	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

Name	Description
`card`	The card container.
`header`	The card header.
`body`	The card body section.