GitHub

Card

A card is a flexible content container used to group related information and actions about a single subject.

Usage
API

Overview

Cards help organize and present information in a clear and visually appealing way. There are two styles: default (filled) and stroked, and can include images, text, lists, actions, or even other components.

Default (filled) card

Bottom up view of Basel exhibition centre
Basel, Switzerland

Basel Exhibition Centre

This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors.

The architects called the prominent hole in the middle the "Fenster zum Himmel" ("window to heaven").

<daff-card>
	<daff-image daffCardImage
		src="https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80"
		alt="Bottom up view of Basel exhibition centre"
		width="1261"
		height="946">
	</daff-image>
  <fa-icon daffCardIcon [icon]="faMapMarked"></fa-icon>
  <div daffCardTagline>Basel, Switzerland</div>
  <h4 daffCardTitle>Basel Exhibition Centre</h4>
	<div daffCardContent>
    <p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors.</p>
    <p>The architects called the prominent hole in the middle the "Fenster zum Himmel" ("window to heaven").</p>
  </div>
  <div daffCardActions>
    <button daff-button color="theme-contrast">Learn More</button>
  </div>
</daff-card>

Stroked card

Bottom up view of Basel exhibition centre
Basel, Switzerland

Basel Exhibition Centre

This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the "Fenster zum Himmel" ("window to heaven").

<daff-stroked-card [color]="colorControl.value">
  <daff-image daffCardImage
    src="https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80"
    alt="Bottom up view of Basel exhibition centre"
    width="1261"
    height="946">
  </daff-image>
  <div daffCardTagline>Basel, Switzerland</div>
  <h4 daffCardTitle>Basel Exhibition Centre</h4>
  <div daffCardContent>
    <p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the "Fenster zum Himmel" ("window to heaven").</p>
  </div>
</daff-stroked-card>

<select [formControl]="colorControl">
  @for (option of options; track option) {
    <option [value]="option.value">{{ option.label }}</option>
  }
</select>

Best practices

When to use

  • Displaying collections of related content (products, articles, etc.)
  • Presenting information that users need to compare
  • Showing preview information that links to more detail

Usage

Within a standalone component

Import the card style(s) you need into a standalone component:

Available imports:

  • Default (filled) cards: DAFF_CARD_COMPONENTS
  • Stroked cards: DAFF_STROKED_CARD_COMPONENTS
  • All card styles: DAFF_ALL_CARD_COMPONENTS
import { DAFF_CARD_COMPONENTS } from '@daffodil/design/card';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_CARD_COMPONENTS,
  ],
})
export class CustomComponent {}

Within a module (deprecated)

To use card in a module, import DaffCardModule into your custom module:

import { NgModule } from '@angular/core';
import { DaffCardModule } from '@daffodil/design/card';
import { CustomComponent } from './custom.component';

@NgModule({
    declarations: [
    CustomComponent,
  ],
  exports: [
    CustomComponent,
  ],
  imports: [
    DaffCardModule,
  ],
})
export class CustomComponentModule { }

This method is deprecated. It's recommended to update all custom components to standalone.

Anatomy

A card consists of the following components, displayed in the order listed:

Container

<daff-card> or <daff-stroked-card>: The main wrapper that holds all card content.

Image

[daffCardImage]: Image element at the top of the card.

Icon

[daffCardIcon]: Displays a visual or branding element. Avoid using for interactive icons.

Tagline

[daffCardTagline]: Short phrase that provides quick context.

Title

[daffCardTitle]: The primary heading of the card.

Content

[daffCardContent]: Flexible container for body text or custom content. It's unstyled except for spacing and should only be used once per card.

Actions

[daffCardActions]: Container for buttons or links, positioned at the bottom.

Basic structure

<daff-card>
  <img daffCardImage src="/product.jpg" alt="Product image">
  <div daffCardIcon>
    <fa-icon [icon]="faStar"></fa-icon>
  </div>
  <div daffCardTagline>New Arrival</div>
  <h4 daffCardTitle>Product Name</h4>
  <div daffCardContent>
    <p>Product description and details.</p>
  </div>
  <div daffCardActions>
    <button>View Details</button>
    <button>Add to Cart</button>
  </div>
</daff-card>

Features

Interactive card

An interactive card turns the entire card into a clickable area that navigates to another page or view. This is useful for cards representing products, articles, or other resources where selecting the card should take the user to another page or section.

To create an interactive card, apply the component selector to an <a> element. All card styles support interactive behavior.

Bottom up view of Basel exhibition centre
Basel, Switzerland

Basel Exhibition Centre

This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the "Fenster zum Himmel" ("window to heaven").

Bottom up view of Basel exhibition centre
Basel, Switzerland

Basel Exhibition Centre

This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the "Fenster zum Himmel" ("window to heaven").

