Cards are versatile content containers that contain content and actions to convey information about a single subject.
There are three types of cards: default (filled), raised, and stroked. Cards can contain anything from images, blocks of text, lists, accordions, and other components.
The example below is a default, filled card that includes all of a card's pre-styled elements and a fixed width. Cards naturally do not have a fixed width, so they'll be 100% wide by default. The width is changeable with custom CSS
To use card in a standalone component, import it directly into your custom component:
@Component({
selector: 'custom-component',
templateUrl: './custom-component.component.html',
standalone: true,
imports: [
DAFF_CARD_COMPONENTS,
],
})
export class CustomComponent {}
To use card in a module, import DaffCardModule into your custom module:
import { NgModule } from '@angular/core';
import { DaffCardModule } from '@daffodil/design/card';
@NgModule({
declarations: [
CustomComponent,
],
exports: [
CustomComponent,
],
imports: [
DaffCardModule,
],
})
export class CustomComponentModule { }
This method is deprecated. It's recommended to update all custom components to standalone.
A card supports a wide variety of content and includes minimally pre-styled image, icon, tagline, title, content, and actions content containers.
Image can be added to a card by using the daffCardImage attribute. It stretches the image to a card's defined width and ensures that its border radius is flush with a card.
Icon can be added to a card by using the daffCardIcon attribute. It's intended for visual or branding reinforcement and should not be used for actionable icons.
Tagline can be added to a card by using the daffCardTagline attribute. It's intended to supplement the title by providing a short, memorable description.
Title can be added to a card by using the daffCardTitle attribute.
Content can be added to a card by using the daffCardContent attribute and should only be used once. It's a wrapper container that can be used to place all additional components and text content within a card. The content container allows for a ton of control and customization because it's not affected by any of card's properties and only serves as a wrapping and spacing container.
Buttons can be added to a card by using the daffCardActions attribute. This container will always be positioned at the bottom of a card.
Orientation dictates how a card's content is stacked — vertical or horizontal. Cards are oriented vertically by default. The orientation of a card can be defined or updated by using the orientation property. Horizontal cards will stack vertically on smaller screens due to size constraints.
Cards can be linkable by adding the component selector to the <a> tag. All card types are linkable.
A raised card adds elevation to the default card.
A stroked card adds a border to the default card.
Cards will use the base color of your application to display the default background and/or border color. A card's colors can be defined by using the color property.
Supported colors: primary | secondary | tertiary | white | black | theme | theme-contrast