@finastra/app-card NPM

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.