---
// src/components/Card.astro
const { title } = Astro.props;
---

<div class="card">
  <h2>{title}</h2>
  <slot />
</div>

<!-- src/pages/index.astro -->
---
import Card from '../components/Card.astro';
---

<Card title="Hello from Astro">
  <p>This is card content passed in via a slot.</p>
</Card>

<!--
  Notes:
  - Astro.props is how a component reads whatever attributes were
    passed to it — title="Hello from Astro" becomes { title } here.
  - <slot /> is where any content placed between <Card> and </Card>
    tags gets inserted, similar in spirit to Vue's own <slot>.
  - To confirm zero JS was shipped: build the project (npm run build)
    or check the rendered page's View Source in the browser — there's
    no <script> tag anywhere for this component, since it never
    opted into any client-side hydration directive.
-->