@finastra/card

v1.8.1

Published

a year ago

Card Web Component

Downloads

0High
0Medium
0Low

david.bocle

ffdcbot

ttalbot

finastra design system web components card

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