<a daff-card href="https://www.basel.com/en/attractions/basel-exhibition-centre-f45d5dd6f0" target="_blank" [color]="basicColorControl.value">
  <daff-image daffCardImage
    src="https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80"
    alt="Bottom up view of Basel exhibition centre"
    width="1261"
    height="946">
  </daff-image>
  <div daffCardTagline>Basel, Switzerland</div>
  <h4 daffCardTitle>Basel Exhibition Centre</h4>
  <div daffCardContent>
    <p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the "Fenster zum Himmel" ("window to heaven").</p>
  </div>
</a>

<select [formControl]="basicColorControl">
  @for (option of options; track option) {
    <option [value]="option.value">{{ option.label }}</option>
  }
</select>

<a daff-stroked-card href="https://www.basel.com/en/attractions/basel-exhibition-centre-f45d5dd6f0" target="_blank" [color]="strokedColorControl.value">
  <daff-image daffCardImage
    src="https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80"
    alt="Bottom up view of Basel exhibition centre"
    width="1261"
    height="946">
  </daff-image>
  <div daffCardTagline>Basel, Switzerland</div>
  <h4 daffCardTitle>Basel Exhibition Centre</h4>
  <div daffCardContent>
    <p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the "Fenster zum Himmel" ("window to heaven").</p>
  </div>
</a>

<select [formControl]="strokedColorControl">
  @for (option of options; track option) {
    <option [value]="option.value">{{ option.label }}</option>
  }
</select>

Elevation

Use the elevated property to add shadows to cards.

Bottom up view of Basel exhibition centre
Basel, Switzerland

Basel Exhibition Centre

This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the "Fenster zum Himmel" ("window to heaven").

Bottom up view of Basel exhibition centre
Basel, Switzerland

Basel Exhibition Centre

This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the "Fenster zum Himmel" ("window to heaven").

<daff-card [elevated]="true">
	<daff-image daffCardImage
		src="https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80"
		alt="Bottom up view of Basel exhibition centre"
		width="1261"
		height="946">
	</daff-image>
	<div daffCardTagline>Basel, Switzerland</div>
	<h4 daffCardTitle>Basel Exhibition Centre</h4>
	<div daffCardContent>
		<p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the "Fenster zum Himmel" ("window to heaven").</p>
	</div>
</daff-card>

<daff-stroked-card [elevated]="true">
	<daff-image daffCardImage
		src="https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80"
		alt="Bottom up view of Basel exhibition centre"
		width="1261"
		height="946">
	</daff-image>
	<div daffCardTagline>Basel, Switzerland</div>
	<h4 daffCardTitle>Basel Exhibition Centre</h4>
	<div daffCardContent>
		<p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the "Fenster zum Himmel" ("window to heaven").</p>
	</div>
</daff-stroked-card>

Orientation

Use the orientation property to stack card content either vertical (default) or horizontal. Horizontal cards automatically switch to vertical on smaller screens.

Bottom up view of Basel exhibition centre
Basel, Switzerland

Basel Exhibition Centre

This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the "Fenster zum Himmel" ("window to heaven").

<daff-card [orientation]="orientationControl.value">
  <daff-image daffCardImage
    src="https://images.unsplash.com/photo-1593519749347-80f101e93113?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3774&q=80"
    alt="Bottom up view of Basel exhibition centre"
    width="1261"
    height="946">
  </daff-image>
  <fa-icon daffCardIcon [icon]="faMapMarked"></fa-icon>
  <div daffCardTagline>Basel, Switzerland</div>
  <h4 daffCardTitle>Basel Exhibition Centre</h4>
  <div daffCardContent>
    <p>This covered, public space not only marks the entrance to the exhibitions, but also functions as a meeting place for locals and visitors. The architects called the prominent hole in the middle the "Fenster zum Himmel" ("window to heaven").</p>
  </div>
  <div daffCardActions>
    <button daff-button color="theme-contrast">Learn More</button>
  </div>
</daff-card>

<select [formControl]="orientationControl">
  @for (option of options; track option) {
    <option [value]="option.value">{{ option.label }}</option>
  }
</select>

Colors

Cards default to a light gray background. Use the color property to change a card's color.

Card Tagline
Title

Cards are themable.

Card Tagline
Title

Cards are themable.

<daff-card [color]="cardControl.value">
  <div daffCardTagline>Card Tagline</div>
  <div daffCardTitle>Title</div>
  <div daffCardContent>
    <p>Cards are themable.</p>
  </div>
</daff-card>

<select [formControl]="cardControl">
  @for (option of options; track option) {
    <option [value]="option.value">{{ option.label }}</option>
  }
</select>

<daff-stroked-card [color]="strokedCardControl.value">
  <div daffCardTagline>Card Tagline</div>
  <div daffCardTitle>Title</div>
  <div daffCardContent>
    <p>Cards are themable.</p>
  </div>
</daff-stroked-card>

<select [formControl]="strokedCardControl">
  @for (option of options; track option) {
    <option [value]="option.value">{{ option.label }}</option>
  }
</select>

Support Contributing Sponsor Report an issue
Graycore, LLC © 2018 - 2026. Code licensed under an MIT-style License. Documentation licensed under CC BY 4.0.