AppCard
FLAG_TYPESvalue can be"PUBLISHED"|"DRAFT"|"IN_REVIEW"|"COMING_SOON"
iconrequire a publicly accessible url and the recommended format is 70x70 and 42x42 for the cardextraDense. 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. |