Postcards: promotional page fragments and hero treatments
Not every design decision happens at the page level. Some of the most important work in front end product design happens in the individual sections that make up a page: the hero treatment that sets the tone, the promotional block that frames a product benefit, the visual message card that delivers a single idea with clarity and impact. Postcards are Vantage Design's focused collection of these smaller, self-contained design specimens.
A postcard is a compact, self-contained page fragment designed to communicate a single message or present a single visual concept. Unlike a full page template that orchestrates multiple sections into a narrative flow, a postcard focuses on one moment: the first impression of a hero section, the persuasive pitch of a promotional block, or the concise delivery of a feature highlight.
Postcards exist because the section level is where most of the visual design work actually happens during a landing page project. Teams spend hours choosing a page template and then spend days customizing the individual sections within that template. The hero gets the most attention because it carries the most weight. The promotional blocks get iterated on because they need to balance information density with visual appeal. The feature sections get reworked because every product has a different story to tell within the same structural container.
By isolating these section-level design problems into standalone specimens, postcards make it possible to evaluate, compare, and refine individual treatments without the overhead of working within a complete page template. You can study how a hero treatment handles different headline lengths. You can compare how two different promotional block layouts balance image and text. You can see how a feature card grid adapts from three columns to one without loading the entire page context.
Setting the page tone in the first viewport
Most hero sections get underbuilt. A large image, a headline, a button. Done. The visual is whatever the designer had available. The headline is a company tagline that nobody tested. The button says "Get Started" and goes to the sign-up page. This works when the visitor already knows what they want. It fails for everyone else.
The hero postcards in this collection treat the section as a design problem with genuinely competing requirements. The headline needs prominence without overwhelming the supporting copy. The visual needs to reinforce the message without competing with the text for attention. The CTA needs to be visible without feeling aggressive. And all of those relationships need to hold across every viewport width, not just the one the designer happened to be working in.
Each hero postcard demonstrates a different approach to balancing these requirements. Some use a split layout with text and image side by side, which works well for products that need visual proof next to the value proposition. Others use a full-width background treatment with overlaid text, which creates more visual drama but requires careful contrast management. Still others use a stacked layout with the headline, supporting copy, and call to action centered above a contained image, which prioritizes readability over visual impact.
The choice between these approaches is not aesthetic. It depends on the content: how long the headline is, how much supporting copy is needed, whether the visual element is a product screenshot, an illustration, or a photograph, and whether the call to action is a simple button or a more complex interaction like an email signup or a demo request form. The postcards show how each approach handles different content scenarios so that teams can make an informed choice before committing to a hero pattern.
Framing product benefits and service descriptions
The sections between the hero and the footer do most of the persuasive work, and they are also the sections most often built without much structural thought. Alternating image-text blocks, three feature cards in a row, a centered pull-quote. The layouts are familiar because they work, but they break when the content does not fit what the designer assumed: a twelve-word feature name, a supporting paragraph that runs long, a case where one block needs visual emphasis without disrupting the rhythm of the rest.
Promotional block postcards in this collection address those stress cases directly. Each one demonstrates how a particular layout handles content at the edges — different heading lengths, different image proportions, different amounts of supporting copy — not just the polished version where everything fits neatly.
The main layout approaches covered here are alternating (image and text switch sides between consecutive blocks), grid (three or four feature cards sharing a row), and full-width emphasis (a single high-priority block spanning the full viewport). The postcards show each approach at realistic content lengths, because a layout that only works when the copy is exactly what you planned is not a layout you can actually use.
Single-idea containers for focused communication
Cards are the most overused pattern in modern web design and also the most poorly implemented. The default version is a bordered box with an icon, a heading, and a short paragraph. It functions as a layout container. What it rarely does is communicate anything with much clarity, because the format has become so generic that it no longer carries meaning on its own.
The message card postcards here are built around a specific question: what should the visual element actually do? In the default pattern, an icon sits above the heading and labels the category. In a more deliberate treatment, the visual element reinforces the specific message — a background treatment, a typographic emphasis, an inset image that the content wraps around. That difference changes how readers process the card and how it holds up when placed in a grid next to seven identical-looking neighbors.
These postcards also work through the responsive behavior, which is where most card implementations fall apart. Aspect-ratio-constrained images, grid reflow from three columns to one, and height alignment between cards with different content lengths are all demonstrated in the specimens. The goal is to show what a card needs to handle structurally, not just how it looks at a single viewport width.
Postcards and page templates serve different purposes but complement each other directly. A page template like Identity or Exodus defines the overall structure of a landing page: the section order, the navigation pattern, the footer layout, and the vertical rhythm that ties everything together. Postcards provide refined alternatives for the individual sections within that structure.
The practical workflow is straightforward. Start with a page template that matches your overall layout needs. Then examine the postcards for section-level treatments that better fit your specific content. If the Identity hero section does not quite work for your headline length, check the hero postcards for an alternative treatment. If the default feature grid does not accommodate your content structure, look at the promotional block postcards for a layout that handles your specific requirements better.
This is not about mixing and matching incompatible design elements. All postcards use the same spacing scale, typography tokens, and responsive breakpoints as the full page templates. Dropping a postcard section into an Identity or Exodus layout does not create a visual inconsistency. The design language is shared because the postcards are designed as part of the same product family, not as independent fragments from different design systems.