CollectionLayout

import '@blukavantui/web/theme.css'

import {createMediaCard} from '@blukavantui/web/media-card';
import {createCollectionLayout} from '@blukavantui/web/collection-layout';
import '@blukavantui/web/media-card.css';
import '@blukavantui/web/collection-layout.css';
export function mount(host:HTMLElement) {
 const owned:{destroy():void}[]=[];
 const keep=<T extends {destroy():void}>(c:T)=>{owned.push(c);return c;};
 const content=document.createElement("div");host.append(content);
 for(const [i,photo] of ["architecture","coast","studio","mountains"].entries()){const h=document.createElement("div");content.append(h);keep(createMediaCard(h,{Title:["Spaces with purpose","A wider perspective","A place to create","Beyond the familiar"][i],ImageUrl:"https://blukavantui.blutekmedia.com/bluui/rich/"+photo+".jpg",ImageDescription:"Sample creative project",Description:"Thoughtful work, shaped around people.",Variant:i%2?"Overlay":"Below"}));}
 const status=document.createElement("p");status.setAttribute("role","status");
 keep(createCollectionLayout(host,{
  "Variant": "Grid",
  "Columns": 3,
  "Gap": 24,
  "MinItemWidth": 240
,Content:content},{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()