Descriptions

import '@bluui/web/styles.css'

import { createDescriptions } from "@bluui/web";
export function mount(host: HTMLElement) {
  return createDescriptions(host, {
  "Title": "Account details",
  "Columns": 2,
  "IsBordered": true,
  "Items": [
    {
      "Key": "name",
      "Label": "Customer",
      "Value": "Jordan Lee"
    },
    {
      "Key": "account",
      "Label": "Account",
      "Value": "BLU-1042"
    },
    {
      "Key": "email",
      "Label": "Email address",
      "Value": "jordan@example.com"
    },
    {
      "Key": "status",
      "Label": "Status",
      "Value": "Active",
      "Color": "Success"
    },
    {
      "Key": "plan",
      "Label": "Plan",
      "Value": "Business · Annual",
      "ActionLabel": "Manage plan"
    },
    {
      "Key": "renewal",
      "Label": "Next renewal",
      "Value": "October 11, 2027"
    },
    {
      "Key": "notes",
      "Label": "Notes",
      "Value": "Priority support and shared team workspaces are included.",
      "Span": 2
    }
  ]
}, { ItemClick: key => { host.dataset.detail = key; } });
}

const instance = mount(document.getElementById('example')!)

// When this page or framework component is removed:
// instance.destroy()