Heroes & Sections
Feature — Single Large Feature
Flagship single-feature section with heading, bullet list, CTA and a large visual.
$ velocityx add feature-single-large Built for astro.
Full docs for Feature — Single Large Feature →
Needs a licence key —
subscribe here, then
velocityx loginonce.
Flagship feature
A design system that actually holds across 40 forks
Every width, type scale and background mode is a token in main.css — never a hardcoded value in a component.
- Three canonical widths: v-wide, v-focus, v-reader
- Four background modes, used deliberately, never sprayed
- One tuning surface — port a brand by editing main.css, not components
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| eyebrow | string | No | ||
| title | string | Yes | ||
| description | string | No | ||
| headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | Yes | ||
| bullets | string[] | No | [] | |
| cta | { label: string; href: string } | No | ||
| image | string | No | ||
| imageAlt | string | No | '' | |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/feature-single-large/FeatureSingleLarge.astro Using the Feature — Single Large Feature component
Install it with velocityx add feature-single-large.
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.
Related components
More from Heroes & Sections.
Copy column paired with a one or two column checklist of benefits.
astroAccessible comparison table with a highlighted column and horizontal scroll on mobile.
astroFull-bleed brand-gradient CTA banner, the project's single-use-per-page gradient moment.
astroCentred call-to-action card with one or two buttons.
astro