Folder: src/components/containers/
Layout and composite UI used by blocks. No config slice — import directly or via a parent block.
Wrapper
Constrains content width. Used by nearly every block.
---
import Wrapper from "@/components/containers/Wrapper.astro";
---
<Wrapper variant="wide">
<slot />
</Wrapper>variant |
Max width |
|---|---|
standard |
--container-content |
narrow |
48rem |
wide |
--container-wide |
PageHeader
Interior page title block (About, Work index, Blog index):
---
import PageHeader from "@/components/containers/PageHeader.astro";
---
<PageHeader
eyebrow="Work"
heading="Selected projects"
subheading="Case studies and shipped products."
/>| Prop | Required | Notes |
|---|---|---|
heading |
yes | Page title |
eyebrow |
no | Small label above title |
subheading |
no | Supporting line |
width |
no | Wrapper variant |
StatsGrid
Animated stat display. Used inside Hero01 and the Stats01 block.
<StatsGrid
items={[{ value: "50+", label: "Projects" }]}
variant="band"
columns={3}
animate={true}
/>TestimonialCard / TestimonialSliderArrows
Building blocks for testimonial blocks. Typically used via Testimonials01 or Testimonials02 rather than directly on pages.
Adding to a page
---
import Wrapper from "@/components/containers/Wrapper.astro";
import Button from "@/components/elements/Button.astro";
import Text from "@/components/elements/Text.astro";
---
<section class="py-20">
<Wrapper>
<Text tag="h2" variant="displaySm">Custom block</Text>
<Button href="/contact/" class="mt-6">Contact</Button>
</Wrapper>
</section>