Card list

A CardList stacks cards into one list, with a divider between rows. Use it for lists of entities, settings or results.

Usage#

import { Card, CardList } from "@clawscale/react";

<CardList>
  <Card>orders_daily</Card>
  <Card>customers</Card>
</CardList>

Examples#

Basic#

Each Card inside a CardList becomes a row. Rows are flex containers, so you can align content inside them.

orders_daily

customers

ledger_entries

web_sessions

core/card-list/basic.tsx

import { Card, CardList, Icon } from "@clawscale/react";

const DATASETS = ["orders_daily", "customers", "ledger_entries", "web_sessions"];

export default function CardListBasic() {
  return (
    <CardList style={{ maxWidth: 400 }}>
      {DATASETS.map((name) => (
        <Card role="listitem" key={name} interactive style={{ justifyContent: "space-between" }}>
          {name}
          <Icon icon="chevron-right" />
        </Card>
      ))}
    </CardList>
  );
}

Bordered#

bordered={false} removes the outer border and radius, so the list can sit flush inside another container.

us-east-124 nodes

eu-west-116 nodes

ap-southeast-28 nodes

core/card-list/bordered.tsx

import { Card, CardList } from "@clawscale/react";

const REGIONS = [
  { name: "us-east-1", nodes: 24 },
  { name: "eu-west-1", nodes: 16 },
  { name: "ap-southeast-2", nodes: 8 },
];

export default function CardListBordered() {
  return (
    <CardList bordered={false} style={{ maxWidth: 400 }}>
      {REGIONS.map((region) => (
        <Card role="listitem" key={region.name} style={{ justifyContent: "space-between" }}>
          {region.name}
          <span className="cs-numeric">{region.nodes} nodes</span>
        </Card>
      ))}
    </CardList>
  );
}

Compact#

compact reduces the padding of every card in the list. You do not need to set it on each card.

ingest-ordersHourly

enrich-customersDaily

export-ledgerDaily

train-forecastWeekly

core/card-list/compact.tsx

import { Card, CardList, Tag } from "@clawscale/react";

const PIPELINES = [
  { name: "ingest-orders", schedule: "Hourly" },
  { name: "enrich-customers", schedule: "Daily" },
  { name: "export-ledger", schedule: "Daily" },
  { name: "train-forecast", schedule: "Weekly" },
];

export default function CardListCompact() {
  return (
    <CardList compact style={{ maxWidth: 400 }}>
      {PIPELINES.map((pipeline) => (
        <Card role="listitem" key={pipeline.name} style={{ justifyContent: "space-between" }}>
          {pipeline.name}
          <Tag minimal>{pipeline.schedule}</Tag>
        </Card>
      ))}
    </CardList>
  );
}

Inside a section#

Put the list in a Section to give it a title. Set padded={false} on the SectionCard and bordered={false} on the list so the rows meet the section edges.

Regions

3 regions, 1 degraded

us-east-1Healthy

eu-west-1Degraded

ap-southeast-2Healthy

core/card-list/section.tsx

import { Card, CardList, Section, SectionCard, Tag } from "@clawscale/react";

const REGIONS = [
  { name: "us-east-1", status: "Healthy", intent: "success" },
  { name: "eu-west-1", status: "Degraded", intent: "warning" },
  { name: "ap-southeast-2", status: "Healthy", intent: "success" },
] as const;

export default function CardListSection() {
  return (
    <Section title="Regions" subtitle="3 regions, 1 degraded" style={{ width: "100%", maxWidth: 400 }}>
      <SectionCard padded={false}>
        <CardList bordered={false}>
          {REGIONS.map((region) => (
            <Card role="listitem" key={region.name} style={{ justifyContent: "space-between" }}>
              {region.name}
              <Tag minimal intent={region.intent}>
                {region.status}
              </Tag>
            </Card>
          ))}
        </CardList>
      </SectionCard>
    </Section>
  );
}

Props interface#

CardList also accepts the HTML attributes of a div.

interface CardListProps extends Props, HTMLDivProps, React.RefAttributes<HTMLDivElement>@clawscale/react

Props	Description
`bordered`	`boolean` = `true` Whether this container element should have a visual border.
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`compact`	`boolean` = `false` Whether this component should use compact styles with reduced visual padding.