diff --git a/docs/elements/courtyardoutline.mdx b/docs/elements/courtyardoutline.mdx
index 5fa2511..f3b51b9 100644
--- a/docs/elements/courtyardoutline.mdx
+++ b/docs/elements/courtyardoutline.mdx
@@ -75,3 +75,68 @@ export default () => (
)
`}
/>
+
+## Anchor Alignment Examples
+
+`` draws the polygon you provide in footprint coordinates.
+To make the footprint origin act like a specific anchor (center, top-left,
+bottom-right, etc.), translate the outline points accordingly.
+
+ {
+ const W = 10
+ const H = 6
+
+ const rect = [
+ { x: 0, y: 0 },
+ { x: W, y: 0 },
+ { x: W, y: H },
+ { x: 0, y: H },
+ ]
+
+ const translate = (outline, dx, dy) =>
+ outline.map((p) => ({ x: p.x + dx, y: p.y + dy }))
+
+ return (
+
+
+
+
+
+ }
+ />
+
+
+
+
+
+ }
+ />
+
+
+
+
+
+ }
+ />
+
+ )
+}
+`}
+/>