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
The hero section is the single most consequential design decision on any landing page. It determines whether a visitor continues scrolling or leaves. It establishes the visual language for the entire page. It communicates the primary message before any supporting content appears. Given this weight, it is surprising how many hero sections are treated as afterthoughts: a big image, a headline, a button, done.
The hero postcards in this collection treat the hero as a design problem with multiple competing requirements. The headline needs to be prominent without overwhelming the supporting copy. The visual element needs to reinforce the message without competing with the text for attention. The call to action needs to be visible without feeling aggressive. The responsive behavior needs to maintain these relationships across every viewport width, not just the one the designer happened to be looking at.
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 the heavy lifting of persuasion. These are the promotional blocks, feature highlights, and benefit statements that build the case for whatever the page is selling: a product, a service, a subscription, or simply continued attention. Postcards in this category focus on the design patterns that make these mid-page sections effective.
Effective promotional blocks share certain characteristics regardless of their visual treatment. They present one idea per block, not three ideas crammed into a single section. They use a clear visual hierarchy where the heading is immediately distinguishable from the supporting text. They include enough whitespace to separate the block from its neighbors without creating a sense of emptiness. And they handle varying content lengths gracefully, because the difference between a three-word feature name and a twelve-word feature name should not break the layout.
The promotional block postcards demonstrate several layout approaches. Alternating layouts switch the image-text relationship from left-right to right-left between consecutive sections, creating visual variety without introducing inconsistency. Grid layouts place three or four feature cards in a row, which works well for feature lists but requires careful management of card heights when content length varies. Full-width blocks use the entire viewport width to create visual emphasis for the most important mid-page message.
Single-idea containers for focused communication
A visual message card is the smallest unit of promotional design. It communicates one idea, one benefit, or one feature in a contained format that works both as a standalone element and as part of a larger grid or layout. Cards appear everywhere in modern web design, but most card implementations are generic containers styled with a border and a shadow. The message card postcards in this collection treat the card as a deliberate communication tool.
What makes a message card effective is the relationship between its visual element and its text content. An icon above a heading above a paragraph is the default card layout, and it works, but it is also the layout that every card on every website uses. The postcards here explore alternatives: cards where the visual element is a background treatment rather than a discrete icon, cards where the heading doubles as the visual element through typographic emphasis, and cards where the content wraps around an inset image for a more editorial feel.
Each card postcard is designed to work at multiple sizes. A card that looks good in a three-column grid should also look good when it reflowed into a single column on a narrow viewport. A card that uses an aspect-ratio-constrained image should handle different image proportions without layout shifts. These responsive considerations are baked into every postcard specimen because a card that only works at one size is not a useful building block.
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.