Card

Displays a card with header, content, and footer.

1
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/pxl/card";
2
import { WidgetArea } from "@/components/ui/pxl/widget-area";
3

4
export default function CardPreview() {
5
return (
6
    <WidgetArea size="md">
7
      <Card size="lg" className="size-full">
8
        <CardHeader>
9
          <CardTitle>
10
            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M18 22H6V20H18V22ZM6 20H4V18H6V20ZM20 20H18V18H20V20ZM4 18H2V6H4V18ZM13 18H11V16H13V18ZM22 18H20V6H22V18ZM15 13H13V15H11V11H15V13ZM17 11H15V8H17V11ZM9 10H7V8H9V10ZM15 8H9V6H15V8ZM6 6H4V4H6V6ZM20 6H18V4H20V6ZM18 4H6V2H18V4Z"></path></svg>
11
            Hello World!
12
          </CardTitle>
13
        </CardHeader>
14
        <CardContent>
15
          This is a Card
16
        </CardContent>
17
      </Card>
18
    </WidgetArea>
19
  );
20
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/card

Install the following dependencies:

pnpm add @base-ui/react

Copy and paste the following code into your project.

1
import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
2
import { cva, type VariantProps } from "class-variance-authority";
3

4
import { cn } from "@/lib/utils";
5

6
const cardVariants = cva(
7
  "group/card @container/card flex flex-col text-card-foreground pixel-color-card-foreground pixel-size-(--card-border) bg-card",
8
  {
9
    variants: {
10
      border: {
11
        solid: "pixel-border p-(--card-border)",
12
        rounded: "pixel-rounded",
13
        none: ""
14
      },
15
      size: {
16
        default: "[--card-border:--spacing(1)] [--card-spacing:--spacing(2)]",
17
        sm: "[--card-border:--spacing(0.5)] [--card-spacing:--spacing(1)]",
18
        md: "[--card-border:--spacing(1)] [--card-spacing:--spacing(2)]",
19
        lg: "[--card-border:--spacing(1.5)] [--card-spacing:--spacing(1.5)]",
20
      },
21
      variant: {
22
        default: "",
23
        primary:
24
          "[--card:var(--color-primary)] [--card-foreground:var(--color-primary-foreground)]",
25
        secondary:
26
          "[--card:var(--color-secondary)] [--card-foreground:var(--color-secondary-foreground)]",
27
        muted:
28
          "[--card:var(--color-muted)] [--card-foreground:var(--color-muted-foreground)]",
29
        accent:
30
          "[--card:var(--color-muted)] [--card-foreground:var(--color-accent-foreground)]",
31
        info: "[--card:var(--color-info)] [--card-foreground:var(--color-info-foreground)]",
32
        success:
33
          "[--card:var(--color-success)] [--card-foreground:var(--color-success-foreground)]",
34
        danger:
35
          "[--card:var(--color-danger)] [--card-foreground:var(--color-danger-foreground)]",
36
        warning:
37
          "[--card:var(--color-warning)] [--card-foreground:var(--color-warning-foreground)]",
38
      },
39
    },
40
    defaultVariants: {
41
      border: "solid",
42
      size: "default",
43
      variant: "default",
44
    },
45
  },
46
);
47

48
function Card({
49
  className,
50
  border,
51
  size,
52
  variant,
53
  ...props
54
}: {
55
  asChild?: boolean;
56
} & VariantProps<typeof cardVariants> &
57
  React.ComponentProps<"div">) {
58
  return (
59
    <div
60
      data-slot="card"
61
      className={cardVariants({
62
        border,
63
        size,
64
        variant,
65
        className,
66
      })}
67
      {...props}
68
    ></div>
69
  );
70
}
71

72
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
73
  return (
74
    <div
75
      data-slot="card-header"
76
      className={cn(
77
        "group/card-header pt-(--card-spacing) px-(--card-spacing)",
78
        className,
79
      )}
80
      {...props}
81
    />
82
  );
83
}
84

85
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
86
  return (
87
    <div
88
      data-slot="card-title"
89
      className={cn(
90
        "font-heading italic leading-4! text-base @7xs/card:text-lg @4xs/card:text-xl [&_svg]:fill-current [&_svg]:size-5 *:data-[slot=icon]:mr-1.5 *:data-[slot=icon]:inline-block [&>svg]:inline-block [&>svg]:mr-1.5",
91
        className,
92
      )}
93
      {...props}
94
    />
95
  );
