nabs-ui-cards

Reusable React card flow control for the Nabs UI library.

Usage

import { Cards } from "@net-advantage/nabs-ui-cards/Cards";
import { Button } from "@net-advantage/nabs-ui-buttons/Button";

export function Example() {
  return (
    <Cards
      layout="N"
      columns={3}
      items={[
        {
          id: "starter",
          header: <strong>Starter</strong>,
          content: <p>Good for smaller teams and simple projects.</p>,
          actions: <Button variant="secondary">Select</Button>,
        },
      ]}
    />
  );
}

Props

• layout controls the card flow. N uses the normal row-major order and Z uses a zig-zag flow.
• columns controls how many cards are shown horizontally.
• Each item supports header, content, and actions slots.

The package exports Cards, CardItem, CardLayout, and CardsProps from the package entry point.