This Card component, built using Fluent UI v9, provides a versatile layout and toolbar for various applications in canvas and custom pages.

The component accepts the following properties:

• AccessibleLabel - A label for accessibility, useful for screen readers.
• Title - The main title displayed on the card.
• Subtitle - A subtitle displayed under the title.
• Description - A descriptive text area to provide more context about the card.
• HeaderImage - An optional image displayed in the card header.
• Image - An additional image for the card's body.
• ImagePlacement - Specifies where to place the Image in relation to the header. Possible values:
  • Above header - Image appears above the header.
  • Below header - Image appears below the header.

• Size - Sets the size of the card. Note that this option adds spacing between elements inside the card. Available options are:
  • Small
  • Medium
  • Large
• Alignment - Controls the alignment of the card content:
  • Vertical
  • Horizontal
• AutoHeight - Dynamically adjusts the height of the card based on content.

This component supports a customizable toolbar that can include action items, configured through the Items property.

• Items - A collection of action items to be displayed in the toolbar. Each item has:
  • ItemDisplayName - The display name of the item.
  • ItemKey - A unique key identifying the item.
  • ItemDisabled - A flag indicating if the item should be disabled.
  • ItemVisible - A flag to toggle the visibility of the item.
  • ItemIconName - The name of the icon to display with the item.
  • ItemIconStyle - Specifies the style of the icon (e.g., "Regular").
  • ItemAppearance - Sets the appearance of the item, such as its style or color.
  • ItemTooltip - Provides additional information about the item when hovered.

• TabIndex - Determines the tabbing order for accessibility.
• Tooltip - Provides additional information about the card when hovered.

• Height - Controls the height of the card.
• Width - Controls the width of the card.
• OnSelect - An event triggered when an item in the toolbar is selected or a card is selected.

Note: The card can only be selected if there are no items (buttons) in the toolbar or if only one button is configured.

Here’s how to set up a basic instance of the Card component with sample toolbar items. Paste below YAML after importing the Card code component.

- Card_1:
    Control: cat_PowerCAT.Card
    Variant: pcfdataset
    Properties:
      OnSelect: =Notify(Self.Selected.ItemKey);
      Alignment: ='PowerCAT.Card.Alignment'.Vertical
      Description: =
      HeaderImage: =User().Image
      Items: |-
        =Table({ItemKey: "mail", ItemDisplayName: "", ItemIconName: "Mail", ItemAppearance:"Transparent", ItemVisible:true, ItemDisabled:false, ItemIconStyle: "Regular", ItemTooltip: "Send mail"},{ItemKey: "chat", ItemDisplayName: "", ItemAppearance:"Transparent",ItemIconName: "Chat", ItemIconStyle: "Regular",ItemTooltip: "Chat"})
      Size: ='PowerCAT.Card.Size'.Medium
      Subtitle: =User().Email
      Title: =User().FullName
      Width: =480
      X: =851
      Y: =317