first commit

sn-infographic/references/layouts/top-image-bottom-text.md

@@ -0,0 +1,35 @@
+# top-image-bottom-text
+
+Image at the top, text content below.
+
+## Structure
+
+- Upper half (50-70%): full-width image or illustration
+- Lower half (30-50%): text content area
+- Clear horizontal dividing line or natural transition
+- Text area may include title, body, and CTA
+
+## Best For
+
+- Article or blog post covers
+- Product announcements with visual lead
+- Educational cards with concept illustration
+- Social media posts
+
+## Visual Elements
+
+- Dominant image filling the top zone
+- Clean text area below with good typography
+- Optional color band or shape as transition element
+
+## Text Placement
+
+- Title immediately below the image
+- Body text beneath the title
+- CTA or caption at the bottom
+
+## Recommended Pairings
+
+- `corporate-memphis`: Clean editorial cards
+- `storybook-watercolor`: Illustrated story cards
+- `paper-collage`: Friendly educational posts