卡片 Card

<div class="xxd-grid" style="--grid-min:200px">
  <a class="xxd-card" href="#"><div class="xxd-card__media" style="--ratio:3/4"></div><div class="xxd-card__body"><p class="xxd-card__title">编辑式海报</p><span class="xxd-card__meta">xxd-panel-001</span></div></a>
</div>

export function CardDemo() {
  return (
    <CardGrid min={180}>
      {["#d65f32", "#3b74b8", "#5a8a3c"].map((c, i) => (
        <Card key={c} href="#" title={`编辑式海报 00${i + 1}`} meta={`xxd-panel-00${i + 1}`} media={<div style={{ position: "absolute", inset: 0, background: c }} />} />
      ))}
    </CardGrid>
  );
}