Card

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 { provideIcons } from '@ng-icons/core';
import { lucideCheck, lucideChevronDown } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmCardImports } from '@spartan-ng/helm/card';
import { HlmInputImports } from '@spartan-ng/helm/input';
import { HlmLabelImports } from '@spartan-ng/helm/label';

@Component({
	selector: 'spartan-card-preview',
	imports: [HlmCardImports, HlmLabelImports, HlmInputImports, HlmButtonImports],
	providers: [provideIcons({ lucideCheck, lucideChevronDown })],
	host: {
		class: 'contents',
	},
	template: `
		<section class="w-full max-w-sm" hlmCard>
			<div hlmCardHeader>
				<h3 hlmCardTitle>Login to your account</h3>
				<p hlmCardDescription>Enter your email below to login to your account</p>

				<div hlmCardAction>
					<button hlmBtn variant="link">Sign Up</button>
				</div>
			</div>

			<div hlmCardContent>
				<form>
					<div class="flex flex-col gap-6">
						<div class="grid gap-2">
							<label hlmLabel for="email">Email</label>
							<input type="email" id="email" placeholder="m@example.com" required hlmInput />
						</div>

						<div class="grid gap-2">
							<div class="flex items-center">
								<label hlmLabel for="password">Password</label>
								<a href="#" class="ml-auto inline-block text-sm underline-offset-4 hover:underline">
									Forgot your password?
								</a>
							</div>
							<input type="password" id="password" hlmInput />
						</div>
					</div>
				</form>
			</div>

			<div hlmCardFooter class="flex-col gap-2">
				<button hlmBtn type="submit" class="w-full">Login</button>
				<button hlmBtn variant="outline" class="w-full">Login with Google</button>
			</div>
		</section>
	`,
})
export class CardPreview {}

Installation

ng g @spartan-ng/cli:ui card

nx g @spartan-ng/cli:ui card

import { DestroyRef, ElementRef, HostAttributeToken, Injector, PLATFORM_ID, effect, inject, runInInjectionContext } from '@angular/core';
import { clsx, type ClassValue } from 'clsx';
import { isPlatformBrowser } from '@angular/common';
import { twMerge } from 'tailwind-merge';

export function hlm(...inputs: ClassValue[]) {
	return twMerge(clsx(inputs));
}

// Global map to track class managers per element
const elementClassManagers = new WeakMap<HTMLElement, ElementClassManager>();
// Global mutation observer for all elements
let globalObserver: MutationObserver | null = null;
const observedElements = new Set<HTMLElement>();

interface ElementClassManager {
	element: HTMLElement;
	sources: Map<number, { classes: Set<string>; order: number }>;
	baseClasses: Set<string>;
	isUpdating: boolean;
	nextOrder: number;
	hasInitialized: boolean;
	restoreRafId: number | null;
	/** Transitions are suppressed until the first effect writes correct classes */
	transitionsSuppressed: boolean;
	/** Original inline transition value to restore after suppression (empty string = none was set) */
	previousTransition: string;
	/** Original inline transition priority to preserve !important when restoring */
	previousTransitionPriority: string;
}

let sourceCounter = 0;

/**
 * This function dynamically adds and removes classes for a given element without requiring
 * the a class binding (e.g. `[class]="..."`) which may interfere with other class bindings.
 *
 * 1. This will merge the existing classes on the element with the new classes.
 * 2. It will also remove any classes that were previously added by this function but are no longer present in the new classes.
 * 3. Multiple calls to this function on the same element will be merged efficiently.
 */
