open-index/open-npm huggingface dataset:
npm package: @finastra/account-card
Description: AccountCard Web Component
Latest version: 1.8.1

# Account Card

Account Card is a use case of card using the [Accounts and Balances](https://developer.fusionfabric.cloud/api/corporate-accounteinfo-me-v1-831cb09d-cc10-4772-8ed5-8a6b72ec8e01/docs#operation/getAccountsForCustomerUser) APIs.

> This component is based on [base-card](./src/base-card.ts). See `fds-card` documentation for more details.

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/account-card?style=for-the-badge)](https://www.npmjs.com/package/@finastra/account-card)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/account-card?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/account-card')
[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://finastra.github.io/finastra-design-system/?path=/story/components-account-card--default)

## Usage

### Import

```
npm i @finastra/account-card
```

```ts
import '@finastra/account-card';
...
<fds-account-card name="France" balance="50000" currency="EUR" number="DE89 3704 0044 0532 0130 00"></fds-account-card>
```

### API

<!-- DOC -->
#### Properties

| Property        | Attribute       | Type      | Default                       | Description                                      |
|-----------------|-----------------|-----------|-------------------------------|--------------------------------------------------|
| `balance`       | `balance`       | `number`  | 0                             | Account balance.                                 |
| `currency`      | `currency`      | `string`  | "USD"                         | Account currency ISO format.                     |
| `disabled`      | `disabled`      | `boolean` | false                         | Disabled style of the card.                      |
| `icon`          | `icon`          | `string`  | "credit_card"                 | Change card icon.                                |
| `iconAriaLabel` | `iconAriaLabel` | `boolean` | "Credit Card"                 | Change the card icon aria label.                 |
| `name`          | `name`          | `string`  | "Account"                     | Account Name.                                    |
| `number`        | `number`        | `string`  | "XXXX XXXX XXXX XXXX XXXX XX" | Account number.                                  |
| `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.         |

#### Methods

| Method              | Type                    |
|---------------------|-------------------------|
| `renderBalance`     | `(): string`            |
| `renderCardContent` | `(): TemplateResult<1>` |
<!-- /DOC -->
npm package: @finastra/alert-message
Description: AlertMessage Web Component
Latest version: 1.8.1

# AlertMessage

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

[![See it on NPM!](https://img.shields.io/npm/v/@finastra/alert-message?style=for-the-badge)](https://www.npmjs.com/package/@finastra/alert-message)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@finastra/alert-message?style=for-the-badge)](https://bundlephobia.com/result?p=@finastra/alert-message')
[![Storybook](https://shields.io/badge/-Play%20with%20this%20web%20component-2a0481?logo=storybook&style=for-the-badge)](https://finastra.github.io/finastra-design-system/?path=/story/components-alert-message--default)

## Usage

### Import

```
npm i @finastra/alert-message
```

```ts
import '@finastra/alert-message';
...
  <fds-alert-message type="success" title="Success" description="A banner displays an important, succinct message, and provides actions for users to address or dismiss the banner.">
  </fds-alert-message>
```

### API

<!-- DOC -->
#### Properties

| Property          | Attribute         | Type                            | Default      | Description                                      |
|-------------------|-------------------|---------------------------------|--------------|--------------------------------------------------|
| `dense`           | `dense`           | `boolean`                       | false        | dense .                                          |
| `description`     | `description`     | `string`                        | ""           | Alert description.                               |
| `icon`            | `icon`            | `string`                        | ""           | Alert Icon.                                      |
| `layout`          | `layout`          | `multiLines\|singleLine`        | "multiLines" | Define the layout type                           |
| `showCloseButton` | `showCloseButton` | `boolean`                       | false        | Display the close button to dismiss the alert message. |
| `title`           | `title`           | `string`                        | ""           | Alert title.                                     |
| `type`            | `type`            | `info\|error\|success\|warning` | "success"    | Define the alert type                            |
| `withoutIcon`     | `withoutIcon`     | `boolean`                       | false        | Remove the Icon from the alert message.          |

#### Methods

| Method       | Type                    |
|--------------|-------------------------|
| `renderIcon` | `(): TemplateResult<1>` |
<!-- /DOC -->