Card

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

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.

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 zumHimmel" ("window to heaven").

Basel, Switzerland

Basel Exhibition Centre

<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. The architects called the prominent hole in the middle the "Fenster zumHimmel" ("window to heaven").
    </p>
  </div>
  <div daffCardActions>
    <button daff-button color="theme-contrast">Learn More</button>
  </div>
</daff-card>

<daff-stroked-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. The architects called the prominent hole in the middle the "Fenster zumHimmel" ("window to heaven").
    </p>
  </div>
  <div daffCardActions>
    <button daff-button color="theme-contrast">Learn More</button>
  </div>
</daff-stroked-card>

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

Import the card style(s) you need into your 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 {}

Deprecation notice:

DaffCalloutModule is deprecated. Use the standalone component imports instead.

Anatomy

A card is composed of a container, image, icon, tagline, title, content, and actions, displayed in the order listed:

<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>

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

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

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

[daffCardTagline]
Short phrase that provides quick context.

[daffCardTitle]
The primary heading of the card.

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

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

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.

Color

New Arrival

Classic Leather Jacket

A timeless jacket crafted from premium full-grain leather with a soft interior lining.

Color

New Arrival

Classic Leather Jacket

A timeless jacket crafted from premium full-grain leather with a soft interior lining.

<div class="daff-linkable-card__example-wrapper">
  <daff-form-field>
    <daff-form-label>Color</daff-form-label>
    <daff-select [options]="options" [formControl]="basicColorControl">
      <ng-template daffSelectOption let-option="option">
        {{ option.label }}
      </ng-template>
    </daff-select>
  </daff-form-field>

  <a
    daff-card
    href="/product/classic-leather-jacket"
    [color]="basicColorControl.value?.value"
  >
    <div daffCardTagline>New Arrival</div>
    <h4 daffCardTitle>Classic Leather Jacket</h4>
    <div daffCardContent>
      <p>
        A timeless jacket crafted from premium full-grain leather
        with a soft interior lining.
      </p>
    </div>
  </a>
</div>

<div class="daff-linkable-card__example-wrapper">
  <daff-form-field>
    <daff-form-label>Color</daff-form-label>
    <daff-select [options]="options" [formControl]="strokedColorControl">
      <ng-template daffSelectOption let-option="option">
        {{ option.label }}
      </ng-template>
    </daff-select>
  </daff-form-field>

  <a
    daff-stroked-card
    href="/product/classic-leather-jacket"
    [color]="strokedColorControl.value?.value"
  >
    <div daffCardTagline>New Arrival</div>
    <h4 daffCardTitle>Classic Leather Jacket</h4>
    <div daffCardContent>
      <p>
        A timeless jacket crafted from premium full-grain leather
        with a soft interior lining.
      </p>
    </div>
  </a>
</div>

Colors

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

Color

Card Tagline

Title

Cards are themable.

Color

Card Tagline

Title

Cards are themable.

<div class="daff-card-theming__example-wrapper">
  <daff-form-field>
    <daff-form-label>Color</daff-form-label>
    <daff-select [options]="options" [formControl]="cardControl">
      <ng-template daffSelectOption let-option="option">
        {{ option.label }}
      </ng-template>
    </daff-select>
  </daff-form-field>

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

<div class="daff-card-theming__example-wrapper">
  <daff-form-field>
    <daff-form-label>Color</daff-form-label>
    <daff-select [options]="options" [formControl]="strokedCardControl">
      <ng-template daffSelectOption let-option="option">
        {{ option.label }}
      </ng-template>
    </daff-select>
  </daff-form-field>

  <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>
</div>

Elevation

Use the elevated property to add shadows to cards.

Featured Category

Summer Collection

Explore the latest styles for the season, from lightweight linen shirts to casual shorts and sandals.

Featured Category

Summer Collection

Explore the latest styles for the season, from lightweight linen shirts to casual shorts and sandals.

<daff-card [elevated]="true">
  <div daffCardTagline>Featured Category</div>
  <h4 daffCardTitle>Summer Collection</h4>
  <div daffCardContent>
    <p>
      Explore the latest styles for the season, from lightweight linen shirts to casual shorts and sandals.
    </p>
  </div>
</daff-card>

<daff-stroked-card [elevated]="true">
  <div daffCardTagline>Featured Category</div>
  <h4 daffCardTitle>Summer Collection</h4>
  <div daffCardContent>
    <p>
      Explore the latest styles for the season, from lightweight linen shirts to casual shorts and sandals.
    </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.

Orientation

Featured Category

Running Shoes

Discover our latest lineup of running shoes, built for everyday training and race day performance.

<daff-form-field>
  <daff-form-label>Orientation</daff-form-label>
  <daff-select [options]="options" [formControl]="orientationControl">
    <ng-template daffSelectOption let-option="option">
      {{ option.label }}
    </ng-template>
  </daff-select>
</daff-form-field>

<daff-card [orientation]="orientationControl.value?.value">
  <daff-image
    daffCardImage
    src="https://images.unsplash.com/photo-1460353581641-37baddab0fa2?auto=format&fit=crop&w=3774&q=80"
    alt="Assortment of running shoes lined up"
    width="1261"
    height="946"
  >
  </daff-image>
  <div daffCardTagline>Featured Category</div>
  <h4 daffCardTitle>Running Shoes</h4>
  <div daffCardContent>
    <p>
      Discover our latest lineup of running shoes, built for everyday
      training and race day performance.
    </p>
  </div>
  <div daffCardActions>
    <button daff-button color="theme-contrast">Shop Now</button>
  </div>
</daff-card>