export function classes(computed: () => ClassValue[] | string, options: ClassesOptions = {}) {
	runInInjectionContext(options.injector ?? inject(Injector), () => {
		const elementRef = options.elementRef ?? inject(ElementRef);
		const platformId = inject(PLATFORM_ID);
		const destroyRef = inject(DestroyRef);
		const baseClasses = inject(new HostAttributeToken('class'), { optional: true });

		const element = elementRef.nativeElement;

		// Create unique identifier for this source
		const sourceId = sourceCounter++;

		// Get or create the class manager for this element
		let manager = elementClassManagers.get(element);

		if (!manager) {
			// Initialize base classes from variation (host attribute 'class')
			const initialBaseClasses = new Set<string>();

			if (baseClasses) {
				toClassList(baseClasses).forEach((cls) => initialBaseClasses.add(cls));
			}

			manager = {
				element,
				sources: new Map(),
				baseClasses: initialBaseClasses,
				isUpdating: false,
				nextOrder: 0,
				hasInitialized: false,
				restoreRafId: null,
				transitionsSuppressed: false,
				previousTransition: '',
				previousTransitionPriority: '',
			};
			elementClassManagers.set(element, manager);

			// Setup global observer if needed and register this element
			setupGlobalObserver(platformId);
			observedElements.add(element);

			// Suppress transitions until the first effect writes correct classes and
			// the browser has painted them. This prevents CSS transition animations
			// during hydration when classes change from SSR state to client state.
			if (isPlatformBrowser(platformId)) {
				manager.previousTransition = element.style.getPropertyValue('transition');
				manager.previousTransitionPriority = element.style.getPropertyPriority('transition');
				element.style.setProperty('transition', 'none', 'important');
				manager.transitionsSuppressed = true;
			}
		}

		// Assign order once at registration time
		const sourceOrder = manager.nextOrder++;

		function updateClasses(): void {
			// Get the new classes from the computed function
			const newClasses = toClassList(computed());

			// Update this source's classes, keeping the original order
			manager!.sources.set(sourceId, {
				classes: new Set(newClasses),
				order: sourceOrder,
			});

			// Update the element
			updateElement(manager!);

			// Re-enable transitions after the first effect writes correct classes.
			// Deferred to next animation frame so the browser paints the class change
			// with transitions disabled first, then re-enables them.
			if (manager!.transitionsSuppressed) {
				manager!.transitionsSuppressed = false;
				manager!.restoreRafId = requestAnimationFrame(() => {
					manager!.restoreRafId = null;
					restoreTransitionSuppression(manager!);
				});
			}
		}

		// Register cleanup with DestroyRef
		destroyRef.onDestroy(() => {
			if (manager!.restoreRafId !== null) {
				cancelAnimationFrame(manager!.restoreRafId);
				manager!.restoreRafId = null;
			}

			if (manager!.transitionsSuppressed) {
				manager!.transitionsSuppressed = false;
				restoreTransitionSuppression(manager!);
			}

			// Remove this source from the manager
			manager!.sources.delete(sourceId);

			// If no more sources, clean up the manager
			if (manager!.sources.size === 0) {
				cleanupManager(element);
			} else {
				// Update element without this source's classes
				updateElement(manager!);
			}
		});

		/**
		 * We need this effect to track changes to the computed classes. Ideally, we would use
		 * afterRenderEffect here, but that doesn't run in SSR contexts, so we use a standard
		 * effect which works in both browser and SSR.
		 */
		effect(updateClasses);
	});
}

function restoreTransitionSuppression(manager: ElementClassManager): void {
	const prev = manager.previousTransition;
	if (prev) {
		manager.element.style.setProperty('transition', prev, manager.previousTransitionPriority || undefined);
	} else {
		manager.element.style.removeProperty('transition');
	}
}

// eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
function setupGlobalObserver(platformId: Object): void {
	if (isPlatformBrowser(platformId) && !globalObserver) {
		// Create single global observer that watches the entire document
		globalObserver = new MutationObserver((mutations) => {
			for (const mutation of mutations) {
				if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
					const element = mutation.target as HTMLElement;
					const manager = elementClassManagers.get(element);

					// Only process elements we're managing
					if (manager && observedElements.has(element)) {
						if (manager.isUpdating) continue; // Ignore changes we're making

						// Update base classes to include any externally added classes
						const currentClasses = toClassList(element.className);
						const allSourceClasses = new Set<string>();

						// Collect all classes from all sources
						for (const source of manager.sources.values()) {
							for (const className of source.classes) {
								allSourceClasses.add(className);
							}
						}

						// Any classes not from sources become new base classes
						manager.baseClasses.clear();

						for (const className of currentClasses) {
							if (!allSourceClasses.has(className)) {
								manager.baseClasses.add(className);
							}
						}

						updateElement(manager);
					}
				}
			}
		});

		// Start observing the entire document for class attribute changes
		globalObserver.observe(document, {
			attributes: true,
			attributeFilter: ['class'],
			subtree: true, // Watch all descendants
		});
	}
}

