Source Code

<section class="ifc-hero">
  <div class="ifc-copy">
    <span class="ifc-eyebrow">Project management, simplified</span>
    <h1 class="ifc-h1">Everything your team<br>needs, nothing it doesn't</h1>
    <p class="ifc-sub">One board for tasks, docs, and conversations — so your team stops switching between five different tools to get one thing done.</p>

    <ul class="ifc-checklist" id="ifcChecklist">
      <li class="ifc-item"><span class="ifc-check">✓</span>Unlimited projects and boards</li>
      <li class="ifc-item"><span class="ifc-check">✓</span>Real-time collaboration, no lag</li>
      <li class="ifc-item"><span class="ifc-check">✓</span>Automations that replace busywork</li>
      <li class="ifc-item"><span class="ifc-check">✓</span>Works with tools you already use</li>
    </ul>

    <a href="#" class="ifc-cta">Start free trial</a>
  </div>

  <div class="ifc-visual">
    <div class="ifc-mock">
      <div class="ifc-mock-bar"><span></span><span></span><span></span></div>
      <div class="ifc-mock-row"><div class="ifc-mock-pill w1"></div><div class="ifc-mock-pill w2"></div></div>
      <div class="ifc-mock-card"><div class="ifc-mock-line l1"></div><div class="ifc-mock-line l2"></div><div class="ifc-mock-avatars"><span></span><span></span><span></span></div></div>
      <div class="ifc-mock-card"><div class="ifc-mock-line l1"></div><div class="ifc-mock-line l3"></div></div>
    </div>
    <div class="ifc-badge">✓ 14-day free trial</div>
  </div>
</section>

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Hero with Image and Feature Checklist — Free Snippet

Hero with Image and Feature Checklist · Heroes · Plain HTML, CSS & JS · Live preview

TagsLanding PageCSS Grid

What's included

Features

Two-column grid layout, collapses to a stacked single column under 860px
CSS-drawn product mockup panel — no external image dependency, easy to swap for a real screenshot
JavaScript-driven staggered checklist animation scales automatically with item count
Checkmark items fade and slide in with an incremental per-item delay
Floating trial badge overlaps the mockup corner as a trust-signal annotation
Responsive badge positioning — absolute on desktop, static and centered on mobile
Stacked avatar circles inside the mockup card for a realistic collaboration cue
No animation library — plain setTimeout and CSS transitions
Export as HTML file, React JSX, or React + Tailwind CSS
Mobile (375px), Tablet (768px), Desktop device preview buttons

About this UI Snippet

Hero with Image and Feature Checklist — Two-Column Layout with Staggered Checkmarks

Screenshot of the Hero with Image and Feature Checklist snippet rendered live

Most heroes make one promise ("the fastest way to X") and leave the visitor to infer what that means in practice. Pairing the headline with a short checklist of concrete capabilities — "unlimited projects," "real-time collaboration," "works with tools you already use" — closes that gap immediately, without forcing the visitor to scroll to a features section to find out what the product actually does.

The two-column grid

The hero uses display: grid; grid-template-columns: 1fr 1fr to place the copy column and the visual column side by side, collapsing to a single stacked column under 860px via a media query. This is the standard SaaS hero composition: copy that explains, paired with a visual that shows.

The CSS-drawn product mockup

Rather than depending on a real screenshot (which this snippet obviously cannot bundle), .ifc-mock is a small self-contained fake app window built entirely from divs — a three-dot title bar, two header pills, and two "card" blocks with line placeholders and stacked avatar circles. It is deliberately abstract rather than pretending to be a specific real product, so it drops in cleanly as a placeholder for your actual product screenshot: swap .ifc-mock's contents for a real <img> or an embedded <iframe> of your app once you have one.

The staggered checklist animation

The four .ifc-item list items start at opacity: 0 and transform: translateX(-10px). On load, JavaScript walks querySelectorAll('.ifc-item') and calls setTimeout for each one with an increasing delay — 150 + index * 130 milliseconds — adding an .in class that resets both properties with a CSS transition. The result is each checkmark line sliding and fading in slightly after the previous one, drawing the eye down the list in reading order rather than having all four items appear in one flat instant.

Why JavaScript drives the stagger instead of CSS `animation-delay`

A pure-CSS approach (nth-child(n) { animation-delay: ... }) works but hardcodes the delay math per item and is awkward to keep in sync if items are added or removed. Computing the delay as index * 130 in a single loop means adding a fifth .ifc-item to the list automatically staggers correctly with no CSS changes — the JavaScript scales with however many .ifc-item elements exist in the DOM.

The floating trial badge

.ifc-badge is positioned with position: absolute; bottom: -16px; right: 14px, deliberately overlapping the bottom-right corner of the mockup panel. This "escaping" element is a common trust-signal placement — it reads as an annotation on top of the product rather than another line of body copy, and its dark background makes it pop against the light mockup card beneath it. On mobile, the media query switches it back to static, centered positioning so it doesn't get clipped when the layout stacks.

Customizing the checklist items

Each .ifc-item is a plain <li> with a .ifc-check circle and a text node. Add, remove, or reorder items freely — the JavaScript staggers whatever it finds via querySelectorAll, so no index needs to be kept in sync by hand.

Swapping in a real product screenshot

