Free Hero Sections — Usman Malik

For the Developer

How to Add a New Hero

Create a folder inside heroes/ — e.g. heroes/my-hero-name/

Add your files: index.html, style.css, script.js, preview.png, and readme.json

Edit manifest.json in the root — add a new entry with the id, folder, title, description, tags, and preview path.

Deploy. The gallery auto-reads the manifest and shows the new card immediately.

readme.json format

{
  "title": "Hero Name",
  "description": "What makes this hero special.",
  "tags": ["Dark", "Animated", "Minimal"],
  "preview": "preview.png",
  "files": ["index.html", "style.css", "script.js"],
  "instructions": "Any usage notes for the person downloading."
}

Free HeroSections

How to Add a New Hero

Free Hero
Sections