Run the CLI
Use the CLI to add the component to your project.
npx @ngzard/ui@latest add cardCard
Displays a card with header, content, and footer.
Login to your account
Enter your email below to login to your account
import { Component } from '@angular/core';
import { generateId } from '../../../shared/utils/utils';
import { ZardButtonComponent } from '../../button/button.component';
import { ZardCardComponent } from '../card.component';
@Component({
selector: 'z-demo-card-default',
standalone: true,
imports: [ZardCardComponent, ZardButtonComponent],
template: `
<z-card class="w-full max-w-sm" zTitle="Login to your account" zDescription="Enter your email below to login to your account">
<div class="space-y-4">
<div class="space-y-2">
<label [for]="idEmail" class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"> Email </label>
<input
[id]="idEmail"
type="email"
placeholder="m@example.com"
class="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
required
/>
</div>
<div class="space-y-2">
<div class="flex items-center">
<label [for]="idPassword" class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"> Password </label>
<a href="#" class="ml-auto text-sm underline-offset-4 hover:underline"> Forgot your password? </a>
</div>
<input
[id]="idPassword"
type="password"
class="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
required
/>
</div>
<div class="space-y-2">
<z-button zType="default" class="w-full">Login</z-button>
<z-button zType="outline" class="w-full">Login with Google</z-button>
</div>
</div>
</z-card>
`,
})
export class ZardDemoCardDefaultComponent {
protected readonly idEmail = generateId('email');
protected readonly idPassword = generateId('password');
}
Installation
Add the component files
Create the component directory structure and add the following files to your project.
card.component.tsimport type { ClassValue } from 'clsx';
import { ChangeDetectionStrategy, Component, computed, input, type TemplateRef, ViewEncapsulation } from '@angular/core';
import { mergeClasses } from '../../shared/utils/utils';
import { ZardStringTemplateOutletDirective } from '../core/directives/string-template-outlet/string-template-outlet.directive';
import { cardBodyVariants, cardHeaderVariants, cardVariants } from './card.variants';
@Component({
selector: 'z-card',
exportAs: 'zCard',
standalone: true,
imports: [ZardStringTemplateOutletDirective],
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
template: `
@if (zTitle()) {
<div [class]="headerClasses()">
<div class="text-2xl font-semibold leading-none tracking-tight">
<ng-container *zStringTemplateOutlet="zTitle()">{{ zTitle() }}</ng-container>
</div>
@if (zDescription()) {
<div class="text-sm text-muted-foreground">
<ng-container *zStringTemplateOutlet="zDescription()">{{ zDescription() }}</ng-container>
</div>
}
</div>
}
<div [class]="bodyClasses()">
<ng-content></ng-content>
</div>
`,
host: {
'[class]': 'classes()',
},
})
export class ZardCardComponent {
readonly zTitle = input<string | TemplateRef<void>>();
readonly zDescription = input<string | TemplateRef<void>>();
readonly class = input<ClassValue>('');
protected readonly classes = computed(() => mergeClasses(cardVariants(), this.class()));
protected readonly headerClasses = computed(() => mergeClasses(cardHeaderVariants()));
protected readonly bodyClasses = computed(() => mergeClasses(cardBodyVariants()));
}
card.variants.tsimport { cva, type VariantProps } from 'class-variance-authority';
export const cardVariants = cva('block rounded-lg border bg-card text-card-foreground shadow-sm w-full p-6', {
variants: {},
});
export type ZardCardVariants = VariantProps<typeof cardVariants>;
export const cardHeaderVariants = cva('w-full flex flex-col space-y-1.5 pb-0 gap-1.5', {
variants: {},
});
export type ZardCardHeaderVariants = VariantProps<typeof cardHeaderVariants>;
export const cardBodyVariants = cva('w-full block mt-6', {
variants: {},
});
export type ZardCardBodyVariants = VariantProps<typeof cardBodyVariants>;
export * from './card.component';
Examples
default
Login to your account
Enter your email below to login to your account
import { Component } from '@angular/core';
import { generateId } from '../../../shared/utils/utils';
import { ZardButtonComponent } from '../../button/button.component';
import { ZardCardComponent } from '../card.component';
@Component({
selector: 'z-demo-card-default',
standalone: true,
imports: [ZardCardComponent, ZardButtonComponent],
template: `
<z-card class="w-full max-w-sm" zTitle="Login to your account" zDescription="Enter your email below to login to your account">
<div class="space-y-4">
<div class="space-y-2">
<label [for]="idEmail" class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"> Email </label>
<input
[id]="idEmail"
type="email"
placeholder="m@example.com"
class="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
required
/>
</div>
<div class="space-y-2">
<div class="flex items-center">
<label [for]="idPassword" class="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"> Password </label>
<a href="#" class="ml-auto text-sm underline-offset-4 hover:underline"> Forgot your password? </a>
</div>
<input
[id]="idPassword"
type="password"
class="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
required
/>
</div>
<div class="space-y-2">
<z-button zType="default" class="w-full">Login</z-button>
<z-button zType="outline" class="w-full">Login with Google</z-button>
</div>
</div>
</z-card>
`,
})
export class ZardDemoCardDefaultComponent {
protected readonly idEmail = generateId('email');
protected readonly idPassword = generateId('password');
}