Navigation cards

NavCardGrid draws a grid of navigation cards: an icon well, the title with an arrow that slides in on hover, a description, and optionally the target's live state in mono, a small uppercase tag and mono readout lines. An optional title and description head the grid. Use it for hub pages: a settings overview, a module's landing page.

Preview Code

Connecting to the DMS preview…

static navCardGrid = NavCardGrid({
  title: "Workspace",
  description: "Everything about how your team works together.",
  items: [
    {
      id: "members",
      icon: "i-ph-users",
      title: "Members",
      description: "People with access and pending invitations.",
      to: "/settings/workspace/members",
      state: "8 of 10 seats used",
    },
    {
      id: "billing",
      icon: "i-ph-credit-card",
      title: "Billing",
      description: "Plan, invoices and payment method.",
      to: "/billing",
      state: "Payment failed",
      stateTone: "error",
      tag: "SaaS",
    },
    {
      id: "integrations",
      icon: "i-ph-plugs-connected",
      title: "Integrations",
      description: "Stripe, HubSpot and 2 more connected.",
      to: "/integrations",
      readout: ["4 connected", "Last sync 10:15"],
    },
  ],
});

Usage

import { NavCardGrid } from "@antelopejs/interface-dms/base/nav-card-grid";

static workspace = NavCardGrid({
  title: "$app.settings.workspace",
  fetchUrl: "/api/settings/workspace-cards", // one route computes every card's state
});

Options

A card (NavCardItem) carries title, icon and to, plus optional description, iconTone, state, stateTone, tag and readout. Its texts take a composed text: a live state such as "1,284 files" is sent as raw values.

Recipes

One card per page of a category

In code, pass a category instead of items: the grid holds a card per page of that category the viewer can open, in menu order. Each card carries the badge its navigation entry shows. A viewer who can open none of the pages gets no grid, unless empty says what to show instead.

static modules = NavCardGrid({ category: shopCategory, columns: 3 });

Pitfalls

• The cards are items of one block, not blocks of their own: one list, configured in one place, fed by one route. A single card is a one-item grid.
• A title takes up to two lines before its ellipsis.

Next steps