Pattern data-card-grid

Data Card Grid

A dashboard-style grid of compact summary cards with status, ownership, and a follow-up action. aihio-grid drops columns as it narrows, and the cards are a list.

Uses aihio-grid aihio-card aihio-badge aihio-avatar aihio-button aihio-stack aihio-cluster

Intents layout surface status identity secondary-action

Pattern

Live, over the markup an agent gets from the MCP server's get_pattern. Narrow the preview to see the layout answer to its own width rather than the window's.

Data Card Grid

Active projects

Track ownership, launch stage, and the next review for each project.

Customer portal

Next review in 3 days.

Ready

Jane Doe

Open

Billing sync

Audit notes pending from finance.

Needs review

Raine Luntta

Review

Ops migration

Rollout staged for next Tuesday.

Scheduled

Ada King

View plan

Show code · 67 lines

<section>
  <aihio-stack data-aihio-intent="layout" gap="lg">
    <header>
      <h2>Active projects</h2>
      <p>Track ownership, launch stage, and the next review for each project.</p>
    </header>

    <aihio-grid data-aihio-intent="layout" columns="3" role="list">
      <aihio-card data-aihio-intent="surface" role="listitem">
        <aihio-card-header>
          <aihio-card-title>Customer portal</aihio-card-title>
          <aihio-card-description>Next review in 3 days.</aihio-card-description>
        </aihio-card-header>
        <aihio-card-content>
          <aihio-stack data-aihio-intent="layout" gap="sm" align="start">
            <aihio-badge data-aihio-intent="status">Ready</aihio-badge>
            <aihio-cluster data-aihio-intent="layout">
              <aihio-avatar data-aihio-intent="identity" alt="Jane Doe" size="sm"></aihio-avatar>
              <span>Jane Doe</span>
            </aihio-cluster>
          </aihio-stack>
        </aihio-card-content>
        <aihio-card-footer>
          <aihio-button data-aihio-intent="secondary-action" variant="outline">Open</aihio-button>
        </aihio-card-footer>
      </aihio-card>

      <aihio-card data-aihio-intent="surface" role="listitem">
        <aihio-card-header>
          <aihio-card-title>Billing sync</aihio-card-title>
          <aihio-card-description>Audit notes pending from finance.</aihio-card-description>
        </aihio-card-header>
        <aihio-card-content>
          <aihio-stack data-aihio-intent="layout" gap="sm" align="start">
            <aihio-badge data-aihio-intent="status" variant="warning">Needs review</aihio-badge>
            <aihio-cluster data-aihio-intent="layout">
              <aihio-avatar data-aihio-intent="identity" alt="Raine Luntta" size="sm"></aihio-avatar>
              <span>Raine Luntta</span>
            </aihio-cluster>
          </aihio-stack>
        </aihio-card-content>
        <aihio-card-footer>
          <aihio-button data-aihio-intent="secondary-action" variant="outline">Review</aihio-button>
        </aihio-card-footer>
      </aihio-card>

      <aihio-card data-aihio-intent="surface" role="listitem">
        <aihio-card-header>
          <aihio-card-title>Ops migration</aihio-card-title>
          <aihio-card-description>Rollout staged for next Tuesday.</aihio-card-description>
        </aihio-card-header>
        <aihio-card-content>
          <aihio-stack data-aihio-intent="layout" gap="sm" align="start">
            <aihio-badge data-aihio-intent="status" variant="secondary">Scheduled</aihio-badge>
            <aihio-cluster data-aihio-intent="layout">
              <aihio-avatar data-aihio-intent="identity" alt="Ada King" size="sm"></aihio-avatar>
              <span>Ada King</span>
            </aihio-cluster>
          </aihio-stack>
        </aihio-card-content>
        <aihio-card-footer>
          <aihio-button data-aihio-intent="secondary-action" variant="outline">View plan</aihio-button>
        </aihio-card-footer>
      </aihio-card>
    </aihio-grid>
  </aihio-stack>
</section>