Components Marketing templates
Marketing
Introduce a campaign with a clear headline, optional supporting copy, and a cobalt CTA label.
On this page
Examples
The complete hero seed with a headline, supporting copy, and CTA label. The button is presentation only: the package exposes no link or click handler.
Preview setting only: fitting scales the complete 800 px wide hero. Actual size preserves the copied wrapper and allows horizontal scrolling. The hero has content-driven height, not a fixed aspect ratio.
Preview only: surrounding canvas and spacing. All metrics are illustrative.
'use client';
import { MarketingHero } from '@coreux/ui';
export default function Default() {
return (
<div style={{ width: 800 }}>
<MarketingHero
eyebrow="Strategy. Design. Engineering. Working in concert."
headline="Good software starts with better questions."
underline="questions."
body="An illustrative campaign: turn ambiguity into clarity, then build software around the outcomes that matter."
ctaLabel="Start a project"
/>
</div>
);
}
Content & hierarchy
Use MarketingHero to introduce one campaign: a brief eyebrow, one headline, and optional supporting body text. The Default seed includes all three levels and a CTA label; NoCta leaves just the eyebrow and headline. Optional fields are omitted only when undefined, so an empty string still creates its element.
The headline is plain text. The first exact, case-sensitive match of underline receives a cobalt stroke. A missing match leaves it unchanged. Keep the phrase nonempty and short: the inline-block around a match keeps that phrase together and can make a long phrase harder to fit.
The bundled The Seasons headline uses 60 px bold type with a 63 px line height; body copy uses Switzer at 18 px with relaxed leading. The eyebrow uses the small uppercase mono style. These values assume a 16 px root. The package supplies the warm-ivory surface, navy headline, slate body, 48 px padding, and 24 px hero radius. It exposes no photo, tone, or background prop.
The CTA is presentation only. ctaLabel creates a real, keyboard-focusable button, but the API has no href, onClick, disabled, or action prop. Activating it does nothing at this revision. Omit ctaLabel when an inert button is inappropriate; provide a separate real link or application action beside the hero.
For working destinations in this reference, browse components or open installation. Do not put an anchor inside the generated button or imply that its label configures navigation.
Props
Types and required flags come from the installed public declarations. No props have destructuring defaults; authored explanations are checked against the installed implementation.
| Prop / type | Default | Description |
|---|---|---|
eyebrowstring | undefined | Optional uppercase label above the headline. Omitted only when undefined; keep it brief. |
headlineRequiredstring | Required | Required plain text rendered in an h1 with the bundled display font. There is no length validation or automatic text fitting. |
underlinestring | undefined | The first exact, case-sensitive substring of headline receives a cobalt underline. No match leaves the headline unchanged. Prefer a short, nonempty phrase. |
bodystring | undefined | Optional supporting paragraph. Uses Switzer at 18 px and a 36 rem maximum width. Omitted only when undefined. |
ctaLabelstring | undefined | Optional text in a real type="button" element. Presentation only: there is no href, onClick, disabled, or navigation prop. Omitted only when undefined. |
classNamestring | undefined | Classes merged on the outer section. Does not forward arbitrary HTML or ARIA attributes. No tone, background, photo, or children prop is exposed. |
Accessibility & layout
The root is a section containing an h1, optional eyebrow and paragraph, and optional button. Account for that h1 in your page outline. The underline is decorative and hidden from assistive technology. Arbitrary HTML and ARIA attributes are not forwarded, so add any needed accessible name or surrounding landmark in your consuming layout.
The hero has content-driven height and no fixed aspect ratio. It uses fixed padding and type sizes with no breakpoints or automatic text fitting. Its headline has a 48 rem maximum width and its body a 36 rem maximum width, but a narrow container does not reduce the typography. Long words or underline phrases can overflow.
Both complete examples include an 800 px width wrapper so these headlines remain intentional compositions. Fit to canvas visually scales that whole render. Actual size keeps 800 px and provides contained horizontal scrolling. These controls do not change the copied source or make the component responsive. If you adapt the width, recheck your actual text, padding, and hierarchy at the final size.
For a portrait opening frame use ShortformCover; for a sequence use SocialCarouselSlide. HandDrawnUnderline explains the supporting motif.
Consumer setup
Browsing, previews, and copying are public. Installing the private @coreux/ui package requires repository read access and permission to use the bundled CoreUX brand fonts.
Follow the one-time installation guide for the pinned Git dependency, Tailwind v4 stylesheet setup, fonts, and troubleshooting. Keep the 'use client' directive in each example; no provider is required.
The quick start walks through a copied StatBlock in a minimal app.
Source & revision
This reference targets @coreux/ui version 0.1.0 at 06f42fd. Types come from its installed declarations; explanations and defaults are checked against this implementation.
Revision and upgrade notes · Contribution and coverage guide
View MarketingHero source (repository access required)Seed examples accounted for
Default and NoCta each have a matching complete file. Both retain their seed headlines, underlined phrases, eyebrows, and optional-field choices. Default replaces promotional body copy with explicitly illustrative campaign copy. Each file adds its own 800 px wrapper; no image asset is required. The package, fonts, and CTA behavior are unchanged.