tabler/shared/components/cards/BodyPlaceholder.astro

---
// Equivalent of cards/body-placeholder.html (ui/svg.html inlined).
// TODO: the ui/svg.html `border` branch (rect + inline style) is not ported —
//       body-placeholder.html never sets it (the "border" token in the class
//       list is just a CSS class).
interface Props {
  width?: number
  height?: number
  ratio?: string
  class?: string
}

const { width = 400, height = 200, ratio, class: className } = Astro.props
---

<div class={`card-body${className ? ` ${className}` : ''}`}>
  <svg xmlns="http://www.w3.org/2000/svg" class="w-100 border rounded" preserveAspectRatio={ratio ? 'xMidYMid meet' : 'none'} width={width} height={height} viewBox={`0 0 ${width} ${height}`} fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
    <line x1="0" y1="0" x2={width} y2={height}></line>
    <line x1="0" y1={height} x2={width} y2="0"></line>
  </svg>
</div>