Card

<c-card>
  <c-card-header>
    <c-card-title>Account Summary</c-card-title>
    <c-card-description>Overview of your account activity.</c-card-description>
  </c-card-header>
  <c-card-content>
    <div class="grid gap-2">
      <div class="flex items-center justify-between text-sm">
        <span class="text-muted-foreground">Monthly Spend</span>
        <span class="font-medium">$1,240.00</span>
      </div>
      <div class="flex items-center justify-between text-sm">
        <span class="text-muted-foreground">Open Invoices</span>
        <span class="font-medium">3</span>
      </div>
    </div>
  </c-card-content>
  <c-card-footer>
    <c-button size="sm">View Details</c-button>
  </c-card-footer>
</c-card>

<c-card card-classes="w-full max-w-md">
  <c-card-header>
    <c-card-title>Create project</c-card-title>
    <c-card-description
      >Deploy your new project in one-click.</c-card-description
    >
  </c-card-header>
  <c-card-content>
    <div class="grid gap-4">
      <div class="grid gap-2">
        <c-label label-for="project-name">Name</c-label>
        <c-input id="project-name" placeholder="New app"></c-input>
      </div>
      <div class="grid gap-2">
        <c-label label-for="project-repo">Repository</c-label>
        <c-input
          id="project-repo"
          placeholder="https://github.com/acme/app"
        ></c-input>
      </div>
    </div>
  </c-card-content>
  <c-card-footer card-footer-classes="justify-between">
    <c-button variant="outline">Cancel</c-button>
    <c-button>Deploy</c-button>
  </c-card-footer>
</c-card>

<c-card card-classes="w-full max-w-sm">
  <c-card-header>
    <c-card-title>Notifications</c-card-title>
    <c-card-description>You have 3 unread messages.</c-card-description>
  </c-card-header>
  <c-card-content>
    <div class="grid gap-4">
      <div class="flex items-start gap-4">
        <span class="mt-2 inline-flex size-2 rounded-full bg-primary"></span>
        <div class="space-y-1">
          <p class="text-sm font-medium">New order received</p>
          <p class="text-sm text-muted-foreground">2 minutes ago</p>
        </div>
      </div>
      <div class="flex items-start gap-4">
        <span class="mt-2 inline-flex size-2 rounded-full bg-primary"></span>
        <div class="space-y-1">
          <p class="text-sm font-medium">Payment processed</p>
          <p class="text-sm text-muted-foreground">1 hour ago</p>
        </div>
      </div>
      <div class="flex items-start gap-4">
        <span class="mt-2 inline-flex size-2 rounded-full bg-primary"></span>
        <div class="space-y-1">
          <p class="text-sm font-medium">New comment on ticket</p>
          <p class="text-sm text-muted-foreground">Yesterday</p>
        </div>
      </div>
    </div>
  </c-card-content>
  <c-card-footer card-footer-classes="justify-end">
    <c-button size="sm">Mark all as read</c-button>
  </c-card-footer>
</c-card>

<c-card card-classes="w-full max-w-sm">
  <c-card-header>
    <div class="flex items-start justify-between">
      <div class="space-y-1.5">
        <c-card-title>Login to your account</c-card-title>
        <c-card-description
          >Enter your email below to login to your account</c-card-description
        >
      </div>
      <c-button variant="link" size="sm">Sign Up</c-button>
    </div>
  </c-card-header>
  <c-card-content>
    <form>
      <div class="flex flex-col gap-6">
        <div class="grid gap-2">
          <c-label label-for="login-email">Email</c-label>
          <c-input
            id="login-email"
            type="email"
            placeholder="m@example.com"
            required
          ></c-input>
        </div>
        <div class="grid gap-2">
          <div class="flex items-center">
            <c-label label-for="login-password">Password</c-label>
            <a
              href="#"
              class="ms-auto inline-block text-sm underline-offset-4 hover:underline"
            >
              Forgot your password?
            </a>
          </div>
          <c-input id="login-password" type="password" required></c-input>
        </div>
      </div>
    </form>
  </c-card-content>
  <c-card-footer card-footer-classes="flex-col gap-2">
    <c-button type="submit" class="w-full" button-classes="w-full"
      >Login</c-button
    >
    <c-button variant="outline" class="w-full" button-classes="w-full"
      >Login with Google</c-button
    >
  </c-card-footer>
</c-card>