96
}
97

98
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
99
  return (
100
    <div
101
      data-slot="card-description"
102
      className={cn("font-sans leading-4 text-sm", className)}
103
      {...props}
104
    />
105
  );
106
}
107

108
function CardContent({
109
  className,
110
  scrollable,
111
  children,
112
  ...props
113
}: {
114
  scrollable?: boolean;
115
} & React.ComponentProps<"div">) {
116
  if (!scrollable) {
117
    return (
118
      <div
119
        data-slot="card-content"
120
        className={cn("p-(--card-spacing) flex-1 min-h-0", className)}
121
        {...props}
122
      >
123
        {children}
124
      </div>
125
    );
126
  }
127

128
  return (
129
    <ScrollAreaPrimitive.Root
130
      data-slot="card-content"
131
      className={cn(
132
        "p-(--card-spacing) relative flex-1 min-h-0 min-w-0",
133
        className,
134
      )}
135
      {...props}
136
    >
137
      <ScrollAreaPrimitive.Viewport
138
        data-slot="scroll-area-viewport"
139
        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
140
      >
141
        {children}
142
      </ScrollAreaPrimitive.Viewport>
143
      <ScrollAreaPrimitive.Scrollbar
144
        data-slot="scroll-area-scrollbar"
145
        data-orientation={"vertical"}
146
        orientation={"vertical"}
147
        className={cn(
148
          "-right-(--card-spacing)! flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
149
          className,
150
        )}
151
        {...props}
152
      >
153
        <ScrollAreaPrimitive.Thumb
154
          data-slot="scroll-area-thumb"
155
          className="relative flex-1 rounded-none bg-ring ml-[calc(var(--pixel-size)*0.5)]"
156
        />
157
      </ScrollAreaPrimitive.Scrollbar>
158
      <ScrollAreaPrimitive.Corner />
159
    </ScrollAreaPrimitive.Root>
160
  );
161
}
162

163
export {
164
  Card,
165
  CardContent,
166
  CardDescription,
167
  CardHeader,
168
  CardTitle,
169
  cardVariants,
170
};

Update the import paths to match your project setup.

