Account Tile

<sl-account-tile> | SlAccountTile

Since 2.0

hub24

Account tile is a HUB24 component that displays an account details, it is used inside account groups. Account tile allows a user to be able to select or deselect an account.

<sl-account-tile active
  account-name="Southewest Parish Investments"
  account-number="2354542"
  account-product="HUB24 Super - CORE Menu"
  account-balance="$44,4444"
>
</sl-account-tile>

Examples

Account status

<sl-account-tile active
  account-name="Active account status"
  account-number="2354542"
  account-product="HUB24 Super - CORE Menu"
  account-balance="$44,4444"
>
</sl-account-tile>

<br />

<sl-account-tile
  account-name="Closed account status"
  account-number="2354542"
  account-product="HUB24 Super - CORE Menu"
  account-status="Closed"
  account-balance="$44,4444"
>
</sl-account-tile>

<br />

<sl-account-tile
  account-name="Inactive account status"
  account-number="2354542"
  account-product="HUB24 Super - CORE Menu"
  account-status="Inactive"
  account-balance="$44,4444"
>
</sl-account-tile>

Account balance warning


<sl-account-tile
  account-name="Inactive account status"
  account-number="2354542"
  account-product="HUB24 Super - CORE Menu"
  account-status="Inactive"
  account-balance="$44,4444"
  show-balance-warning
  balanceDisclaimer="This is not the real amount"
>
</sl-account-tile>

TODO

[component-metadata:sl-account-tile]

Slots

Name	Description
(default)	Account tile content is contained in the default slot.

Learn more about using slots.

Properties

Name	Description	Type	Default
`accountId` `account-id`	Stores the account ID of the client as a string	`string`	-
`accountName` `account-name`	Contains the account Name of the client as a string	`string`	-
`accountNumber` `account-number`	Holds the account number attribute for the client	`string`	-
`accountProduct` `account-product`	Specifies the type of product select for the client	`string`	-
`accountBalance` `account-balance`	Keeps the account balance of the client’s funds as a string variable	`string`	-
`accountStatus` `account-status`	Maintains the status of the client’s account	`string`	-
`showBalanceWarning` `show-balance-warning`	Tracks the state of the client’s account balance as a boolean varaible, used to indicate if balance drops below a targe threshold	`boolean`	`false`
`active`	Stores a boolean value for whether the account is active or not	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Parts

Name	Description
`base`	Account tile content is contained in the base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<sl-icon>