Contact Bar Hero

Built for service homepages — studios, clinics, consultants — where the visitor's next step is getting in touch. Under the title and subtitle sits a rounded capsule contact bar in three parts: the email (with one-click copy; on success the icon turns into a check and the text reads "Copied" for 1.6 seconds), the phone (a tel: link) and an accent-coloured booking button. With dock on, once the visitor scrolls past the whole hero a compact contact bar springs in at the bottom of the viewport; close it with × and it stays hidden for the rest of the visit. On the right (or below, when centred) is a window-view placeholder you can swap for your own photo.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<ContactBarHero/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/contact-bar-hero.en.json

Usage

import { ContactBarHero } from "@/components/ui/contact-bar-hero";

<ContactBarHero
  eyebrow="栖木空間｜住宅與小店設計"
  title="把光留在家裡，從一通電話開始"
  subtitle="專做 20 坪以下的老屋翻新，三個工作天內回覆初步規劃。"
  email="hello@qimu-studio.example"
  phone="02-2345-6789"
  booking={{ label: "預約諮詢", href: "/booking" }}
  images={[{ src: "/images/studio-window.jpg", alt: "工作室窗邊" }]}
/>

Props

ContactBarHeroAction

ContactBarHeroImage

ContactBarHeroLabels

How it works

• Timing variable: --wb-contact-bar-hero-duration drives both the title group's entrance (600ms when unset) and the contact bar's hover lift (200ms when unset). The accent is --wb-contact-bar-hero-accent (default #0d9488 in light, #2dd4bf in dark); the booking button, eyebrow and focus ring all follow it.
• Entrance order: eyebrow, title, subtitle and CTAs fade in with y 16→0 in sequence (80ms stagger, cubic-bezier(0.22,1,0.36,1)); 300ms after the title starts, the contact bar rises from y 24 on a spring (stiffness 260, damping 24).
• Dock trigger: an IntersectionObserver watches the whole section, and the dock appears only once the hero has scrolled entirely above the viewport — a hero still below the fold on page load never triggers it. The closed state supports controlled (dismissed + onDismissedChange) and uncontrolled use.
• Copy uses navigator.clipboard.writeText; on non-HTTPS origins or when permission is denied it shows the copy-failed text. The dial link strips spaces and hyphens, keeping only digits and +.
• The component itself uses no vh units; its height comes from the content and minHeight.

Accessibility

• The root is a <section aria-labelledby> pointing at the title (as picks h1 or h2)
• The contact bar is role="group" with an aria-label; the dock is an <aside> with its own aria-label
• The copy button's aria-label includes the full email; the result is announced through a role="status", aria-live="polite" region
• Icon-only buttons in the dock all carry an aria-label; every button and link has a focus-visible ring, and buttons are type="button"
• With the system "reduce motion" setting on, the entrance becomes a 150ms fade, the contact bar no longer moves, the hover lift is off, and the dock fades in and out instead of sliding