first commit
This commit is contained in:
35
sn-infographic/references/layouts/top-image-bottom-text.md
Normal file
35
sn-infographic/references/layouts/top-image-bottom-text.md
Normal file
@@ -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
|
||||
Reference in New Issue
Block a user