alignment: center — caption below
'><rect width='12' height='24' fill='%23eef0f3'/><rect x='12' width='12' height='24' fill='%23f5f6f8'/></pattern></defs><rect width='1600' height='900' fill='url(%23p)'/><text x='800' y='450' text-anchor='middle' font-family='sans-serif' font-size='42' fill='%236b7280'>16 : 9 placeholder</text></svg>)
The center variant is the default. Image sits block-centered within the 65ch reading column. Width and height are required to prevent CLS.
alignment: inline-left (floats left within prose)
'><rect width='12' height='24' fill='%23eef0f3'/><rect x='12' width='12' height='24' fill='%23f5f6f8'/></pattern></defs><rect width='1200' height='900' fill='url(%23p2)'/><text x='600' y='450' text-anchor='middle' font-family='sans-serif' font-size='38' fill='%236b7280'>4 : 3 placeholder</text></svg>)
Floats to the left of prose with text wrapping right. Maximum 40% of the column width. On mobile (<768px) falls back to full-width to maintain legibility on narrow screens. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
alignment: inline-right
Floats to the right of prose with text wrapping left. Same 40% max-width + mobile fallback as inline-left. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
alignment: full-width — caption overlay
Full-width spans the content column. Caption overlay sits at the bottom with a gradient backdrop for readability over varied image content.
Spec: data/design/components/image-positioning-system.yml
Reference: docs/design/previews/hypnonews/design-outputs/components/image-positioning-system.html
YMYL policy: NO AI-generated imagery — use Freepik license library (founder memory)