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

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!

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!

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.