Custom Cards
Learn how to configure custom cards in Umbraco UI Builder.
Custom cards enable more complex metric calculations and are defined by a class that implements the Card
base class.
When Umbraco UI Builder resolves a card, it tries to do so from the global DI container. This means you can inject any dependencies required for the card's value calculation. If no type is found in the DI container, Umbraco UI Builder will fall back to manually instantiating a new instance of the value mapper.
Defining a Custom Card
To define a custom card, create a class that inherits from the base class Card
and configure it in the constructor as shown below:
Configuration Options
Name
The name of the card.
Yes
Alias
A unique alias for the card.
Yes
GetValue(object parentId = null)
A method to retrieve the card's value.
Yes
Icon
An icon displaed in the card.
No
Color
The color of the card.
No
Suffix
The suffix displayed after the card value.
No
Adding a Custom Card to a Collection
Using the AddCard()
Method
AddCard()
MethodAdds a custom card of the specified type to the collection.
Method Syntax
Example
Using the AddCard(Type cardType)
Method
AddCard(Type cardType)
MethodAdds a custom card of the specified type to the collection, using the Type
parameter to pass the card type dynamically.
Method Syntax
Example
Last updated
Was this helpful?