Components Marketing templates
Social
Tell one story across a sequence of slides. Choose a hook, headline, set of metrics, process, or closing invitation.
On this page
Examples
Open the story with one clear idea and an optional eyebrow.
Preview setting only: fitting scales the whole 3:4 slide. Actual size keeps the copied example’s dimensions and allows horizontal scrolling.
Preview only: surrounding canvas and spacing. All metrics are illustrative.
'use client';
import { SocialCarouselSlide } from '@coreux/ui';
export default function Hook() {
return (
<div style={{ width: 480 }}>
<SocialCarouselSlide
variant="hook"
index={1}
total={5}
eyebrow="Illustrative product story"
headline="Good software starts with better questions."
underline="questions."
/>
</div>
);
}
Choosing a variant
All five variants share the 3:4 frame, wordmark, slide counter, and footer.
- hook opens a story with a headline and optional eyebrow.
- stat-headline emphasizes an outcome. At this revision, its rendering is identical to hook; the name does not add a numeric value or statistic prop.
- stat-breakdown adds a required stats array under the headline, in a fixed three-column grid.
- process adds a required steps array, in a fixed two-column grid.
- cta adds a required ctaLabel and optional eyebrow. Its button has no action attached.
The examples form an illustrative five-slide sequence numbered 1–5. This component renders one slide; it does not provide a carousel track, swipe gestures, pagination, or slide navigation.
Content & color
Write for one fixed composition
As an authored starting point at 480 px wide, aim for a 4–9 word headline, a short eyebrow, and brief labels and captions. Use three stats or 2–4 process steps. These are documentation recommendations, not limits enforced by the package. Always inspect your actual text at the final size.
Headlines are plain strings. The underline matches the first exact, case-sensitive substring and leaves the text unchanged when there is no match. A matched phrase is kept in an inline block, so a long underline phrase can make wrapping harder. Prefer one or two words and avoid an empty string.
Use meaningful, one-based integer index and total values, with index no greater than total. The library only pads their string representations to two characters; it accepts negative, fractional, zero, and out-of-range numbers without checking them. Update every total when the sequence changes.
Pair text tone with a deliberate background
The default is ink text on warm ivory. Setting tone to ivory changes text colors, including muted labels and nested content, but leaves the background unchanged. Pair it with a dark background such as ink navy. The background prop accepts a CSS color through backgroundColor, not an image or gradient.
The process step number is always warm ivory on its supplied color, regardless of the slide’s tone. Choose colors with adequate text contrast. The examples use cobalt and violet for step markers and navy for the dark slides.
All metrics and workflow content here are illustrative. Replace them with verified information and context before publishing. The CTA button is presentation only; provide a real adjacent link or action in your consuming page when a visitor should be able to act.
Props by variant
The fields below are extracted from the installed discriminated union, including its shared intersection and nested array item types. Required flags and types are generated; explanations and defaults are checked against the implementation.
| Prop / type | Default | Description |
|---|---|---|
indexRequirednumber | Required | One-based position in the sequence. Use an integer from 1 through total. Rendered as text padded to at least two characters; no range validation or navigation. |
totalRequirednumber | Required | Positive integer slide count, consistent across a sequence. Printed as supplied, padded to at least two characters; not calculated from other slides. |
tone"ink" | "ivory" | "ink" | ink uses navy/ slate text; ivory uses ivory/ pale steel. Applied to the wordmark, labels, stats, and steps. Does not choose the background. |
backgroundstring | undefined | A CSS color for backgroundColor. When undefined, the package uses warm ivory. Gradients and background images are not supported by this prop. |
classNamestring | undefined | Classes merged onto the slide’s outer div. The package does not forward other HTML or ARIA attributes. |
headlineRequiredstring | Required | Required plain text rendered in an h2. Prefer one short idea; there is no length validation or automatic type scaling. |
underlinestring | undefined | Optional, exact, case-sensitive substring of headline. The first match is underlined; no match leaves the headline unchanged. Use a short, nonempty phrase. |
hook
Use all required common props above, plus the fields below. Open the hook example.
| Prop / type | Default | Description |
|---|---|---|
variantRequired"hook" | Required | Required discriminant: selects this layout and the fields accepted with it. No default variant. |
eyebrowstring | undefined | Optional uppercase label above the headline. Available only for hook, stat-headline, and cta; keep it brief. |
stat-headline
Use all required common props above, plus the fields below. Open the stat-headline example.
| Prop / type | Default | Description |
|---|---|---|
variantRequired"stat-headline" | Required | Required discriminant: selects this layout and the fields accepted with it. No default variant. |
eyebrowstring | undefined | Optional uppercase label above the headline. Available only for hook, stat-headline, and cta; keep it brief. |
stat-breakdown
Use all required common props above, plus the fields below. Open the stat-breakdown example.
| Prop / type | Default | Description |
|---|---|---|
variantRequired"stat-breakdown" | Required | Required discriminant: selects this layout and the fields accepted with it. No default variant. |
statsRequiredOmit<StatBlockProps, "tone">[] | Required | Required array of stat items. The layout always uses three columns; three items are recommended. Empty and longer arrays are accepted without validation. Use unique labels as React keys. |
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" | "lg" | lg: 36 px value and 20 px unit. sm: 18 px value and 14 px unit. Labels stay 12 px; captions stay 14 px (at a 16 px root). |
classNamestring | undefined | Accepted by the type, but replaced by the slide’s min-w-0 class at runtime. Do not rely on per-stat classes here. |
process
Use all required common props above, plus the fields below. Open the process example.
| Prop / type | Default | Description |
|---|---|---|
variantRequired"process" | Required | Required discriminant: selects this layout and the fields accepted with it. No default variant. |
stepsRequiredProcessStep[] | Required | Required array of process steps. The layout always uses two columns; use 2–4 concise steps. Counts and numbers are not validated. Use unique step numbers as React keys. |
Each steps item
| Prop / type | Default | Description |
|---|---|---|
numberRequirednumber | Required | Displayed as supplied, without automatic numbering. Use a unique, sequential positive integer. |
labelRequiredstring | Required | A concise step name. Rendered as paragraph text, not a heading or list item. |
descriptionstring | undefined | Optional short explanation; omitted when undefined. There is no length limit or truncation API. |
colorRequiredstring | Required | Required CSS color for the number-circle background. The number text is always warm ivory, independent of the slide tone; check its contrast. |
cta
Use all required common props above, plus the fields below. Open the cta example.
| Prop / type | Default | Description |
|---|---|---|
variantRequired"cta" | Required | Required discriminant: selects this layout and the fields accepted with it. No default variant. |
eyebrowstring | undefined | Optional uppercase label above the headline. Available only for hook, stat-headline, and cta; keep it brief. |
ctaLabelRequiredstring | Required | Required text inside a real button with an appended arrow. Presentation only: no href, onClick, disabled, or action prop is exposed. |
Accessibility & layout
Preview scaling is not component responsiveness
The slide uses width: 100%, a preferred 3:4 aspect ratio, 32 px padding, and fixed typography. Hook, stat-headline, and cta use a 36 px headline; stat-breakdown and process use 30 px, assuming a 16 px root. There are no breakpoints or automatic type-size changes, and the stat and step grids do not collapse.
Each complete example includes its 480 px width wrapper. With this content, the slide is 480 × 640 px. The documentation’s Fit to canvas control scales that entire render down visually; Actual size keeps its dimensions and provides horizontal scrolling. Neither control changes the copied TSX or the component props.
The aspect ratio is a preferred ratio, not a content guarantee: longer content can grow the layout or overflow into the slide’s hidden overflow. The component does not measure text, paginate, or preserve readability at arbitrary narrow widths. Keep the wrapper in copied examples and recheck the result when changing its width or content.
Understand the rendered semantics
The slide is a div with an h2 headline, real text labels, and a visible index/total counter. It is not a carousel landmark or an announced slide region. Add an appropriate surrounding section, accessible name, and navigation in your application. Arbitrary HTML and ARIA attributes are not forwarded by the slide props.
Stat labels and process descriptions are paragraph text. Process steps are arranged as a grid, not a semantic ordered list. Underlines, crosshairs, and connector arrows are hidden from assistive technology. The wordmark and fixed coreux.com footer are text, not links.
The CTA is a real, keyboard-focusable button, but activating it performs no action at this revision. The API exposes only its label. This reference preserves that behavior and does not imply a working destination.
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 SocialCarouselSlide source (repository access required)Seed examples accounted for
Hook, StatHeadline, StatBreakdown, Process, and Cta each have a matching complete file here. Their five headline ideas and variant layouts are retained. The seed’s 320 px padded preview wrapper is replaced by a copied 480 px width wrapper; the original 1, 2, 4, 5, 6 counters are renumbered into a complete five-slide sequence.
Eyebrows and metric captions identify illustrative content, and step descriptions are shortened. Navy replaces coral and violet slide backgrounds so muted text remains legible. Step markers use cobalt and violet in place of seed colors with insufficient contrast for their warm-ivory numbers. These are documented example adaptations; the installed package is unchanged.