@finastra/card NPM

Card

This component is based on base-card, it follow the principals of Material Design Cards. This component can be used alone, it also provids a number of card sections including:

fds-card-header
fds-card-title
fds-card-subtitle
fds-card-content
fds-card-actions
fds-card-footer

Usage

Import

npm i @finastra/card

import '@finastra/card';
...

<style>
  fds-card {
    max-width: 400px;
  }

  .example-header-image {
    background-image: url('https://cdn2.thecatapi.com/images/zvfTwDY54.jpg');
    background-size: cover;
  }
</style>

<fds-card>
  <fds-card-header>
    <div class="example-header-image"></div>
    <div class="card-header-text">
      <fds-card-title>Header</fds-card-title>
      <fds-card-subtitle>Subhead</fds-card-subtitle>
    </div>
  </fds-card-header>
  <img src="https://cdn2.thecatapi.com/images/jb.jpg">
  <fds-card-content>
    Add your card content here
  </fds-card-content>
  <fds-card-actions>
    <fds-text-button label="Button"></fds-text-button>
    <fds-text-button label="Button"></fds-text-button>
  </fds-card-actions>
</fds-card>

API

Properties

Property	Attribute	Type	Default	Description
`disabled`	`disabled`	`boolean`	false	Disabled style of the card.
`outlined`	`outlined`	`boolean`	false	Change the card style to outlined, default style is elevated.
`selectable`	`selectable`	`boolean`	false	Change the card style to an action card.

fds-card-actions

Properties

Property	Attribute	Type	Default
`align`	`align`	`Position`	"start"
`disabled`	`disabled`	`boolean`	false

fds-card-content

Properties

Property	Attribute	Type	Default
`disabled`	`disabled`	`boolean`	false

fds-card-footer

Properties

Property	Attribute	Type	Default
`disabled`	`disabled`	`boolean`	false

fds-card-header

Properties

Property	Attribute	Type	Default
`disabled`	`disabled`	`boolean`	false

fds-card-subtitle

Properties

Property	Attribute	Type	Default
`disabled`	`disabled`	`boolean`	false

fds-card-title

Properties

Property	Attribute	Type	Default
`disabled`	`disabled`	`boolean`	false

fds-card

Properties

Property	Attribute	Type	Default	Description
`disabled`	`disabled`	`boolean`	false	Disabled style of the card.
`outlined`	`outlined`	`boolean`	false	Change the card style to outlined, default style is elevated.
`selectable`	`selectable`	`boolean`	false	Change the card style to an action card.