Scrollable

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at urna in sapien eleifend pellentesque. Integer porta molestie mi vitae faucibus. Donec elementum consequat nibh id mollis. Phasellus in sagittis elit, et blandit augue. Aliquam scelerisque, leo vitae cursus porta, libero tortor facilisis arcu, vitae interdum nulla lacus vitae ipsum. Maecenas euismod, nibh sed tincidunt sodales, sem lectus commodo magna, non tristique orci sapien nec elit. Aliquam a faucibus nisl. Proin nunc quam, auctor eget nibh nec, accumsan finibus nisi. Morbi non orci vel turpis venenatis mollis. Nunc sed varius nisi. Ut consequat lacus et velit vehicula, in egestas purus rutrum. In in sodales nisl. Praesent bibendum ante metus. Vestibulum lectus diam, sollicitudin vel quam ac, dapibus commodo sem. Proin et eros vel tellus accumsan efficitur. Aenean a euismod ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus maximus ultrices ultricies. Phasellus nisi turpis, gravida id facilisis a, ornare quis sapien. Phasellus venenatis eu justo non varius. Duis eu lobortis erat. Maecenas maximus mauris odio, in faucibus lectus porttitor in. Aliquam in sapien sed dolor cursus efficitur sed et ex. Fusce odio felis, cursus nec magna eu, finibus ultricies justo. Vestibulum id rhoncus erat, et lacinia ligula. Duis cursus porta neque. Quisque semper libero odio. Sed vel velit aliquet, luctus mi vel, tincidunt nunc. Proin eleifend imperdiet sapien, vitae finibus est egestas vel. Suspendisse a tellus nec tortor dignissim aliquam ultrices at sapien. Proin tempus varius porta. Curabitur sed vulputate lacus. Pellentesque mauris risus, semper sed nulla in, auctor ornare elit. Duis egestas elementum lorem sed tempus. Integer placerat lorem nec augue congue, facilisis fringilla elit vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam semper, ipsum eget fermentum ultrices, purus dui blandit nisi, nec dignissim urna augue non urna. Vestibulum non ultricies sem, ut luctus nisi. Vestibulum vel rhoncus justo. Maecenas accumsan tortor arcu, in interdum justo molestie quis. Nulla ultricies ligula nec tellus dictum, a cursus lorem mattis. Suspendisse tristique lacus quis euismod gravida. Nullam lacinia dui in ex molestie pellentesque. Phasellus varius congue augue ac porta. Donec vitae imperdiet arcu, non cursus nulla. Curabitur commodo, augue et dictum elementum, sapien nisi lacinia ex, in convallis sapien sem eget justo. Vestibulum efficitur porttitor auctor. Duis non tortor a quam rutrum tempor nec et nibh. Vestibulum eu consequat massa, scelerisque feugiat arcu. Nam vehicula justo et libero rhoncus, tristique commodo nisi fringilla. Phasellus placerat pretium enim ac pretium. Etiam vehicula mi metus, at lobortis dui vehicula quis. Donec fringilla dolor sed nisl facilisis ornare. Proin varius libero quam, ut fringilla massa vulputate at. Vestibulum et tellus dapibus turpis vehicula egestas. Sed malesuada luctus sagittis. Integer laoreet ante ac dapibus pellentesque. Sed nibh metus, rhoncus sed sollicitudin eu, viverra sed arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam gravida nisl id sem scelerisque aliquet. Aliquam tempor est a dolor ullamcorper, sit amet sollicitudin lorem malesuada. Maecenas dapibus tempor rhoncus. Fusce pulvinar eros in enim vehicula rutrum. Etiam sed massa a risus viverra pellentesque. Aenean sem enim, viverra id imperdiet a, mattis sed velit. Duis id augue a sapien sodales cursus. Aliquam non volutpat leo. Morbi lobortis tincidunt lacinia. Nulla molestie ex id ex volutpat sagittis. Mauris vehicula gravida malesuada. Nulla elementum velit sed blandit dictum. Ut a erat eget massa bibendum posuere nec sit amet dolor. Aliquam condimentum, nulla vel malesuada auctor, urna enim rutrum ligula, vel venenatis velit purus sagittis leo. Quisque in ultricies dui, ut aliquet lorem. Cras lacus lacus, elementum id gravida nec, pretium non mi. Vestibulum non suscipit dolor. Vivamus sed ante sed tortor dignissim blandit. Mauris ultricies tortor ex, in dignissim nulla molestie vitae. Mauris a metus laoreet neque vehicula hendrerit. Donec venenatis eros rhoncus metus rhoncus, a fringilla eros aliquam. Fusce vitae maximus mi. Vivamus porta convallis rhoncus. Ut volutpat rhoncus sagittis. Donec dignissim sodales turpis ac lobortis. Proin a lobortis leo. Donec metus nisl, faucibus ac tempor ut, dictum ac magna. Proin et libero molestie, finibus nunc eget, aliquam enim. Etiam non pulvinar ex, at condimentum purus. Duis volutpat ac lorem auctor cursus. Maecenas hendrerit velit nibh, vitae consectetur augue molestie sit amet. Nulla mollis elementum lorem, in ullamcorper nisl dapibus sed. Ut venenatis finibus tempor. Sed sodales augue et tellus luctus, ut imperdiet augue rutrum. Donec non ullamcorper elit. Donec faucibus justo in turpis ultrices, vitae commodo turpis pharetra. Donec fermentum mollis est, vel pharetra libero molestie at.

1
import { Card, CardContent } from "@/components/ui/pxl/card";
2
import { WidgetArea } from "@/components/ui/pxl/widget-area";
3

