webdevpuneet.com

Related Snippets

63 in Heroes category
54–59 of 60

Minimal Hero

Coming Soon Hero

Agency Hero

Portfolio Hero

App Download Hero

Gradient Mesh Hero

Minimal Hero — Free HTML CSS Clean Landing Snippet

Minimal Hero · Heroes · Plain HTML & CSS · Live preview

CategoryHeroes
TagsCSS OnlyLanding Page

Copy & paste

Source Code

<section class="hero">
  <nav class="nav">
    <span class="nav-brand">Brand</span>
    <div class="nav-links">
      <a href="#">Product</a>
      <a href="#">Pricing</a>
      <a href="#">Docs</a>
    </div>
    <a href="#" class="nav-cta">Get started</a>
  </nav>

  <div class="content">
    <div class="kicker">For professional teams</div>
    <h1 class="headline">
      The clarity your<br>workflow deserves.
    </h1>
    <p class="sub">Stop juggling tools. One focused workspace for every team — designed to reduce noise and surface what matters.</p>
    <div class="cta-row">
      <a href="#" class="btn-fill">Start for free</a>
      <a href="#" class="btn-text">See how it works →</a>
    </div>
  </div>

  <div class="rule"></div>

  <div class="proof-row">
    <div class="proof-item"><strong>12k+</strong><span>Teams</span></div>
    <div class="proof-div"></div>
    <div class="proof-item"><strong>4.9 ★</strong><span>Rating</span></div>
    <div class="proof-div"></div>
    <div class="proof-item"><strong>99.9%</strong><span>Uptime</span></div>
    <div class="proof-div"></div>
    <div class="proof-item"><strong>SOC 2</strong><span>Compliant</span></div>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Inline nav: brand left, links centre (flex:1), CTA button right — no separate nav bar
Nav link hover: colour transition #64748b→#0f172a for subtle depth cue
kicker label: uppercase, letter-spacing:1.5px, accent colour — context layer above headline
Fluid headline: clamp(36px,6vw,64px) + letter-spacing:-1.5px — no media query needed
Dual CTA: filled dark button (convert) + text link with arrow (explore)
Horizontal rule: thin 1px separator between hero content and proof stats
Proof stats: 4 metrics with 1px dividers — adoption, quality, reliability, compliance
Pure HTML and CSS — no JavaScript, no background colour, typography-first

About this UI Snippet

Minimal Hero — Clean White Layout with Inline Nav, Kicker, Large Headline & Proof Stats

Screenshot of the Minimal Hero snippet rendered live

The minimal hero is the counter-movement to flashy gradient and mesh backgrounds. When your product speaks for itself, a clean white layout with strong typography communicates confidence and professionalism — the same approach used by Notion, Linear, Vercel, and Stripe at different points in their positioning. This snippet provides a complete minimal hero with an inline navigation bar, a kicker label, a large fluid headline, a subtitle, dual CTAs, and a proof stats row — all in plain HTML and CSS with zero JavaScript required.

The inline navigation

The nav sits at the top of the hero column with display: flex and a bottom border that separates it from the main content. Brand name on the left, navigation links in the centre (using flex: 1 to push them away from the brand), and a dark CTA button on the right. The nav links use colour #64748b in resting state and transition to #0f172a on hover — a subtle depth cue that does not distract from the primary CTAs.

Typography-first headline

The headline uses font-size: clamp(36px, 6vw, 64px) for fluid scaling and letter-spacing: -1.5px for the tight display type look used on premium SaaS homepages. The kicker label above uses uppercase, wide letter-spacing, and the accent colour — a three-layer hierarchy: kicker (context) → headline (value prop) → subtitle (explanation).

The dual CTA pattern

Two CTAs offer different commitment levels: the filled button ("Start for free") for users ready to sign up, and the text link ("See how it works →") for users who need more information first. The arrow on the text link signals navigation rather than action. This two-CTA pattern consistently outperforms single-CTA layouts for products with a non-trivial onboarding flow.

The proof stats row

Below a horizontal rule (signalling the end of the hero and start of social proof), four stats (12k+ Teams, 4.9 ★, 99.9% Uptime, SOC 2) are separated by 1px dividers. Each stat has a bold large number and a small uppercase label. This row addresses four common objections (adoption, quality, reliability, security) in one compact strip.

Why no background colour or image