function updateElement(manager: ElementClassManager): void {
	if (manager.isUpdating) return; // Prevent recursive updates

	manager.isUpdating = true;

	// Handle initialization: capture base classes after first source registration
	if (!manager.hasInitialized && manager.sources.size > 0) {
		// Get current classes on element (may include SSR classes)
		const currentClasses = toClassList(manager.element.className);

		// Get all classes that will be applied by sources
		const allSourceClasses = new Set<string>();
		for (const source of manager.sources.values()) {
			source.classes.forEach((className) => allSourceClasses.add(className));
		}

		// Only consider classes as "base" if they're not produced by any source
		// This prevents SSR-rendered classes from being preserved as base classes
		currentClasses.forEach((className) => {
			if (!allSourceClasses.has(className)) {
				manager.baseClasses.add(className);
			}
		});

		manager.hasInitialized = true;
	}

	// Get classes from all sources, sorted by registration order (later takes precedence)
	const sortedSources = Array.from(manager.sources.entries()).sort(([, a], [, b]) => a.order - b.order);

	const allSourceClasses: string[] = [];
	for (const [, source] of sortedSources) {
		allSourceClasses.push(...source.classes);
	}

	// Combine base classes with all source classes, ensuring base classes take precedence
	const classesToApply =
		allSourceClasses.length > 0 || manager.baseClasses.size > 0
			? hlm([...allSourceClasses, ...manager.baseClasses])
			: '';

	// Apply the classes to the element
	if (manager.element.className !== classesToApply) {
		manager.element.className = classesToApply;
	}

	manager.isUpdating = false;
}

function cleanupManager(element: HTMLElement): void {
	// Remove from global tracking
	observedElements.delete(element);
	elementClassManagers.delete(element);

	// If no more elements being tracked, cleanup global observer
	if (observedElements.size === 0 && globalObserver) {
		globalObserver.disconnect();
		globalObserver = null;
	}
}

interface ClassesOptions {
	elementRef?: ElementRef<HTMLElement>;
	injector?: Injector;
}

// Cache for parsed class lists to avoid repeated string operations
const classListCache = new Map<string, string[]>();

function toClassList(className: string | ClassValue[]): string[] {
	// For simple string inputs, use cache to avoid repeated parsing
	if (typeof className === 'string' && classListCache.has(className)) {
		return classListCache.get(className)!;
	}

	const result = clsx(className)
		.split(' ')
		.filter((c) => c.length > 0);

	// Cache string results, but limit cache size to prevent memory growth
	if (typeof className === 'string' && classListCache.size < 1000) {
		classListCache.set(className, result);
	}

	return result;
}

import { Directive, input } from '@angular/core';
import { classes } from '@spartan-ng/helm/utils';

@Directive({
	selector: '[hlmCardAction]',
	host: {
		'data-slot': 'card-action',
	},
})
export class HlmCardAction {
	constructor() {
		classes(() => 'col-start-2 row-span-2 row-start-1 self-start justify-self-end');
	}
}

@Directive({
	selector: '[hlmCardContent]',
	host: {
		'data-slot': 'card-content',
	},
})
export class HlmCardContent {
	constructor() {
		classes(() => 'px-6 group-data-[size=sm]/card:px-4');
	}
}

@Directive({
	selector: '[hlmCardDescription]',
	host: {
		'data-slot': 'card-description',
	},
})
export class HlmCardDescription {
	constructor() {
		classes(() => 'text-muted-foreground text-sm');
	}
}

