Editorial vision statement with inline avatars
Warm cream background, serif-style centered paragraph where bold key phrases alternate with muted grey text, and small circular portrait photos are embedded inline within the running text. Paste into Bolt, Claude Code, Replit, or Lovable for brand vision sections, about pages, and mission statements.
About this vibe coding template
An editorial vision section built around a single centered paragraph. The background is a warm cream that signals editorial quality. The text is set in Georgia serif at a large reading size, with the paragraph alternating between dark black phrases (the key ideas) and muted grey phrases (the connective tissue). Three circular portrait images are embedded inline within the text flow using display: inline-block, so they sit at the baseline of the text and break the usual separation between image and copy. The visual effect is that the people depicted feel woven into the vision itself rather than decorative additions. The layout is minimal: a small eyebrow label above the paragraph. Paste the template into any vibe coding tool and replace the copy with your own vision statement, swapping the inline image sources to your own team or community photos.
Common questions about this template
How do I change the inline images?
Ask your vibe coding tool to update the src attribute on each avatar img element inside the paragraph. Replace them with your own team or community portrait URLs. Square or portrait-crop images cropped to the face work best at the 32px circular size.
How do I change which words appear bold vs muted?
Ask Bolt, Claude Code, Replit, or Lovable to rearrange the span elements inside the paragraph. Spans without a class render as bold black text. Spans with the muted class render in light grey. Wrap any phrase in a muted span to de-emphasize it, or remove the span to make it prominent.
How do I change the font to match my brand?
The paragraph uses Georgia serif. Ask your vibe coding tool to update the font-family on the body element to your preferred typeface. If you are using a Google Font or a custom font in your Lovable or Bolt project, ask the AI to import and apply it here.
Use this AI coding template for
- ·Brand vision and mission statement sections on about pages and landing pages
- ·Company culture pages that mix editorial text with portrait imagery
- ·Impact sections where the human element should feel embedded in the narrative