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.
<.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>
Contains all the main application source code and modules.
Unit tests, integration tests, and test utilities.
API documentation, guides, and project notes.
<.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>
Current database health and connection status information.
User account information and profile settings.
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>