Preview

Card program

Manage physical and virtual corporate cards from one interface.

Corporate Card compositions use Card, Switch, Slider, NumberInput, Badge, Select, Button, and Alert for comprehensive card management.

2

card types

5

control options

4

status states

Best for: Corporate card programs, virtual card issuance, and spend control.
Pairs with: Transaction Management, Budget Tracking, Receipt Capture.

Included patterns

• Visual card rendering

• Virtual card creation flow

• Category-level spend controls

• Real-time transaction feed

Variants

Card display

Rendered card visual with masked number, network logo, and status.

Virtual card creation

Form for generating virtual cards with spend limits and expiry.

Card controls

Toggle switches for transaction categories and spending limits.

Transaction feed

Recent transaction list tied to specific card.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { AppBar, Card, DescriptionList, Fieldset, Heading, PageHeader, PageLayout, Sidebar, Stack, Table, Text } from '@dryui/ui';
</script>
<PageLayout.Root fullHeight>
  <PageLayout.Header sticky>
    <AppBar.Root>
      <AppBar.Title>Card program</AppBar.Title>
    </AppBar.Root>
  </PageLayout.Header>
  <PageLayout.Sidebar sticky>
    <Sidebar.Root style="height: 100%;">
      <Sidebar.Content>
        <Sidebar.Group>
          <Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
            <Sidebar.Item active href="#">Cards</Sidebar.Item>
            <Sidebar.Item href="#">Virtual</Sidebar.Item>
            <Sidebar.Item href="#">Controls</Sidebar.Item>
            <Sidebar.Item href="#">Transactions</Sidebar.Item>
            <Sidebar.Item href="#">Settings</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Manage physical and virtual corporate cards from one interface.</PageHeader.Title>
          <PageHeader.Description>Corporate Card compositions use Card, Switch, Slider, NumberInput, Badge, Select, Button, and Alert for comprehensive card management.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>2</Heading>
          <Text as="p">card types</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>5</Heading>
          <Text as="p">control options</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">status states</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Best for</DescriptionList.Term>
        <DescriptionList.Description>Corporate card programs, virtual card issuance, and spend control.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Pairs with</DescriptionList.Term>
        <DescriptionList.Description>Transaction Management, Budget Tracking, Receipt Capture.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Visual card rendering</Text>
        <Text as="p">• Virtual card creation flow</Text>
        <Text as="p">• Category-level spend controls</Text>
        <Text as="p">• Real-time transaction feed</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>

DRYui

Corporate Card Management