Composition

Choose the story before the container #

Proposed composition method: identify the reader’s question, write the answer, then select the component that makes the evidence understandable. The examples below reuse StatBlock, ProcessSteps, and MiniChart, as the marketing conventions recommend. Their wrappers and reading order are consumer-owned layouts, not additional library APIs.

Give the primary message the strongest type, keep supporting information close to what it explains, and leave space between different ideas. Use the type hierarchy, spacing families, and restrained motif guidance together.

Marketing: benefit, proof, next step #

Start with an understandable benefit and a short explanation. Add one or two relevant proof points with captions that identify their scope. A real action link follows the proof. Avoid a row of unrelated numbers or several equally dominant calls to action.

MarketingHero supplies the branded text shell and headline. Any accompanying graphic area belongs to the consumer’s layout. Its CTA is presentation only at this revision: it accepts a label but no href or click handler. Use a real adjacent link for navigation and make its purpose explicit. Keep meaningful artwork separate from decorative collage.

See the complete marketing hero with supporting proof points pattern for the layout and copyable source.

Social: one message per step #

Use a hook to state the problem, a process to explain an approach, and a stat breakdown to show evidence. This is a suggested narrative, not a required variant order. Write an explicit sequence and provide its text when sharing images.

SocialCarouselSlide renders one 3:4 card. Its index and total are labels, not a carousel player, keyboard navigation, or slide state. ShortformCover is a separate 9:16 cover. Keep each headline concise; do not shrink an entire desktop composition until its captions are unreadable. The process below is an outline for the sequence, not a social template.

See the complete social carousel sequence pattern to connect several actual slide variants.

Data stories: question, comparison, explanation #

Use StatBlock for one headline value, BarChart for category comparisons, LineChart for ordered observations, and DonutChart for a small set of parts of one whole. A DataTable supports exact lookup. A ProgressMeter reports a known fraction completed, not an arbitrary trend.

Keep units, period, and population consistent between the headline statistic and chart. Explain the takeaway and provide complete values in text or a suitable table. Small charts are supplemental: their compact shapes do not establish a source or explain the axes. See chart explanations.

See the complete results summary pattern to combine headline metrics with a chart and its explanation.

Compare three composition choices #

'use client';

import { EyebrowLabel, MiniChart, ProcessSteps, StatBlock, coreuxPalette } from '@coreux/ui';
import type { CSSProperties } from 'react';

const panel: CSSProperties = { margin: 0, padding: 20, minWidth: 0, background: coreuxPalette.warmIvory, color: coreuxPalette.inkNavy, border: `1px solid ${coreuxPalette.paleSteel}` };
const headline: CSSProperties = { fontSize: 30, fontWeight: 700, lineHeight: 1.2, margin: '16px 0' };
const explanation: CSSProperties = { fontSize: 14, lineHeight: 1.6, margin: '16px 0 0' };
const adoption = [40, 48, 60, 72];

export default function CompositionChoices() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 240px), 1fr))', gap: 24 }}>
      <figure style={panel}>
        <figcaption style={{ fontSize: 14, fontWeight: 600, marginBottom: 20 }}>Marketing · claim, then evidence</figcaption>
        <EyebrowLabel>Illustrative pilot</EyebrowLabel>
        <h3 className="font-display" style={headline}>Make setup easier.</h3>
        <StatBlock value="72" unit="%" label="Setup complete" caption="72 of 100 fictional teams by week 4, up from 40 at week 1." />
        <p style={explanation}>The headline gives the benefit. One supporting statistic explains the evidence. Place a real link after the proof when this becomes a landing page.</p>
      </figure>
      <figure style={panel}>
        <figcaption style={{ fontSize: 14, fontWeight: 600, marginBottom: 20 }}>Social · one step at a time</figcaption>
        <EyebrowLabel>Sequence outline</EyebrowLabel>
        <h3 className="font-display" style={headline}>Find it. Fix it.</h3>
        <ProcessSteps steps={[
          { number: 1, label: 'Listen', description: 'Find the friction.', color: coreuxPalette.systemsViolet },
          { number: 2, label: 'Simplify', description: 'Remove a step.', color: coreuxPalette.systemsViolet },
        ]} />
        <p style={explanation}>These two steps outline separate messages for a social sequence. Add the problem first and evidence next; keep the reading order explicit. This is an outline, not a slide player.</p>
      </figure>
      <figure style={panel}>
        <figcaption style={{ fontSize: 14, fontWeight: 600, marginBottom: 20 }}>Data story · question, then comparison</figcaption>
        <EyebrowLabel>Illustrative trend</EyebrowLabel>
        <h3 className="font-display" style={headline}>Did setup improve?</h3>
        <div aria-hidden="true"><MiniChart type="trend" series={[{ color: coreuxPalette.coreCobalt, points: adoption }]} width={180} height={100} /></div>
        <p style={explanation}>Setup completion, weeks 1–4: {adoption.map((value) => `${value}%`).join(', ')}. Each week covers the same 100 fictional teams. The increase is 32 percentage points.</p>
        <p style={explanation}>The question leads, the trend supports it, and complete values keep the explanation usable without the graphic.</p>
      </figure>
    </div>
  );
}

Own the layout and reading order #

These examples let their outer grid stack while preserving DOM order. That wrapper behavior does not make every component fluid. Video charts and DataTable require explicit pixel dimensions; marketing cards have their own aspect ratios; ProcessSteps remains two columns. See each reference before choosing a size.

Fit to canvas scales a fixed preview, including text. It does not rewrite the content or change component props. Actual size enables contained scrolling. In a product, choose a readable layout, provide scroll access where necessary, and test zoom, narrow viewports, and keyboard reading. Inline-style video primitives should be configured with supported props, not overridden through Tailwind classes.

Values generated from @coreux/ui at 06f42fd: public foundation tokens, marketing stylesheet, bundled font definitions, and marketing conventions. Source links require repository access. Install the package and styles once.