Noora (0.11.0)

Card

Basic card configurations with different content arrangements Open in playground
Dashboard Overview

This is a simple card with basic content. It contains a title, icon, and some descriptive text.

Recent Analytics

This card includes action buttons in the header area. Users can interact with these actions to perform related tasks.

Project Settings

Cards can contain multiple action buttons for different operations.

<.card title="Dashboard Overview" style="width: 350px" icon="dashboard">
  <.card_section>
    <p>This is a simple card with basic content. It contains a title, icon, and some descriptive text.</p>
  </.card_section>
</.card>
<.card title="Recent Analytics" style="width: 350px" icon="chart_arcs">
  <:actions>
    <.button variant="secondary" label="View Details" size="medium" />
  </:actions>
  <.card_section>
    <p>This card includes action buttons in the header area. Users can interact with these actions to perform related tasks.</p>
  </.card_section>
</.card>
<.card title="Project Settings" style="width: 400px" icon="settings">
  <:actions>
    <.button variant="secondary" label="Edit" size="medium" />
    <.button variant="primary" label="Save" size="medium" />
  </:actions>
  <.card_section>
    <p>Cards can contain multiple action buttons for different operations.</p>
  </.card_section>
</.card>
Cards with different content structures and multiple sections Open in playground
Project Structure

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.

Performance Metrics
Response Time: 245ms
Throughput: 1,250 req/sec
Error Rate: 0.12%
Last updated: 2 minutes ago 
<.card title="Project Structure" style="width: 400px" icon="folders">
  <.card_section>
    <h4>Source Files</h4>
    <p>Contains all the main application source code and modules.</p>
  </.card_section>
  <.card_section>
    <h4>Test Files</h4>
    <p>Unit tests, integration tests, and test utilities.</p>
  </.card_section>
  <.card_section>
    <h4>Documentation</h4>
    <p>API documentation, guides, and project notes.</p>
  </.card_section>
</.card>
<.card title="Performance Metrics" style="width: 450px" icon="chart_donut_4">
  <:actions>
    <.button variant="secondary" label="Export" size="medium" />
  </:actions>
  <.card_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>
  </.card_section>
  <.card_section>
    <em>Last updated: 2 minutes ago</em>
  </.card_section>
</.card>
Cards showcasing different icon types and purposes Open in playground
Database Status

Current database health and connection status information.

User Profile

User account information and profile settings.

Notifications

Recent notifications and system alerts.

<.card title="Database Status" style="width: 320px" icon="database">
  <.card_section>
    <p>Current database health and connection status information.</p>
  </.card_section>
</.card>
<.card title="User Profile" style="width: 320px" icon="user">
  <.card_section>
    <p>User account information and profile settings.</p>
  </.card_section>
</.card>
<.card title="Notifications" style="width: 320px" icon="mail">
  <:actions>
    <.button variant="secondary" label="Mark All Read" size="medium" />
  </:actions>
  <.card_section>
    <p>Recent notifications and system alerts.</p>
  </.card_section>
</.card>