@Directive({
	selector: '[hlmCardFooter],hlm-card-footer',
	host: {
		'data-slot': 'card-footer',
	},
})
export class HlmCardFooter {
	constructor() {
		classes(() => 'rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4 flex items-center');
	}
}

@Directive({
	selector: '[hlmCardHeader],hlm-card-header',
	host: {
		'data-slot': 'card-header',
	},
})
export class HlmCardHeader {
	constructor() {
		classes(
			() =>
				`gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]`,
		);
	}
}

@Directive({
	selector: '[hlmCardTitle]',
	host: {
		'data-slot': 'card-title',
	},
})
export class HlmCardTitle {
	constructor() {
		classes(() => 'text-base leading-normal font-medium group-data-[size=sm]/card:text-sm');
	}
}

@Directive({
	selector: '[hlmCard],hlm-card',
	host: {
		'data-slot': 'card',
		'[attr.data-size]': 'size()',
	},
})
export class HlmCard {
	public readonly size = input<'sm' | 'default'>('default');

	constructor() {
		classes(() => 'ring-foreground/10 bg-card text-card-foreground gap-6 overflow-hidden rounded-xl py-6 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col');
	}
}

export const HlmCardImports = [
	HlmCard,
	HlmCardAction,
	HlmCardContent,
	HlmCardDescription,
	HlmCardFooter,
	HlmCardHeader,
	HlmCardTitle,
] as const;

import { Directive, input } from '@angular/core';
import { classes } from '@spartan-ng/helm/utils';

@Directive({
	selector: '[hlmCardAction]',
	host: {
		'data-slot': 'card-action',
	},
})
export class HlmCardAction {
	constructor() {
		classes(() => 'col-start-2 row-span-2 row-start-1 self-start justify-self-end');
	}
}

@Directive({
	selector: '[hlmCardContent]',
	host: {
		'data-slot': 'card-content',
	},
})
export class HlmCardContent {
	constructor() {
		classes(() => 'px-4 group-data-[size=sm]/card:px-3');
	}
}

@Directive({
	selector: '[hlmCardDescription]',
	host: {
		'data-slot': 'card-description',
	},
})
export class HlmCardDescription {
	constructor() {
		classes(() => 'text-muted-foreground text-xs/relaxed');
	}
}

@Directive({
	selector: '[hlmCardFooter],hlm-card-footer',
	host: {
		'data-slot': 'card-footer',
	},
})
export class HlmCardFooter {
	constructor() {
		classes(() => 'rounded-none border-t p-4 group-data-[size=sm]/card:p-3 flex items-center');
	}
}

@Directive({
	selector: '[hlmCardHeader],hlm-card-header',
	host: {
		'data-slot': 'card-header',
	},
})
export class HlmCardHeader {
	constructor() {
		classes(
			() =>
				`gap-1 rounded-none px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]`,
		);
	}
}

@Directive({
	selector: '[hlmCardTitle]',
	host: {
		'data-slot': 'card-title',
	},
})
export class HlmCardTitle {
	constructor() {
		classes(() => 'text-sm font-medium group-data-[size=sm]/card:text-sm');
	}
}

@Directive({
	selector: '[hlmCard],hlm-card',
	host: {
		'data-slot': 'card',
		'[attr.data-size]': 'size()',
	},
})
export class HlmCard {
	public readonly size = input<'sm' | 'default'>('default');

	constructor() {
		classes(() => 'ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-none py-4 text-xs/relaxed ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none group/card flex flex-col');
	}
}

export const HlmCardImports = [
	HlmCard,
	HlmCardAction,
	HlmCardContent,
	HlmCardDescription,
	HlmCardFooter,
	HlmCardHeader,
	HlmCardTitle,
] as const;

import { Directive, input } from '@angular/core';
import { classes } from '@spartan-ng/helm/utils';

@Directive({
	selector: '[hlmCardAction]',
	host: {
		'data-slot': 'card-action',
	},
})
export class HlmCardAction {
	constructor() {
		classes(() => 'col-start-2 row-span-2 row-start-1 self-start justify-self-end');
	}
}