4
export default function CardWithScrollableContent() {
5
  return (
6
    <WidgetArea size="sm">
7
      <Card size="lg" className="size-full">
8
        <CardContent scrollable>
9
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at urna in sapien eleifend pellentesque. Integer porta molestie mi vitae faucibus. Donec elementum consequat nibh id mollis. Phasellus in sagittis elit, et blandit augue. Aliquam scelerisque, leo vitae cursus porta, libero tortor facilisis arcu, vitae interdum nulla lacus vitae ipsum. Maecenas euismod, nibh sed tincidunt sodales, sem lectus commodo magna, non tristique orci sapien nec elit. Aliquam a faucibus nisl. Proin nunc quam, auctor eget nibh nec, accumsan finibus nisi. Morbi non orci vel turpis venenatis mollis.
10

11
Nunc sed varius nisi. Ut consequat lacus et velit vehicula, in egestas purus rutrum. In in sodales nisl. Praesent bibendum ante metus. Vestibulum lectus diam, sollicitudin vel quam ac, dapibus commodo sem. Proin et eros vel tellus accumsan efficitur. Aenean a euismod ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
12

13
Phasellus maximus ultrices ultricies. Phasellus nisi turpis, gravida id facilisis a, ornare quis sapien. Phasellus venenatis eu justo non varius. Duis eu lobortis erat. Maecenas maximus mauris odio, in faucibus lectus porttitor in. Aliquam in sapien sed dolor cursus efficitur sed et ex. Fusce odio felis, cursus nec magna eu, finibus ultricies justo. Vestibulum id rhoncus erat, et lacinia ligula. Duis cursus porta neque. Quisque semper libero odio. Sed vel velit aliquet, luctus mi vel, tincidunt nunc.
14

15
Proin eleifend imperdiet sapien, vitae finibus est egestas vel. Suspendisse a tellus nec tortor dignissim aliquam ultrices at sapien. Proin tempus varius porta. Curabitur sed vulputate lacus. Pellentesque mauris risus, semper sed nulla in, auctor ornare elit. Duis egestas elementum lorem sed tempus. Integer placerat lorem nec augue congue, facilisis fringilla elit vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam semper, ipsum eget fermentum ultrices, purus dui blandit nisi, nec dignissim urna augue non urna.
16

17
Vestibulum non ultricies sem, ut luctus nisi. Vestibulum vel rhoncus justo. Maecenas accumsan tortor arcu, in interdum justo molestie quis. Nulla ultricies ligula nec tellus dictum, a cursus lorem mattis. Suspendisse tristique lacus quis euismod gravida. Nullam lacinia dui in ex molestie pellentesque. Phasellus varius congue augue ac porta. Donec vitae imperdiet arcu, non cursus nulla.
18

19
Curabitur commodo, augue et dictum elementum, sapien nisi lacinia ex, in convallis sapien sem eget justo. Vestibulum efficitur porttitor auctor. Duis non tortor a quam rutrum tempor nec et nibh. Vestibulum eu consequat massa, scelerisque feugiat arcu. Nam vehicula justo et libero rhoncus, tristique commodo nisi fringilla. Phasellus placerat pretium enim ac pretium. Etiam vehicula mi metus, at lobortis dui vehicula quis.
20

21
Donec fringilla dolor sed nisl facilisis ornare. Proin varius libero quam, ut fringilla massa vulputate at. Vestibulum et tellus dapibus turpis vehicula egestas. Sed malesuada luctus sagittis. Integer laoreet ante ac dapibus pellentesque. Sed nibh metus, rhoncus sed sollicitudin eu, viverra sed arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam gravida nisl id sem scelerisque aliquet.
22

23
Aliquam tempor est a dolor ullamcorper, sit amet sollicitudin lorem malesuada. Maecenas dapibus tempor rhoncus. Fusce pulvinar eros in enim vehicula rutrum. Etiam sed massa a risus viverra pellentesque. Aenean sem enim, viverra id imperdiet a, mattis sed velit. Duis id augue a sapien sodales cursus. Aliquam non volutpat leo. Morbi lobortis tincidunt lacinia. Nulla molestie ex id ex volutpat sagittis. Mauris vehicula gravida malesuada. Nulla elementum velit sed blandit dictum. Ut a erat eget massa bibendum posuere nec sit amet dolor. Aliquam condimentum, nulla vel malesuada auctor, urna enim rutrum ligula, vel venenatis velit purus sagittis leo. Quisque in ultricies dui, ut aliquet lorem.
24

25
Cras lacus lacus, elementum id gravida nec, pretium non mi. Vestibulum non suscipit dolor. Vivamus sed ante sed tortor dignissim blandit. Mauris ultricies tortor ex, in dignissim nulla molestie vitae. Mauris a metus laoreet neque vehicula hendrerit. Donec venenatis eros rhoncus metus rhoncus, a fringilla eros aliquam. Fusce vitae maximus mi. Vivamus porta convallis rhoncus. Ut volutpat rhoncus sagittis. Donec dignissim sodales turpis ac lobortis. Proin a lobortis leo. Donec metus nisl, faucibus ac tempor ut, dictum ac magna. Proin et libero molestie, finibus nunc eget, aliquam enim. Etiam non pulvinar ex, at condimentum purus. Duis volutpat ac lorem auctor cursus.
26

27
Maecenas hendrerit velit nibh, vitae consectetur augue molestie sit amet. Nulla mollis elementum lorem, in ullamcorper nisl dapibus sed. Ut venenatis finibus tempor. Sed sodales augue et tellus luctus, ut imperdiet augue rutrum. Donec non ullamcorper elit. Donec faucibus justo in turpis ultrices, vitae commodo turpis pharetra. Donec fermentum mollis est, vel pharetra libero molestie at.
28
        </CardContent>
29
      </Card>
30
    </WidgetArea>
31
  );
32
}

