Documentation
Fuse Components
Components

## Card

fuse-card is a basic card component to show any kind of information or content with features like flipping and expanding.

Exported as: `fuseCard`

## Module

import { FuseCardModule } from '@fuse/components/card';

## Properties

Name | Description | Default
--- | --- | ---
@Input() flippable: boolean | Whether the card is flippable. | `false`

## Methods

expand(): void
Expands the expansion of the card.
collapse(): void
Collapses the expansion of the card.
toggleExpanded(): void
Toggles the expanded status of the expansion.
flip(): void
Flip the card.

## Usage

Just wrap the content or the information with `fuse-card` to show them within the card. fuse-card doesn't apply any kind of style to its content to make customization simpler:

###### Example

This content is in the card and it doesn't have any style applied to it!
<fuse-card> This content is in the card and it doesn't have any style applied to it! </fuse-card>

### Expandable

Expandable fuse-card holds an extra content or information hidden in its expandable area which can be toggled by accessing the component itself via a template reference:

###### Example

Title of the card
A paragraph, an image, a form or simply anything can go here to create the content of the card.
This is the expansion and holds an extra information!
<fuse-card class="flex flex-col px-8 py-6 pb-4" #fuseCard> <div class="text-lg font-bold">Title of the card</div> <div class="mt-2"> A paragraph, an image, a form or simply anything can go here to create the content of the card. </div> <div class="mt-3 -mx-3"> <button class="px-3" mat-button [color]="'primary'" (click)="fuseCard.expanded = !fuseCard.expanded"> <span class="mr-1">Details</span> <mat-icon class="icon-size-5" *ngIf="!fuseCard.expanded" [svgIcon]="'heroicons_solid:chevron-down'"></mat-icon> <mat-icon class="icon-size-5" *ngIf="fuseCard.expanded" [svgIcon]="'heroicons_solid:chevron-up'"></mat-icon> </button> </div> <!-- Expansion --> <ng-container fuseCardExpansion> <div class="my-2"> This is the expansion and holds an extra information! </div> </ng-container> </fuse-card>

### Flippable

Flippable card holds content or information on both sides and can be flipped by accessing the component itself via a template reference. The only limitation with this type of cards is that the back of the card will share the same height as the front of the card. If the back side has more content, scrollbar will appear.

###### Example

Title of the card
A paragraph, an image, a form or simply anything can go here to create the content of the card.

This is the back of the card and holds an extra information!

Also, the back side of the card holds more information than the front of the card which causes scrollbars to appear.

<fuse-card class="flex flex-col" [flippable]="true" #fuseCard> <!-- Front --> <ng-container fuseCardFront> <div class="flex flex-col px-8 py-6 pb-3"> <div class="text-lg font-bold">Title of the card</div> <div class="mt-2"> A paragraph, an image, a form or simply anything can go here to create the content of the card. </div> <div class="mt-3 -mx-3 self-end"> <button mat-icon-button [color]="'primary'" (click)="fuseCard.face = 'back'"> <mat-icon class="icon-size-5" [svgIcon]="'heroicons_outline:arrow-right'"></mat-icon> </button> </div> </div> </ng-container> <!-- Back --> <ng-container fuseCardBack> <div class="flex flex-col flex-auto px-8 py-6 pt-3"> <div class="mb-2 -mx-3"> <button mat-icon-button [color]="'primary'" (click)="fuseCard.face = 'front'"> <mat-icon class="icon-size-5" [svgIcon]="'heroicons_outline:arrow-left'"></mat-icon> </button> </div> <p class="text-secondary"> This is the back of the card and holds an extra information! </p> <p class="text-secondary"> Also, the <em>back</em> side of the card holds more information than the <em>front</em> of the card which causes scrollbars to appear. </p> </div> </ng-container> </fuse-card>