Pass them around

Mission Control sends many astronauts. Make the card take a name.

Mission Control sends many astronauts. We can't hardcode every name inside the card — it'd defeat the point of having a component.

Time for props . The card pulls name and mission from Astro.props — any page can pass different values in as HTML attributes.

The preview feeds name="Mae" mission="Endeavour" into your Card. Try changing the heading or destructuring an extra prop.

✦ src/components/Card.astro — now reusable live

--- const { name, mission } = Astro.props; --- <div class="card"> <h1>Hello, {name}!</h1> <p>{mission} · ready for orbit.</p> </div> <style> .card { background: #0d0b2e; color: #fef3c7; padding: 1.5rem; border-radius: 12px; font-family: system-ui; } </style> ⚠ JavaScript is disabled. The editor needs it to highlight and run your code.

And on the page that uses it — pass the values like attributes:

✦ src/pages/index.astro read-only

---
import Card from "~/components/Card.astro";
---

<Card name="Mae" mission="Endeavour" />
<Card name="Ovidiu" mission="Apollo 42" />
<Card name="Sergei" mission="Soyuz 11" />

Three cards. One component. That's the whole trick.

— page 4 —