The white background makes the page feel faster and cleaner. It also maximises contrast for the dark headline and grey subtitle. When combined with a product screenshot or illustration section below, the hero white acts as negative space that makes the demo section feel like it is floating above the page.

Step by step

How to Use

  1. 1
    Update the brand name and nav linksReplace "Brand" in the .nav-brand span with your product name. Edit the three .nav-links anchor texts (Product, Pricing, Docs) and their href values to match your site structure.
  2. 2
    Update the kicker, headline, and subtitleChange the .kicker text to your audience or positioning ("For indie developers", "For design teams"). Rewrite the h1 headline to your value proposition. Update the .sub paragraph with your benefit statement.
  3. 3
    Wire the CTA buttonsSet href="#" on .btn-fill to your signup URL and on .btn-text to your demo, video, or docs page. Change the button labels to match your primary action ("Get started", "Try free for 14 days", "Book a demo").
  4. 4
    Update the proof statsReplace the four .proof-item values (12k+, 4.9 ★, 99.9%, SOC 2) with your actual metrics. Choose stats that address common purchase objections: team size, rating, uptime, compliance certification, or years in business.
  5. 5
    Change the accent colourReplace #6366f1 in the CSS (used for the .kicker text) with your brand accent colour. Also update #0f172a (headline, dark button, nav CTA) if your brand uses a non-black primary.
  6. 6
    Export in your formatClick "HTML" for a standalone file to paste into your site, "JSX" for a React component, or "Tailwind" for a React + Tailwind CSS version.

Real-world uses

Common Use Cases

Premium SaaS and productivity tool homepages
The clean white, tight typography, and proof stats row is the standard layout for premium B2B SaaS products — for a product-screenshot variant, see the product hero. Linear, Notion, and Vercel all use this pattern: let the headline carry the weight, prove with numbers, convert with two CTAs.
Developer tool and API product landing pages
Developer audiences distrust heavy marketing pages. The minimal white layout signals that the product is confident enough not to need visual tricks. Add a terminal window or code snippet section directly below this hero for a developer-first impression.
Consulting firm and professional services homepage heroes
Strategy, legal, financial, and HR services use minimal typographic heroes to communicate trustworthiness and clarity. Replace product stats with case study stats (40+ clients, 8 years experience, $2B+ managed). The professional tone matches high-ACV services.
Rebranding and product pivot announcement pages
A clean hero with a new headline is the fastest way to communicate a repositioning. The minimal layout draws full attention to the new value proposition without visual noise. Pair with a "Previously known as..." note for existing users.
Study three-layer typographic hierarchy and dual CTA pattern
The kicker → headline → subtitle three-layer hierarchy is one of the most studied copywriting structures in landing page design. This snippet lets you practice the HTML structure and CSS implementation. The dual CTA (filled + text link) pattern teaches the principle of offering two commitment levels simultaneously.
E-commerce and DTC brand homepage hero sections
Direct-to-consumer brands increasingly use minimal white heroes to differentiate from cluttered competitor pages. The headline-forward layout puts the brand story first, the proof stats provide social credibility, and the clean nav drives focused exploration.
Related: Search-Engine-Style Hero
See the Search-Engine-Style Hero for a related heroes pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

After the .proof-row div, add a new section with a shadowed screenshot: <div style="padding: 40px 0;"><img src="screenshot.png" alt="Product screenshot" style="width:100%; border-radius:16px; box-shadow: 0 24px 80px rgba(0,0,0,0.12); border: 1px solid #e2e8f0;" /></div>. The white hero background creates a clean negative space that makes the screenshot appear to float.

Add position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); to the .nav CSS rule. The sticky positioning keeps it visible on scroll. The backdrop-filter creates a frosted glass effect as content scrolls behind the nav bar. Remove border-bottom and add box-shadow: 0 1px 0 rgba(0,0,0,0.06) for a cleaner sticky state.

See the Hamburger Nav snippet in the Navigation category for a complete implementation. Add a hamburger button that appears on mobile via @media (max-width: 640px) { .nav-links { display: none } .burger { display: flex } }. The existing nav-brand and nav-cta stay visible. The hamburger toggles a mobile dropdown menu.

Click "JSX" to download. Use it as a server component in app/page.tsx — no "use client" needed since there is no JavaScript. For the nav CTA, use Next.js <Link href="/signup"> instead of <a>. For the proof stats, fetch real metrics from your database in an async server component and pass them as props: <MinimalHero teams={totalTeams} rating={avgRating} />.