Build an editorial spread layout component with drop caps, pull quotes, and figure captions
Views
730
Copies
175
Likes
109
Comments
0
Copy rate
24.0%
Prompt
Create a single-file React component named EditorialSpread that renders a long-form editorial article layout in the spirit of [publication_reference]. Use only Tailwind utility classes — no external CSS, no UI libraries.
The component must include:
- A header block with eyebrow kicker, headline (serif display), deck, byline, and date
- A generous drop cap on the first paragraph
- Two body typographic styles alternating through the article
- A pull quote that breaks the measure and commands attention
- A figure with a caption and credit in a supporting sans-serif
- A running footnote marker system with accessible hover/focus styles
- Responsive measure: ~[measure] max-width on desktop, fluid on mobile
Typography:
- Serif family: "Source Serif 4", Georgia, serif
- Sans family: ui-sans-serif system fallback
- Scale: display ~48px/1.05, body ~18px/1.6, caption ~12px/1.4
Keep the component self-contained and exported as default. No placeholder Lorem — write a real short passage about [topic].Customise this prompt
Fill in 3 variables to personalise this prompt
Preview
Create a single-file React component named EditorialSpread that renders a long-form editorial article layout in the spirit of [publication_reference]. Use only Tailwind utility classes — no external CSS, no UI libraries.
The component must include:
- A header block with eyebrow kicker, headline (serif display), deck, byline, and date
- A generous drop cap on the first paragraph
- Two body typographic styles alternating through the article
- A pull quote that breaks the measure and commands attention
- A figure with a caption and credit in a supporting sans-serif
- A running footnote marker system with accessible hover/focus styles
- Responsive measure: ~[measure] max-width on desktop, fluid on mobile
Typography:
- Serif family: "Source Serif 4", Georgia, serif
- Sans family: ui-sans-serif system fallback
- Scale: display ~48px/1.05, body ~18px/1.6, caption ~12px/1.4
Keep the component self-contained and exported as default. No placeholder Lorem — write a real short passage about [topic].