@Directive({
	selector: '[hlmCardContent]',
	host: {
		'data-slot': 'card-content',
	},
})
export class HlmCardContent {
	constructor() {
		classes(() => 'px-6 group-data-[size=sm]/card:px-4');
	}
}

@Directive({
	selector: '[hlmCardDescription]',
	host: {
		'data-slot': 'card-description',
	},
})
export class HlmCardDescription {
	constructor() {
		classes(() => 'text-muted-foreground text-sm');
	}
}

@Directive({
	selector: '[hlmCardFooter],hlm-card-footer',
	host: {
		'data-slot': 'card-footer',
	},
})
export class HlmCardFooter {
	constructor() {
		classes(() => 'rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4 flex items-center');
	}
}

@Directive({
	selector: '[hlmCardHeader],hlm-card-header',
	host: {
		'data-slot': 'card-header',
	},
})
export class HlmCardHeader {
	constructor() {
		classes(
			() =>
				`gap-2 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]`,
		);
	}
}

@Directive({
	selector: '[hlmCardTitle]',
	host: {
		'data-slot': 'card-title',
	},
})
export class HlmCardTitle {
	constructor() {
		classes(() => 'text-base font-medium');
	}
}

@Directive({
	selector: '[hlmCard],hlm-card',
	host: {
		'data-slot': 'card',
		'[attr.data-size]': 'size()',
	},
})
export class HlmCard {
	public readonly size = input<'sm' | 'default'>('default');

	constructor() {
		classes(() => 'ring-foreground/10 bg-card text-card-foreground gap-6 overflow-hidden rounded-2xl py-6 text-sm ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col');
	}
}

export const HlmCardImports = [
	HlmCard,
	HlmCardAction,
	HlmCardContent,
	HlmCardDescription,
	HlmCardFooter,
	HlmCardHeader,
	HlmCardTitle,
] as const;

import { Directive, input } from '@angular/core';
import { classes } from '@spartan-ng/helm/utils';

@Directive({
	selector: '[hlmCardAction]',
	host: {
		'data-slot': 'card-action',
	},
})
export class HlmCardAction {
	constructor() {
		classes(() => 'col-start-2 row-span-2 row-start-1 self-start justify-self-end');
	}
}

@Directive({
	selector: '[hlmCardContent]',
	host: {
		'data-slot': 'card-content',
	},
})
export class HlmCardContent {
	constructor() {
		classes(() => 'px-4 group-data-[size=sm]/card:px-3');
	}
}

@Directive({
	selector: '[hlmCardDescription]',
	host: {
		'data-slot': 'card-description',
	},
})
export class HlmCardDescription {
	constructor() {
		classes(() => 'text-muted-foreground text-xs/relaxed');
	}
}

@Directive({
	selector: '[hlmCardFooter],hlm-card-footer',
	host: {
		'data-slot': 'card-footer',
	},
})
export class HlmCardFooter {
	constructor() {
		classes(() => 'rounded-b-lg px-4 group-data-[size=sm]/card:px-3 [.border-t]:pt-4 group-data-[size=sm]/card:[.border-t]:pt-3 flex items-center');
	}
}

@Directive({
	selector: '[hlmCardHeader],hlm-card-header',
	host: {
		'data-slot': 'card-header',
	},
})
export class HlmCardHeader {
	constructor() {
		classes(
			() =>
				`gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]`,
		);
	}
}

@Directive({
	selector: '[hlmCardTitle]',
	host: {
		'data-slot': 'card-title',
	},
})
export class HlmCardTitle {
	constructor() {
		classes(() => 'text-sm font-medium');
	}
}

@Directive({
	selector: '[hlmCard],hlm-card',
	host: {
		'data-slot': 'card',
		'[attr.data-size]': 'size()',
	},
})
export class HlmCard {
	public readonly size = input<'sm' | 'default'>('default');

