Edit Profile

Dark Mode

Copy config

Copy and paste the following code into your global.css file to apply the styles.

DISCLAIMER: This component is in
Beta
status. That means that it is ready for production, but the API might change.

Card

Displays a card with header, content, and footer.

Installation

Run the following cli command or copy/paste the component code into your project

qwik-ui add card
import { component$, type PropsOf, Slot } from '@builder.io/qwik';
import { cn } from '@qwik-ui/utils';
 
export const Card = component$<PropsOf<'div'>>((props) => {
  return (
    <div
      {...props}
      class={cn(
        'bg-card text-card-foreground rounded-base border shadow-sm',
        props.class,
      )}
    >
      <Slot />
    </div>
  );
});
 
export const CardHeader = component$<PropsOf<'div'>>((props) => {
  return (
    <div {...props} class={cn('flex flex-col space-y-1.5 p-6', props.class)}>
      <Slot />
    </div>
  );
});
 
export const CardTitle = component$<PropsOf<'h3'>>((props) => {
  return (
    <h3 {...props} class={cn('font-semibold leading-none tracking-tight', props.class)}>
      <Slot />
    </h3>
  );
});
 
export const CardDescription = component$<PropsOf<'p'>>((props) => {
  return (
    <p {...props} class={cn('text-muted-foreground text-sm', props.class)}>
      <Slot />
    </p>
  );
});
 
export const CardContent = component$<PropsOf<'div'>>((props) => {
  return (
    <div {...props} class={cn('p-6 pt-0', props.class)}>
      <Slot />
    </div>
  );
});
 
export const CardFooter = component$<PropsOf<'div'>>(({ ...props }) => {
  return (
    <div {...props} class={cn('flex items-center p-6 pt-0', props.class)}>
      <Slot />
    </div>
  );
});

Examples

Color

Notifications

You have 3 unread messages.

Push Notifications

Send notifications to device.

Your call has been confirmed.

1 hour ago

You have a new message!

1 hour ago

Your subscription is expiring soon!

2 hours ago

import { PropsOf, component$ } from '@builder.io/qwik';
import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@qwik-ui/styled';
import { cn } from '@qwik-ui/utils';
import { LuBell, LuCheck } from '@qwikest/icons/lucide';

const notifications = [
  {
    title: 'Your call has been confirmed.',
    description: '1 hour ago',
  },
  {
    title: 'You have a new message!',
    description: '1 hour ago',
  },
  {
    title: 'Your subscription is expiring soon!',
    description: '2 hours ago',
  },
];

type CardProps = PropsOf<typeof Card>;

export default component$<CardProps>(({ ...props }) => {
  return (
    <Card class={cn('w-[380px]', props.class)} {...props}>
      <CardHeader>
        <CardTitle>Notifications</CardTitle>
        <CardDescription>You have 3 unread messages.</CardDescription>
      </CardHeader>
      <CardContent class="grid gap-4">
        <div class=" flex items-center space-x-4 rounded-md border p-4">
          <LuBell />
          <div class="flex-1 space-y-1">
            <p class="text-sm font-medium leading-none">Push Notifications</p>
            <p class="text-sm text-muted-foreground">Send notifications to device.</p>
          </div>
          {/* <Switch /> */}
        </div>
        <div>
          {notifications.map((notification, index) => (
            <div
              key={index}
              class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
            >
              <span class="flex h-2 w-2 translate-y-1 rounded-full bg-primary" />
              <div class="space-y-1">
                <p class="text-sm font-medium leading-none">{notification.title}</p>
                <p class="text-sm text-muted-foreground">{notification.description}</p>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
      <CardFooter>
        <Button class="w-full">
          <LuCheck class="mr-2 h-4 w-4" /> Mark all as read
        </Button>
      </CardFooter>
    </Card>
  );
});