Stats With Logos (Dark)

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Stats With Logos (Dark) — Free Website Section Template

Stats & logos · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue

Tagsstatscounterlogosdarksplitmetricssocial proof
Updated October 20, 2026

What's included

Features

Heading, text and button beside four stat cards
Stat cards with icons and count-up numbers (GSAP + ScrollTrigger)
Formats kept while counting: $2.5M, 3.4×, 96%
Customer logo row with wordmarks or uploaded logos
Logo row and button can be switched off
Dark theme with a brand-coloured glow
Stacks on tablets; single-column cards on small phones
Export HTML, a ZIP, React or Vue

About this section

Stats With Logos (Dark) — Free Results Section Template

Stats With Logos packs your strongest proof into one dark section: a heading, short text and a button on the left; four stat cards with icons on the right whose numbers count up as they scroll into view; and a row of customer logos underneath. It answers "does this work?" and "who uses it?" at the same time.

Counting stat cards

Each card has an icon (from 60 Lucide icons), a big number and a label. Numbers count from zero with GSAP when they appear, keeping formats like $2.5M, 3.4× or 96%, and the real values are always in the HTML. Below-the-fold cards keep their real values until they're reached.

Logos that work without files

Customer logos start as clean icon-and-name wordmarks and can be replaced with uploaded SVG or PNG logos at any time; uploaded logos are lightened to suit the dark background. Switch the logo row off, or change its "Powering teams at" title.

Dark, glowing, on brand

A navy background with a cyan glow suits enterprise and technical products, and every colour is a theme token, so presets and your brand kit restyle it instantly. On tablets the columns stack; on small phones the cards go single-column.

Export it

Download HTML or a ZIP, copy a React or Vue component, or fork into My Code. For a light, minimal version, see Animated Stats Counters.

Stats With Logos (Dark): A dark “results” section: on the left a heading, short text and a button; on the right four stat cards with icons whose numbers count up as they scroll into view; underneath, a row of customer logos. It packs proof, scale and credibility into one block.

Why use it

Why Use the Stats With Logos (Dark)

📊
Proof and scale together
Results and recognisable customers in one block make a convincing case quickly.
↗
Numbers that land
Count-up animation draws attention to each figure as it appears.
🌙
Enterprise feel
A dark, glowing section adds weight and contrast to a light landing page.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading & button, stats and logos in the panel. Switch the logos on or off. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🏢
B2B landing page
Show time saved, cost reduced and adoption rate next to the logos of well-known customers.
💼
Sales and enterprise page
Pair hard ROI numbers with a "Read customer stories" button for buyers who need evidence.
📣
Annual results
Present a year in numbers with four headline figures and the partners who made it happen.
🧑‍💻
Developer platform
Show API calls served, uptime, response time and the companies building on your platform.

Got questions?

Frequently Asked Questions

Yes, on any device with JavaScript, once per page load as they come into view. People who prefer reduced motion see the final values straight away.

Yes. Upload an SVG or transparent PNG for each logo; it replaces the icon-and-name wordmark and is shown in a light grey that suits the dark background.

Yes. Choose a light colour preset or apply your brand kit; the cards, glow and text all follow the theme colours.

Up to four, in a two-by-two grid. For more, use Animated Stats Counters, which fits six.

It saves an editable copy of your Stats With Logos (Dark) in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.