	constructor() {
		classes(() => 'ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-lg py-4 text-xs/relaxed ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg group/card flex flex-col');
	}
}

export const HlmCardImports = [
	HlmCard,
	HlmCardAction,
	HlmCardContent,
	HlmCardDescription,
	HlmCardFooter,
	HlmCardHeader,
	HlmCardTitle,
] as const;

import { Directive, input } from '@angular/core';
import { classes } from '@spartan-ng/helm/utils';

@Directive({
	selector: '[hlmCardAction]',
	host: {
		'data-slot': 'card-action',
	},
})
export class HlmCardAction {
	constructor() {
		classes(() => 'col-start-2 row-span-2 row-start-1 self-start justify-self-end');
	}
}

@Directive({
	selector: '[hlmCardContent]',
	host: {
		'data-slot': 'card-content',
	},
})
export class HlmCardContent {
	constructor() {
		classes(() => 'px-4 group-data-[size=sm]/card:px-3');
	}
}

@Directive({
	selector: '[hlmCardDescription]',
	host: {
		'data-slot': 'card-description',
	},
})
export class HlmCardDescription {
	constructor() {
		classes(() => 'text-muted-foreground text-sm');
	}
}

@Directive({
	selector: '[hlmCardFooter],hlm-card-footer',
	host: {
		'data-slot': 'card-footer',
	},
})
export class HlmCardFooter {
	constructor() {
		classes(() => 'bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center');
	}
}

@Directive({
	selector: '[hlmCardHeader],hlm-card-header',
	host: {
		'data-slot': 'card-header',
	},
})
export class HlmCardHeader {
	constructor() {
		classes(
			() =>
				`gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]`,
		);
	}
}

@Directive({
	selector: '[hlmCardTitle]',
	host: {
		'data-slot': 'card-title',
	},
})
export class HlmCardTitle {
	constructor() {
		classes(() => 'text-base leading-snug font-medium group-data-[size=sm]/card:text-sm');
	}
}

@Directive({
	selector: '[hlmCard],hlm-card',
	host: {
		'data-slot': 'card',
		'[attr.data-size]': 'size()',
	},
})
export class HlmCard {
	public readonly size = input<'sm' | 'default'>('default');

	constructor() {
		classes(() => 'ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col');
	}
}

export const HlmCardImports = [
	HlmCard,
	HlmCardAction,
	HlmCardContent,
	HlmCardDescription,
	HlmCardFooter,
	HlmCardHeader,
	HlmCardTitle,
] as const;

import { Directive, input } from '@angular/core';
import { classes } from '@spartan-ng/helm/utils';

@Directive({
	selector: '[hlmCardAction]',
	host: {
		'data-slot': 'card-action',
	},
})
export class HlmCardAction {
	constructor() {
		classes(() => 'col-start-2 row-span-2 row-start-1 self-start justify-self-end');
	}
}

@Directive({
	selector: '[hlmCardContent]',
	host: {
		'data-slot': 'card-content',
	},
})
export class HlmCardContent {
	constructor() {
		classes(() => 'px-6 group-data-[size=sm]/card:px-4');
	}
}

@Directive({
	selector: '[hlmCardDescription]',
	host: {
		'data-slot': 'card-description',
	},
})
export class HlmCardDescription {
	constructor() {
		classes(() => 'text-muted-foreground text-sm');
	}
}

@Directive({
	selector: '[hlmCardFooter],hlm-card-footer',
	host: {
		'data-slot': 'card-footer',
	},
})
export class HlmCardFooter {
	constructor() {
		classes(() => 'rounded-b-4xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4 flex items-center');
	}
}

@Directive({
	selector: '[hlmCardHeader],hlm-card-header',
	host: {
		'data-slot': 'card-header',
	},
})
export class HlmCardHeader {
	constructor() {
		classes(
			() =>
				`gap-1.5 rounded-t-4xl px-6 group-data-[size=sm]/card:px-4 [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]`,
		);
	}
}

@Directive({
	selector: '[hlmCardTitle]',
	host: {
		'data-slot': 'card-title',
	},
})
export class HlmCardTitle {
	constructor() {
		classes(() => 'text-base font-medium');
	}
}

