MediaCard

import '@blukavantui/web/theme.css'

import {createMediaCard} from '@blukavantui/web/media-card';
import '@blukavantui/web/media-card.css';
export function mount(host:HTMLElement) {
 const owned:{destroy():void}[]=[];
 const keep=<T extends {destroy():void}>(c:T)=>{owned.push(c);return c;};
 const status=document.createElement("p");status.setAttribute("role","status");
 keep(createMediaCard(host,{
  "ImageUrl": "https://blukavantui.blutekmedia.com/bluui/rich/architecture.jpg",
  "ImageDescription": "A warm contemporary interior with natural light",
  "FocalPoint": "50% 50%",
  "Eyebrow": "Spaces / 2026",
  "Title": "Designed for the everyday.",
  "Description": "A quieter kind of space, shaped around the people who use it.",
  "ActionLabel": "Explore the project",
  "Url": "#rich-example",
  "Variant": "Below",
  "AspectRatio": "4 / 3",
  "EnableZoom": true
},{Error: (message) => {status.textContent="Error: "+String(message);}}));host.append(status);
 return {destroy(){owned.reverse().forEach(c=>c.destroy());status.remove();}};
}

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

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