AppCard

FLAG_TYPES value can be "PUBLISHED"|"DRAFT"|"IN_REVIEW"|"COMING_SOON"

icon require a publicly accessible url and the recommended format is 70x70 and 42x42 for the card extraDense. Also we recommend adding a background (#FFFFFF) to the logo if it doesn't work for dark and light theme accessibility contrast.

| Do | Don't | | ------------------------------------------------ | ------------------------------------------------ | | | |

Usage

Import

npm i @finastra/app-card

import '@finastra/app-card';
...
<fds-app-card
  name="Business Economics"
  author="Finastra"
  tags='["Account Information", "API", "Banking"]'
  flag="PUBLISHED"
  icon="https://www.finastra.com/themes/custom/themekit/dist/logo.svg"
  description="Application Description goes here. This can vary in length from short to pretty long, so you’ll want to watch that."
  large>
</fds-app-card>

API

Properties

| Property | Attribute | Type | Default | Description | |---------------|---------------|------------|---------|--------------------------------------------------| | author | author | string | "" | Application author. | | description | description | string | "" | Application description. | | disabled | disabled | boolean | false | Disabled style of the card. | | extraDense | extraDense | boolean | false | Make the card extra small. | | flag | flag | string | "" | Application flag should be PUBLISHED | DRAFT | IN_REVIEW | COMING_SOON. | | icon | icon | string | "" | Application icon url. | | large | large | boolean | false | Make the card bigger. | | name | name | string | "" | Application name. | | outlined | outlined | boolean | false | Change the card style to outlined, default style is elevated. | | selectable | selectable | boolean | true | Change the card style to an action card. | | tags | tags | string[] | [] | Application tags. |

CSS Custom Properties

| Property | Type | Default | Description | |-------------------|-------|-----------|--------------------------------------------------| | --fds-blue | color | "#009CBD" | Color of the In Review flag. | | --fds-gray | color | "#C7C8CA" | Color of the Draft flag. | | --fds-primary | color | "#694ED6" | Start color of the gradient for Coming Soon flag. | | --fds-secondary | color | "#C137A2" | End color of the gradient for Coming Soon flag. | | --fds-success | color | "#008744" | Color of the Deployed flag. |