Components Marketing templates
Shortform
Open a shortform story with one of six 9:16 cover layouts, from a headline or expert viewpoint to data and announcements.
On this page
Examples
Lead with one clear thought. The package supplies the technical collage decoration; no external asset is needed.
Preview setting only: fitting scales the complete 360 × 640 px, 9:16 cover. Actual size preserves the copied wrapper and allows horizontal scrolling. Scaling does not change component props or make the typography responsive.
Preview only: surrounding canvas and spacing. All metrics are illustrative.
'use client';
import { ShortformCover } from '@coreux/ui';
export default function TextHook() {
return (
<div style={{ width: 360 }}>
<ShortformCover
variant="text-hook"
eyebrow="Strategy"
eyebrowDot="#2457F5"
headline="AI is not the strategy."
underline="strategy."
/>
</div>
);
}
Choosing a variant
All six variants require variant, eyebrow, and headline. They share a preferred 9:16 frame, a corner mark, and a text wordmark. Choose the content structure before adding optional decoration.
- text-hook needs no additional content. A built-in TechnicalCollage sits below the headline.
- expert-pov adds an optional caption and photoSrc. Without a photo, the package displays a halftone in the image area.
- data-led requires both a trend array and a stat string; statCaption is optional. The number is independent of the chart data.
- systems-explainer adds an optional supportingLine beneath the headline.
- case-study requires a stats array. Every item needs value and label; the cover stacks small StatBlocks.
- announcement adds optional supportingLines. These lines are supporting text, not links or a semantic list.
This component renders one static cover. It does not generate a video, provide playback, navigate between covers, or expose a CTA. For a sequence, see SocialCarouselSlide; for a web campaign introduction, see MarketingHero.
Content & hierarchy
Keep one thought in focus
The headline uses bold The Seasons at 30 px with a 33 px line height. Eyebrows and supporting lines use the small uppercase mono style; captions and numbers use Switzer. As a documentation starting point at 360 px wide, use a 4–7 word headline, a brief eyebrow, up to three concise metrics, or up to three supporting lines. These are authored recommendations, not package limits.
underline is an exact, case-sensitive substring of headline. Only the first match is decorated, and a missing match leaves the text unchanged. The matched phrase is kept in an inline block; prefer one short, nonempty phrase so it does not obstruct wrapping.
Photos and built-in assets
The expert-pov seed uses the built-in halftone fallback and needs no photo download. If you supply photoSrc, provide a resolvable image URL or an asset in your consuming app and include that asset when sharing the example. The image is cropped with object-fit: cover into a square that is two-thirds of the content width. There is no focal-point control, image loading UI, or broken-image fallback; only an undefined photoSrc selects the halftone.
The package fixes the image alt attribute to an empty string and exposes no alt prop. Treat the image as decorative, and put speaker identity or essential context into caption or nearby accessible text. Text-hook's collage, corner marks, underlines, and the wordmark are supplied by the package. All six copied examples are self-contained apart from the documented package and stylesheet.
Explain numbers and choose deliberate colors
The data-led layout embeds a 220 × 80 px MiniChart. Each trend series has a CSS color and numeric points. The scale spans the combined data and includes zero; point spacing is calculated separately for each line. Supply finite values and at least two points per visible line, align comparison intervals, and describe units and series in text. Empty arrays and non-finite values are not validated. The graphic supplies no axes, legend, or generated explanation.
The copied example names its two illustrative seven-week indices in accessible surrounding text and summarizes them in statCaption. Its 32% operational-time measure is separate from those indices. Replace illustrative values and comparison context before publishing. The case-study example includes three display-ready values, units, and explanatory captions; the cover forces every item's size to sm even if you pass another size.
tone changes text, underline, corner mark, and wordmark colors; it does not change the background. Pair ivory with a dark surface. background is a CSS backgroundColor, not a gradient or image. Trend colors, eyebrowDot, and the collage do not automatically adapt to tone. Reserve chart accents for storytelling and keep primary actions cobalt.
Props by variant
These tables resolve the installed discriminated union and its nested array items. Common requirements apply to every variant; each variant table lists its remaining fields. Required flags and types are generated, and authored defaults are checked against implementation.
| Prop / type | Default | Description |
|---|---|---|
eyebrowRequiredstring | Required | Required label above the headline; styled uppercase at 12 px. Keep it short enough to share a row with the corner mark. |
eyebrowDotstring | undefined | Optional CSS color for a decorative 8 px dot beside the eyebrow. Omitted when undefined; supply a color value, not a utility class. |
tone"ink" | "ivory" | "ink" | ink uses navy/slate text; ivory uses ivory/pale-steel text. Also changes the underline, corner mark, and wordmark. Does not choose the background or recolor the chart/collage. |
backgroundstring | undefined | CSS color passed to backgroundColor. Undefined selects warm ivory. Does not accept a gradient or image; pair it deliberately with tone. |
classNamestring | undefined | Classes merged onto the outer div. No arbitrary HTML/ARIA attributes or children are forwarded. |
headlineRequiredstring | Required | Required plain string rendered in an h2 at 30 px with fixed typography. No length validation, truncation, or auto-scaling. |
underlinestring | undefined | First exact, case-sensitive substring of headline. Cobalt for ink tone, ivory for ivory tone. No match leaves text unchanged; keep the phrase short and nonempty. |
text-hook
Use all required common props above, plus the fields below. Open the text-hook example.
| Prop / type | Default | Description |
|---|---|---|
variantRequired"text-hook" | Required | Required discriminant selecting this layout and its accepted fields. No default variant. |
expert-pov
Use all required common props above, plus the fields below. Open the expert-pov example.
| Prop / type | Default | Description |
|---|---|---|
variantRequired"expert-pov" | Required | Required discriminant selecting this layout and its accepted fields. No default variant. |
captionstring | undefined | Optional expert-pov paragraph above the image area. Keep speaker identity and meaningful image context here or in surrounding text. |
photoSrcstring | undefined | Optional URL for an img with fixed alt="". Cropped with object-fit: cover in a square two-thirds-width frame. Undefined uses a built-in halftone; broken URLs have no fallback. No alt or crop-position prop exists. |
data-led
Use all required common props above, plus the fields below. Open the data-led example.
| Prop / type | Default | Description |
|---|---|---|
variantRequired"data-led" | Required | Required discriminant selecting this layout and its accepted fields. No default variant. |
trendRequiredTrendSeries[] | Required | Required TrendSeries array rendered as a fixed 220 × 80 px MiniChart. Supply finite numbers, at least two points per visible line, and meaningful text context; no runtime validation, axes, legend, or series labels. |
statRequiredstring | Required | Required display-ready string in 36 px bold text. Supply units and formatting yourself. It is independent of trend data; the package performs no calculation. |
statCaptionstring | undefined | Optional text beneath the stat. Explain the measure, time period, and relation to the trend; this is not generated from the arrays. |
Each trend series
| Prop / type | Default | Description |
|---|---|---|
colorRequiredstring | Required | Required CSS stroke color. Choose a distinguishable chart accent with sufficient contrast against the cover background. |
pointsRequirednumber[] | Required | Required numeric samples in order. All series share a scale that includes zero and their combined min/max. Use finite values and at least two samples; a single sample produces no visible segment. Comparable series should use aligned intervals. |
systems-explainer
Use all required common props above, plus the fields below. Open the systems-explainer example.
| Prop / type | Default | Description |
|---|---|---|
variantRequired"systems-explainer" | Required | Required discriminant selecting this layout and its accepted fields. No default variant. |
supportingLinestring | undefined | Optional systems-explainer line rendered in uppercase 12 px mono text. It wraps naturally; no character limit or truncation is enforced. |
case-study
Use all required common props above, plus the fields below. Open the case-study example.
| Prop / type | Default | Description |
|---|---|---|
variantRequired"case-study" | Required | Required discriminant selecting this layout and its accepted fields. No default variant. |
statsRequiredOmit<StatBlockProps, "tone">[] | Required | Required array of StatBlock items stacked vertically. The cover forces tone and size="sm". Use unique labels and a small number of concise metrics; no count validation. |
Each stats item
| Prop / type | Default | Description |
|---|---|---|
valueRequiredstring | Required | Display-ready text. Format signs, currency, separators, and precision before passing it. |
unitstring | undefined | A smaller suffix beside the value, such as %, x, or M. Omitted when undefined. |
labelRequiredstring | Required | A concise name for the metric, rendered visually in uppercase. |
captionstring | undefined | Optional context beneath the label. Omitted when undefined; an empty string still renders a paragraph. |
size"sm" | "lg" | "sm" (cover override) | Accepted by the item type, but overridden by size="sm" in ShortformCover. The cover always uses an 18 px value and 14 px unit, regardless of this field. |
classNamestring | undefined | Classes merged onto the outer div with the package cn utility. Does not forward arbitrary HTML or ARIA attributes. |
announcement
Use all required common props above, plus the fields below. Open the announcement example.
| Prop / type | Default | Description |
|---|---|---|
variantRequired"announcement" | Required | Required discriminant selecting this layout and its accepted fields. No default variant. |
supportingLinesstring[] | undefined | Optional array of announcement lines, rendered in uppercase 12 px mono text. Use short, unique strings (also React keys). No count or length validation. |
Accessibility & layout
The root is a div with an h2 headline and real text content. It is not a story player, image export, or automatically named region. Add suitable surrounding semantics for your page. The component does not forward arbitrary HTML or ARIA attributes. Underlines, halftones, corner marks, and collage graphics are hidden from assistive technology; the wordmark is text, not a link.
The chart exposes an image named “Trend chart,” without labels for its values or series. A meaningful adjacent explanation is the consumer's responsibility. Case-study metrics are paragraph text rather than a data table. The static template has no interaction or animation controls.
The cover uses width: 100%, a preferred 9:16 aspect ratio, 28 px padding, fixed typography, and hidden overflow. It has no responsive breakpoints, automatic text scaling, pagination, or content validation. Excessive text can grow the layout or be clipped; the ratio alone cannot guarantee a good composition.
Every copied example supplies a 360 px wrapper. The curated content fits a 360 × 640 px cover. Fit to canvas scales the complete render visually while preserving that ratio; Actual size keeps its dimensions and permits contained horizontal scrolling. Neither changes the source or component props. Recheck the full headline, caption, chart, and wordmark when changing the width or content.
For lower-level composition, read StatBlock, HalftoneCircle, and TechnicalCollage.
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 ShortformCover source (repository access required)Seed examples accounted for
TextHook, ExpertPov, DataLed, SystemsExplainer, CaseStudy, and Announcement each map to a complete file and their original variant. Headlines and underlined phrases are retained. The seeds' padded 280 px preview wrappers are replaced by copied 360 px wrappers so the chart, captions, and wordmark have practical room in a 9:16 composition.
ExpertPov retains its asset-free halftone fallback, with an explicitly illustrative caption and an ivory dot visible on navy. DataLed retains both seven-point arrays; violet replaces the coral line for clearer chart contrast, and captions identify the illustrative measures. CaseStudy adds units/comparison context and expresses the delivery multiplier as 2.3× rather than an ambiguous +2.3×. SystemsExplainer and Announcement use navy instead of the seeds' cobalt/coral surfaces so the fixed pale-steel supporting text remains legible. These are example adaptations; the installed components are unchanged.