Variants

1
import {
2
  Card,
3
  CardContent,
4
  CardHeader,
5
  CardTitle,
6
} from "@/components/ui/pxl/card";
7
import { WidgetArea } from "@/components/ui/pxl/widget-area";
8

9
export default function CardVariantsExample() {
10
  return (
11
    <div className="w-full flex flex-col gap-2.5 items-center justify-center min-h-92">
12
      <WidgetArea size="md">
13
        <Card size="lg" className="size-full" variant="primary">
14
          <CardHeader>
15
            <CardTitle>
16
              <svg
17
                xmlns="http://www.w3.org/2000/svg"
18
                fill="currentColor"
19
                viewBox="0 0 24 24"
20
              >
21
                <path d="M18 22H6V20H18V22ZM6 20H4V18H6V20ZM20 20H18V18H20V20ZM4 18H2V6H4V18ZM22 18H20V6H22V18ZM13 17H11V11H13V17ZM13 9H11V7H13V9ZM6 6H4V4H6V6ZM20 6H18V4H20V6ZM18 4H6V2H18V4Z"></path>
22
              </svg>
23
              Primary
24
            </CardTitle>
25
          </CardHeader>
26
          <CardContent></CardContent>
27
        </Card>
28
      </WidgetArea>
29
      <WidgetArea size="md">
30
        <Card size="lg" className="size-full" variant="success">
31
          <CardHeader>
32
            <CardTitle>
33
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
34
                <path d="M10 18H8v-2h2zm-2-2H6v-2h2zm4-2v2h-2v-2zm-6 0H4v-2h2zm8 0h-2v-2h2zm2-2h-2v-2h2zm2-2h-2V8h2zm2-2h-2V6h2z"></path>
35
              </svg>
36
              Success
37
            </CardTitle>
38
          </CardHeader>
39
          <CardContent></CardContent>
40
        </Card>
41
      </WidgetArea>
42
      <WidgetArea size="md">
43
        <Card size="lg" className="size-full" variant="danger">
44
          <CardHeader>
45
            <CardTitle>
46
              <svg
47
                xmlns="http://www.w3.org/2000/svg"
48
                fill="currentColor"
49
                viewBox="0 0 24 24"
50
              >
51
                <path d="M4 13h8v6h2v2h-2v2h-2v-8H2v-4h2v2Zm12 6h-2v-2h2v2Zm2-2h-2v-2h2v2Zm2-2h-2v-2h2v2Zm-6-6h8v4h-2v-2h-8V5h-2V3h2V1h2v8Zm-8 2H4V9h2v2Zm2-2H6V7h2v2Zm2-2H8V5h2v2Z"></path>
52
              </svg>
53
              Danger
54
            </CardTitle>
55
          </CardHeader>
56
          <CardContent></CardContent>
57
        </Card>
58
      </WidgetArea>
59
      <WidgetArea size="md">
60
        <Card size="lg" className="size-full" variant="warning">
61
          <CardHeader>
62
            <CardTitle>
63
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
64
                <path d="M14 22h-4v-2h4v2Zm-4-2H8v-2h2v2Zm6 0h-2v-2h2v2Zm-8-2H6v-2h2v2Zm10 0h-2v-2h2v2Zm-5-1h-2v-2h2v2Zm-7-1H4v-2h2v2Zm14 0h-2v-2h2v2ZM4 14H2v-4h2v4Zm18 0h-2v-4h2v4Zm-9-7v6h-2V7h2Zm-7 3H4V8h2v2Zm14 0h-2V8h2v2ZM8 8H6V6h2v2Zm10 0h-2V6h2v2Zm-8-2H8V4h2v2Zm6 0h-2V4h2v2Zm-2-2h-4V2h4v2Z"></path>
65
              </svg>
66
              Warning
67
            </CardTitle>
68
          </CardHeader>
69
          <CardContent></CardContent>
70
        </Card>
71
      </WidgetArea>
72
      <WidgetArea size="md">
73
        <Card size="lg" className="size-full" variant="info">
74
          <CardHeader>
75
            <CardTitle>
76
              <svg
77
                xmlns="http://www.w3.org/2000/svg"
78
                fill="currentColor"
79
                viewBox="0 0 24 24"
80
              >
81
                <path d="M16 22H8v-2h8v2Zm-8-2H6v-2h2v2Zm10 0h-2v-2h2v2ZM6 18H4v-6h2v6Zm14 0h-2v-8h2v8Zm-10-4H8v-2h2v2Zm-2-2H6V8h2v4Zm4-8h2v2h-2v6h-2V2h2v2Zm6 6h-2V8h2v2Zm-2-2h-2V6h2v2Z"></path>
82
              </svg>
83
              Info
84
            </CardTitle>
85
          </CardHeader>
86
          <CardContent></CardContent>
87
        </Card>
88
      </WidgetArea>
89
      <WidgetArea size="md">
90
        <Card size="lg" className="size-full" variant="secondary">
91
          <CardHeader>
92
            <CardTitle>
93
              <svg
94
                xmlns="http://www.w3.org/2000/svg"
95
                fill="currentColor"
96
                viewBox="0 0 24 24"
97
              >
98
                <path d="M18 22H6V20H18V22ZM6 20H4V18H6V20ZM20 20H18V18H20V20ZM4 18H2V6H4V18ZM22 18H20V6H22V18ZM13 17H11V11H13V17ZM13 9H11V7H13V9ZM6 6H4V4H6V6ZM20 6H18V4H20V6ZM18 4H6V2H18V4Z"></path>
99
              </svg>
100
              Secondary
101
            </CardTitle>
102
          </CardHeader>
103
          <CardContent></CardContent>
104
        </Card>
105
      </WidgetArea>
106
      <WidgetArea size="md">
107
        <Card size="lg" className="size-full" variant="muted">
108
          <CardHeader>
109
            <CardTitle>
110
              <svg
111
                xmlns="http://www.w3.org/2000/svg"
112
                fill="currentColor"
113
                viewBox="0 0 24 24"
114
              >
115
                <path d="M18 22H6V20H18V22ZM6 20H4V18H6V20ZM20 20H18V18H20V20ZM4 18H2V6H4V18ZM22 18H20V6H22V18ZM13 17H11V11H13V17ZM13 9H11V7H13V9ZM6 6H4V4H6V6ZM20 6H18V4H20V6ZM18 4H6V2H18V4Z"></path>
116
              </svg>
117
              Muted
118
            </CardTitle>
119
          </CardHeader>
120
          <CardContent></CardContent>
121
        </Card>
122
      </WidgetArea>
123
      <WidgetArea size="md">
124
        <Card size="lg" className="size-full" variant="accent">
125
          <CardHeader>
126
            <CardTitle>
127
              <svg
128
                xmlns="http://www.w3.org/2000/svg"
129
                fill="currentColor"
130
                viewBox="0 0 24 24"
131
              >
132
                <path d="M18 22H6V20H18V22ZM6 20H4V18H6V20ZM20 20H18V18H20V20ZM4 18H2V6H4V18ZM22 18H20V6H22V18ZM13 17H11V11H13V17ZM13 9H11V7H13V9ZM6 6H4V4H6V6ZM20 6H18V4H20V6ZM18 4H6V2H18V4Z"></path>
133
              </svg>
134
              Accent
135
            </CardTitle>
136
          </CardHeader>
137
          <CardContent></CardContent>
138
        </Card>
139
      </WidgetArea>
140
    </div>
141
  );
142
}