Contact Bar Herov1.0.1

Use this Skill to create ui visuals.

5.00 downloads0 likes0 saves
$4.99
What do I get when I buy this Skill?

Contact Bar Hero is a ready-to-paste hero section, delivered as editable source with its usage example. It ships with entrance motion that settles rather than bounces and portraits and photography already placed, not grey boxes. Colour, type and radius live as tokens you edit once for the whole block.

Picked most often by

Solo FounderApp DeveloperUI Designer

Updated Aug 29, 2026

Contact Bar Hero result preview

Runs in

Claude CodeClaude Desktop / CoworkCodex / ChatGPTCursorGitHub CopilotOpenClawHermesOpenCodeKilo Code

Generates with

Host Agent LLM

User reviews

Loading reviews…

What you get

  • The full source for Contact Bar Hero — the component file plus a runnable usage example, ready to paste and edit.
  • A written visual contract: palette, type scale, radius, icon stroke and motion timings, all as tokens you edit in one place.
  • Portraits and photography ship with the block, already placed and stored locally rather than fetched.

Good fit

  • You need a hero section and want a finished one rather than a blank canvas.
  • You want the first screen to look complete on render, with imagery already placed.
  • You want readable source you can edit, not another dependency to keep upgraded.

Not for

  • Teams already running a mature design system — this palette and type scale will fight yours.
  • Anyone wanting a versioned npm package; this hands you source to maintain yourself.
  • Projects needing navigation, forms, auth or checkout — none of which this block covers.
Brand IdentityProduct Launch & App GrowthDigital Publications & Web PagesCreate UI VisualsBuild Website PageBuild Landing PageEditable OutputVisually PolishedBeginner-friendlyWarm NeutralTeal AccentKineticPhotographic

About this Skill

You say/bs-hero-contact-bar Put this hero section at the top of my landing page and swap in my product name.

FAQ