Card and Surface for Angular

import { AuiCard, AuiCardContent, AuiCardFooter, AuiCardMedia } from '@absoluteui/angular/card';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Card and Surface page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { card: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiCard } from '@absoluteui/angular/card';

@Component({
  selector: 'app-project-card',
  imports: [AuiCard],
  template: `<aui-card title="Project Alpha" subtitle="Owner: Ada" content="Launch planned for Q4." [interactive]="{ href: '/projects/alpha' }" [headingLevel]="2"></aui-card>`,
})
export class ProjectCardComponent {}

<aui-card>

Class AuiCard; template reference #ref="auiCard".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
title	string		Card heading and the <article>’s accessible name (aria-labelledby). Without a title the card is a <div>.
subtitle	string		Supporting line under the title (text only).
content	string | Node		Body content; strings render as text. Omit to fill card.body directly.
footer	Node		Footer content such as actions or metadata.
media	Node		Image or illustration, shown above the header while the header stays first in source order.
interactive	CardInteractive		Block-link mode: the title becomes the only link and its ::after covers the card. Requires title; href must be http(s) or relative.
variant	SurfaceVariant	'flat'	Surface treatment (Card and Surface.apply).
headingLevel	CardHeadingLevel	'3'	Heading level of the card title; match it to the surrounding outline.

Content parts

Part	Element
content	AuiCardContent
footer	AuiCardFooter
media	AuiCardMedia

<aui-card-content>

Class AuiCardContent.

Server rendering: Renders on the server; the browser re-creates it after hydration.

<aui-card-footer>

Class AuiCardFooter.

Server rendering: Renders on the server; the browser re-creates it after hydration.

<aui-card-media>

Class AuiCardMedia.

Server rendering: Renders on the server; the browser re-creates it after hydration.