Cards create small containers that highlight important information, and you group cards together to display information about related items.
Cards can handle a variety of scenarios, but multiple cards are generally grouped together to display information about related items. For example, cards can present a stack or carousel of to-do items or a matrix of images.
Cards frequently present users with a call to action. They can use visual cues to alert users about the need for action, and they can also include actions directly on the cards.
SkyCardModule@skyux/layoutnpm install --save-exact @skyux/layoutCreates a a small container to highlight important information.
sky-card
| Input | Description |
|---|---|
selectable?: boolean | Whether to display a checkbox to the right of the card title. Users can select multiple checkboxes and perform actions on the selected cards. Optional. Default is false |
selected?: boolean | Whether the card is selected. This only applies to card where
Optional. Default is false |
size?: string | The size of the card. The valid options are Optional. Default is "large" |
| Event | Description |
|---|---|
selectedChange: EventEmitter<boolean> | Fires when users select or deselect the card. |
<sky-card [selectable]="showCheckbox">
<sky-card-title *ngIf="showTitle"> Large card </sky-card-title>
<sky-card-content *ngIf="showContent">
This card demonstrates the amount of space that is available for a card that
uses the default large size. If the content does not require this much
space, you can set the card size to small. The type of content to display in
the body of a card varies based on what the card represents and whether it
prompts users to action.
</sky-card-content>
<sky-card-actions *ngIf="showAction">
<button
class="sky-btn sky-btn-default"
type="button"
(click)="triggerAlert()"
>
Action
</button>
</sky-card-actions>
</sky-card>
<sky-card size="small" [selectable]="showCheckbox">
<sky-card-title *ngIf="showTitle"> Small card </sky-card-title>
<sky-card-content *ngIf="showContent">
This card demonstrates the reduced amount of space that is available when
you set the card size to small.
</sky-card-content>
<sky-card-actions *ngIf="showAction">
<sky-dropdown buttonType="context-menu">
<sky-dropdown-menu>
<sky-dropdown-item>
<button type="button" (click)="triggerAlert()">Action</button>
</sky-dropdown-item>
</sky-dropdown-menu>
</sky-dropdown>
</sky-card-actions>
</sky-card>
<ul class="sky-list-unstyled">
<li>
<sky-checkbox [(ngModel)]="showTitle">
<sky-checkbox-label>Show title</sky-checkbox-label>
</sky-checkbox>
</li>
<li>
<sky-checkbox [(ngModel)]="showContent">
<sky-checkbox-label>Show content</sky-checkbox-label>
</sky-checkbox>
</li>
<li>
<sky-checkbox [(ngModel)]="showAction">
<sky-checkbox-label>Show action</sky-checkbox-label>
</sky-checkbox>
</li>
<li>
<sky-checkbox [(ngModel)]="showCheckbox">
<sky-checkbox-label>Show checkbox</sky-checkbox-label>
</sky-checkbox>
</li>
</ul>import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SkyCheckboxModule } from '@skyux/forms';
import { SkyCardModule } from '@skyux/layout';
import { SkyDropdownModule } from '@skyux/popovers';
@Component({
standalone: true,
selector: 'app-demo',
templateUrl: './demo.component.html',
imports: [
CommonModule,
FormsModule,
SkyCardModule,
SkyCheckboxModule,
SkyDropdownModule,
],
})
export class DemoComponent {
protected showAction = true;
protected showCheckbox = true;
protected showContent = true;
protected showTitle = true;
protected triggerAlert(): void {
alert('Action clicked!');
}
}