Replace the entire .ifc-mock div's contents with an <img src="/your-screenshot.png" alt="Product screenshot"> sized to fill the same rounded container, or drop the CSS mockup panel and .ifc-badge overlay technique around a real <iframe> embed if you want a live, interactive product preview rather than a static image.

Build with AI

Build, Understand, Optimize, and Extend It With AI

Rather than hand-tuning stagger delays by trial and error, paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain why the checklist uses a JavaScript setTimeout loop with an index-based delay instead of hardcoded CSS animation-delay values on each list item, and what breaks about the CSS-only approach when items are added or removed. The same assistant is useful for adapting the mockup — ask it to swap the CSS-drawn product panel for a real screenshot with a subtle Ken Burns zoom, or to convert the fixed pixel delays into a stagger driven by an IntersectionObserver so the checklist only animates once it scrolls into view rather than immediately on page load. It can also help restructure the two-column grid into a three-column layout that adds a secondary proof panel, or generate the equivalent React version with the stagger driven by useEffect and per-item inline transition-delay styles instead of imperative setTimeout calls. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a two-column hero section in plain HTML, CSS, and vanilla JavaScript: a headline, subheading, and a checklist of feature bullets with checkmark icons on the left, and a self-contained CSS-drawn product mockup panel with a floating badge on the right — no external images, no library.

Requirements:
- A CSS grid with two equal columns on desktop that collapses to a single stacked column on narrow screens via a media query.
- A checklist of 4 short feature bullets, each with a small circular checkmark icon, that starts hidden (opacity 0, slightly offset horizontally) and staggers into view on page load — each item appearing a fixed amount of time after the previous one, computed from its index in a single loop rather than hardcoded per-item CSS animation-delay values, so the JavaScript scales automatically if items are added or removed.
- A right-column "product mockup" built entirely from styled div elements (a title bar with three dots, a couple of header pill shapes, and one or two card blocks with line placeholders and overlapping circular avatar shapes) meant as an abstract placeholder that can later be swapped for a real screenshot.
- A small badge element that overlaps the bottom corner of the mockup panel on desktop (absolute positioning) but becomes a normal, centered, static element once the layout stacks on mobile.
- A primary call-to-action button below the checklist with a hover lift effect.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSThe four checklist items fade and slide in one after another on load.
  2. 2
    Edit the headline and checklist textChange the .ifc-h1, .ifc-sub, and the text inside each .ifc-item in the HTML panel.
  3. 3
    Add or remove checklist itemsCopy or delete an .ifc-item <li> — the stagger timing recalculates automatically from however many items exist.
  4. 4
    Swap in a real screenshotReplace the .ifc-mock div contents with a real <img> or <iframe> of your product.
  5. 5
    Adjust the stagger speedChange the 150 base delay or the 130 per-item increment in the JS panel.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for a React component, or "Tailwind" for a React + Tailwind version.

Real-world uses

Common Use Cases

SaaS product landing pages
The classic "explain and show" hero composition — headline plus a scannable checklist of concrete capabilities beside a product visual.
B2B feature comparison heroes
Lead with what makes the product different in a fast-to-scan list rather than burying differentiators in a paragraph.
App download and onboarding pages
Pair with the App Store Badges Mockup Hero by placing badges beneath the checklist instead of the CTA.
Learn the JS-driven stagger technique
Study how setTimeout(index * delay) staggers any number of items without hardcoding per-item animation-delay values in CSS.
Free trial and signup-focused heroes
The trial badge and checklist combination directly targets the "what do I actually get" question a visitor has before signing up.
Pair with a stats counter row
Combine with the Hero with Animated Stat Counters beneath this section for both proof-of-scale and proof-of-features.

Got questions?

Frequently Asked Questions

On load, JavaScript selects every .ifc-item and calls setTimeout for each one with a delay of 150 + index * 130 milliseconds. Each callback adds an .in class that resets the item from opacity: 0 / translateX(-10px) to its normal state via a CSS transition, so later items in the list visibly animate in slightly after earlier ones.

A self-contained snippet cannot bundle a real product screenshot. The .ifc-mock panel is an abstract placeholder — a title bar, header pills, and card blocks with line and avatar placeholders — designed to convey "this is a product screenshot" at a glance while remaining trivial to delete and replace with a real <img> or <iframe>.

Copy an existing .ifc-item <li> in the HTML (including its .ifc-check span and text) and paste it into the .ifc-checklist list. The JavaScript re-queries every .ifc-item on load, so the new item automatically gets staggered in with the correct incremental delay — no index needs to be updated by hand.

On desktop, .ifc-badge is positioned absolutely so it overlaps the bottom-right corner of the mockup panel for a floating annotation effect. Once the layout stacks into a single column under 860px, absolute positioning risks the badge overlapping or clipping against other stacked content, so a media query resets it to static, centered flow instead.

Yes. Delete the .ifc-mock div\u2019s internal placeholder markup and replace it with an <iframe> pointing at a real embeddable demo or a video, keeping the same rounded-corner .ifc-mock container and .ifc-badge overlay for visual consistency.

No. The delay for each item is computed from its index at the moment the DOM is queried (querySelectorAll(".ifc-item")), which reflects the current DOM order. Reordering the <li> elements in the HTML automatically produces the correct new stagger order with no JavaScript changes.