Heroes & Sections

Hero — App Device Frame

Product hero with a CSS-only browser or phone frame wrapping the screenshot.

Subscription Included with the Velocity Components subscription.

bash

$ velocityx add hero-device-frame

Built for astro.

Full docs for Hero — App Device Frame →

Needs a licence key — subscribe here, then velocityx loginonce.

astro v1.0.0

Hero — App Device Frame

Velocity App

Built for the browser, feels like native

A CSS-only browser chrome frame — no screenshot asset of a real device baked in.

Try it free View pricing

App preview

And it works great on mobile too

Download the app

App preview

Props

Name	Type	Required	Default
eyebrow	string	No
title	string	Yes
sub	string	No
headingLevel	1 \| 2 \| 3 \| 4 \| 5 \| 6	Yes
primaryCta	{ label: string; href: string }	No
secondaryCta	{ label: string; href: string }	No
image	string	No
imageAlt	string	No	'Application screenshot'
device	'browser' \| 'phone'	No	'browser'
className	string	No	''

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text

components/velocity/hero-device-frame/HeroDeviceFrame.astro

Using the Hero — App Device Frame component

Install it with velocityx add hero-device-frame. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

All 406 components

Hero — App Device Frame

Built for the browser, feels like native

And it works great on mobile too

Props

File this creates

Using the Hero — App Device Frame component

Related components