@Directive({
	selector: '[hlmCard],hlm-card',
	host: {
		'data-slot': 'card',
		'[attr.data-size]': 'size()',
	},
})
export class HlmCard {
	public readonly size = input<'sm' | 'default'>('default');

	constructor() {
		classes(() => 'bg-card text-card-foreground ring-foreground/5 dark:ring-foreground/10 gap-6 overflow-hidden rounded-4xl py-6 text-sm shadow-md ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-4xl *:[img:last-child]:rounded-b-4xl group/card flex flex-col');
	}
}

export const HlmCardImports = [
	HlmCard,
	HlmCardAction,
	HlmCardContent,
	HlmCardDescription,
	HlmCardFooter,
	HlmCardHeader,
	HlmCardTitle,
] as const;

Usage

import { HlmCardImports } from '@spartan-ng/helm/card';

<section hlmCard>
  <div hlmCardHeader>
    <h3 hlmCardTitle>Card Title</h3>
    <p hlmCardDescription>Card Description</p>
		<div hlmCardAction></div>
  </div>
  <p hlmCardContent>Card Content</p>
  <p hlmCardFooter>Card Footer</p>
</section>

Examples

Size

Small Card

This card uses the small size variant.

The card component supports a size prop that can be set to "sm" for a more compact appearance.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmCardImports } from '@spartan-ng/helm/card';

@Component({
	selector: 'spartan-card-size-preview',
	imports: [HlmCardImports, HlmButtonImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-card size="sm" class="mx-auto w-full max-w-sm">
			<hlm-card-header>
				<h3 hlmCardTitle>Small Card</h3>
				<p hlmCardDescription>This card uses the small size variant.</p>
			</hlm-card-header>
			<div hlmCardContent>
				<p>The card component supports a size prop that can be set to "sm" for a more compact appearance.</p>
			</div>
			<hlm-card-footer>
				<button hlmBtn variant="outline" size="sm" class="w-full">Action</button>
			</hlm-card-footer>
		</hlm-card>
	`,
})
export class CardSizePreview {}

Image

Featured

Design systems meetup

A practical talk on component APIs, accessibility, and shipping faster.

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmBadgeImports } from '@spartan-ng/helm/badge';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmCardImports } from '@spartan-ng/helm/card';

@Component({
	selector: 'spartan-card-image-preview',
	imports: [HlmCardImports, HlmButtonImports, HlmBadgeImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-card class="relative mx-auto w-full max-w-sm pt-0">
			<div class="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color"></div>
			<img
				src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
				alt="Event cover"
				class="relative z-20 aspect-video w-full object-cover brightness-60 grayscale dark:brightness-40"
			/>
			<hlm-card-header>
				<div hlmCardAction>
					<span hlmBadge variant="secondary">Featured</span>
				</div>
				<h3 hlmCardTitle>Design systems meetup</h3>
				<p hlmCardDescription>A practical talk on component APIs, accessibility, and shipping faster.</p>
			</hlm-card-header>
			<hlm-card-footer>
				<button hlmBtn class="w-full">View Event</button>
			</hlm-card-footer>
		</hlm-card>
	`,
})
export class CardImagePreview {}

Helm API

HlmCardAction

Selector: [hlmCardAction]

HlmCardContent

Selector: [hlmCardContent]

HlmCardDescription

Selector: [hlmCardDescription]

HlmCardFooter

Selector: [hlmCardFooter],hlm-card-footer

HlmCardHeader

Selector: [hlmCardHeader],hlm-card-header

HlmCardTitle

Selector: [hlmCardTitle]

HlmCard

Selector: [hlmCard],hlm-card

Inputs

Prop	Type	Default	Description
size	'sm' \| 'default'	default	-

Carousel

Calendar

On This Page

Stop configuring. Start shipping.

Zerops powers spartan.ng and Angular teams worldwide.

One-command deployment. Zero infrastructure headaches.