Skip to content
VVVER

Design System / 07.13

Sections

Composed sections for product pages: demonstrations, comparisons, estimators, procedures, pricing, stories, and page-level navigation.

Component reference

Announcement bar

A thin, optionally linked strip with a 44px dismiss control. With a storage key it applies a persisted dismissal after hydration; the server still renders the message so no-script readers retain it. Executable or blank link values fall back to plain text.

Live specimen

Rendered output

API reference

Inputs, types, and behavior

Inputchildren / href
TypeReactNode / string?
BehaviorVisible message and optional safe link. Blank content omits the bar.
Inputdismissible / storageKey
Typeboolean / string?
BehaviorDismissible by default; a key makes dismissal best-effort persistent in localStorage.
Inputalign / external
Type"center" | "start" / boolean
BehaviorExternal links open in a new tab with noopener noreferrer.
InputclassName
Typestring?
BehaviorMerged last on the full-width strip.

Component reference

Case study section

A project-scale outcome story with a thesis, quotation, attribution, media, and up to four sourced metrics. Unlike Testimonial, it owns the section spacing and reading order. The host supplies every number and endorsement.

Live specimen

Rendered output

Design-system case study

Design-system catalog decisions

The case-study format combines an image, a short account, quoted context, and sourced measurements.
The catalog keeps the rendered component beside the details needed to use it.
VVVER component catalogVVVER design and identity
Woman seated on the steps of a pale green garden shed
Families
14
Component catalog
Text floor
/60
Ink opacity on paper
Touch target
44px
Interactive controls
Motion ceiling
<400ms
Interaction guidance

API reference

Inputs, types, and behavior

Inputtitle / summary / headingAs
TypeReactNode / ReactNode? / h1–h6
BehaviorPage-scale thesis, optional context, and a host-appropriate heading level.
Inputquote / name / role / serif
TypeReactNode / ReactNode / ReactNode? / boolean
BehaviorRequired quotation and attribution; serif is limited to the quotation voice.
Inputmedia / metrics / action
TypeReactNode? / CaseStudyMetric[] / ReactNode?
BehaviorSupplied media, up to four sourced outcomes, and an optional host-owned action.
Inputas / mediaClassName / className
Typesection|article|div / string? / string?
BehaviorSemantic root and consumer classes; media and outer classes merge last.

Component reference

CTA section

A closing prompt with optional eyebrow, supporting copy, and action slot. Its sanctioned inverted register remains static; supplied controls still self-dim. Choose the root and heading level to match the surrounding document outline.

Live specimen

Rendered output

Design rationale

Component composition checklist

The identity article records the visual decisions behind the component rules.

API reference

Inputs, types, and behavior

Inputtitle / headingAs
TypeReactNode / h1–h6
BehaviorA plain title uses the selected heading; a supplied heading node keeps its own level.
Inputeyebrow / dek / actions
TypeReactNode?
BehaviorOptional content slots; the host owns every action and its behavior.
Inputalign / invert / as
Type"center" | "start" / boolean / "section" | "div"
BehaviorDefaults to a centered paper section with an h2 title.
InputclassName
Typestring?
BehaviorMerged last on the semantic root.

Component reference

Ecosystem section

A named matrix for products, integrations, or system primitives. It adds a role, description, metadata, and optional safe navigation to the static logo-wall idea. Shared seams preserve one field; linked marks and names self-dim without lowering explanatory copy.

Live specimen

Rendered output

Publication tools

Publication toolchain

Use this section to explain how a small set of related tools divide the work.
  • Text

    Edit

    Tracks copy changes, captions, and final approvals.
  • Pages

    Layout

    Combines edited text, images, running heads, and folios.
  • Check

    Preflight

    Checks image resolution, color profiles, bleed, and fonts.
  • Files

    Archive

    Stores sources, press files, web renditions, and credits.

API reference

Inputs, types, and behavior

Inputitems
TypeEcosystemItem[]
BehaviorUp to twenty-four { name, body?, mark?, meta?, href?, external? } records; blank names are omitted.
Inputtitle / body / eyebrow
TypeReactNode / ReactNode? / ReactNode?
BehaviorThe visible section thesis and optional explanatory register.
Inputcolumns / headingAs / itemHeadingAs
Type2|3|4 / h1–h6 / h2–h6
BehaviorResponsive matrix width and independent semantic levels for the section and item titles.
Inputactions / as / className
TypeReactNode? / section|div / string?
BehaviorHost-owned actions, semantic root, and outer classes merged last.

Component reference

Estimator section

A page-scale workspace for cost, capacity, ROI, or configuration tools. Inputs stay first in source order; estimate and breakdown form an attached results panel. The component performs no calculation and makes no pricing claim—the host owns state, arithmetic, and live announcements.

Live specimen

Rendered output

Capacity worksheet

Image export estimate

The section supplies the layout; the example below calculates a local usage estimate from the slider.
Workload
24,000
030,00060,000
Local arithmetic for the component example

API reference

Inputs, types, and behavior

Inputcontrols / result / breakdown
TypeReactNode / ReactNode / ReactNode?
BehaviorHost-owned inputs, required result, and optional written breakdown in a responsive 1.55/0.75 workspace.
Input*Label
Typestring?
BehaviorVisible micro-labels for controls, estimate, and breakdown; blank values receive plain fallbacks.
Inputtitle / body / actions / footer
TypeReactNode / ReactNode?
BehaviorThesis, context, host actions, and a disclosure or methodology line below the workspace.
InputheadingAs / as / className
Typeh1–h6 / section|div / string?
BehaviorSemantic heading, root, and consumer wrapper classes merged last.

Component reference

FAQ

A semantic question set built on Accordion. Invalid entries are omitted without discarding valid siblings, and separate heading props keep the section label and question buttons in a correct outline. A static no-script rendering keeps every answer available.

Live specimen

Rendered output

Repository facts

API reference

Inputs, types, and behavior

Inputitems
Type{ question, answer }[]
BehaviorValid question-and-answer pairs map to Accordion rows; malformed pairs are skipped.
Inputheading / headingAs
TypeReactNode? / h1–h6
BehaviorOptional section label and its semantic level.
InputquestionHeadingAs
Typeh2–h6
BehaviorAccordion question level; defaults to h3.
InputallowMultiple / as / className
Typeboolean / section|div / string?
BehaviorSingle-open by default. className merges last.

Component reference

Hero

A page opening with a display title, measured lede, optional actions, and supplied media. Split composition stacks in source order on small screens. Decorative backdrops are inert; set the semantic root and heading level when nesting the composition.

Live specimen

Rendered output

VVVER design system

Editorial structure for interfaces.

A source-shipped React library built from ink, paper, type, spacing, and hairlines.

Woman seated on the steps of a pale green garden shed

API reference

Inputs, types, and behavior

Inputtitle / headingAs
TypeReactNode / h1–h6
BehaviorPlain titles use the selected heading; blank titles omit the hero.
Inputlayout / as
Type"center" | "start" | "split" / section|div
BehaviorCentered by default. Split becomes two columns from md.
Inputeyebrow / dek / actions
TypeReactNode?
BehaviorMeasured copy and a host-owned action row.
Inputmedia / backdrop / className
TypeReactNode? / ReactNode? / string?
BehaviorSupplied media remains accessible; backdrop is forced inert and decorative. className merges last.

Component reference

Mode showcase section

A horizontal tab set bound to one demonstration field. Each mode has its own title, explanation, metadata, and content, not just a changed illustration. Arrow, Home, and End keys follow the familiar tab model; the incoming panel settles by four pixels over 280ms and reduced motion renders it at rest.

Live specimen

Rendered output

Image delivery

Image rendition presets

Compare three image-delivery presets without leaving the section. Each tab updates the settings below.
012400 px

Original rendition

For case-study plates where crop detail matters more than transfer size.
Rendition / originalSample settings
01Long edge2400 pxset
02Quality92%set
03FormatJPEGset

API reference

Inputs, types, and behavior

Inputitems
TypeModeShowcaseItem[]
BehaviorUp to twelve { label, title, body?, meta?, proof } modes; incomplete items are omitted.
InputdefaultIndex / activeIndex
Typenumber = 0 / number?
BehaviorUncontrolled or controlled selection. onActiveIndexChange reports the clamped index.
Inputtitle / body / label
TypeReactNode / ReactNode? / string?
BehaviorVisible section thesis, context, and accessible name for the mode tablist.
InputheadingAs / itemHeadingAs / className
Typeh1–h6 / h2–h6 / string?
BehaviorIndependent heading levels and consumer wrapper classes merged last.

Component reference

News list

A ruled editorial index of linked records. Media and the action cue self-dim without grayscale restoration, scaling, or slow filter animation; titles stay full ink. Invalid entries and executable links are omitted while every valid record remains in order.

Live specimen

Rendered output

API reference

Inputs, types, and behavior

Inputitems
Type{ title, href, … }[]
BehaviorOptional eyebrow, image, imageAlt, readMoreLabel, id, and external accompany each required title and href.
Inputlayout
Type"side-by-side" | "stacked"
BehaviorSide-by-side at md by default; copy-only rows never reserve an empty media track.
InputheadingAs / readMoreLabel
Typeh2–h6 / string
BehaviorItem title level and shared action cue.
InputclassName
Typestring?
BehaviorMerged last on the list.

Component reference

Newsletter section

A controlled email form that presents idle, loading, error, and success states while leaving every request to the host. Success is announced and receives focus after submission. The specimen sends or stores nothing; its state buttons are local controls. Before hydration or without host behavior, the form is truthfully disabled.

Live specimen

Rendered output

Newsletter state specimen

A local state specimen for the newsletter composition.

Catalog demo only / input is not stored or sent

API reference

Inputs, types, and behavior

Inputheading / headingAs
TypeReactNode / h1–h6
BehaviorRequired visible heading and semantic level; defaults to h2.
Inputbody / privacyNote
TypeReactNode?
BehaviorSupporting copy and a readable mono note.
InputonSubmit / status
Type(email) => void / idle|loading|success|error
BehaviorThe host receives the trimmed address and controls the state; without a callback the form is disabled. No request is built in.
Inputsuccess* / errorText / labels
TypeReactNode? / string?
BehaviorSuccess, error, placeholder, submit-label, alignment, and className customization.

Component reference

Pricing card

One standalone comparison column. A featured state adds only a hairline badge; it does not lift, thicken, glow, or change the card geometry. This neutral specimen demonstrates structure and is not a published vvver offer.

Live specimen

Rendered output

Catalog exampleSpecimen
/ no published price

Layout data only; this catalog does not publish a commercial plan.

  • IncludedAligned price register
  • IncludedReadable feature copy
  • Not includedCommercial offer

API reference

Inputs, types, and behavior

Inputtier
TypePricingTier
BehaviorRequires a nonblank name and renderable price; malformed cards return null.
Inputfeatures
Type(string | { label, included? })[]
BehaviorStrings are included; false uses a dash plus explicit screen-reader text.
Inputfeatured / badge
Typeboolean / string?
BehaviorFeatured shows the supplied badge or the fallback “Featured” on the same /15 edge.
InputclassName
Typestring?
BehaviorMerged last on the standalone card.

Component reference

Pricing table

Valid pricing cards share one-pixel seams and wrap to no more than three columns, so a long tier array remains readable instead of shrinking indefinitely. Empty or malformed arrays render no orphan grid. The values below are explicitly non-commercial specimens.

Live specimen

Rendered output

Column A
/ specimen

First neutral comparison column.

  • IncludedShared hairline
  • IncludedMobile stack
Column BFeatured example
/ specimen

Featured without elevation or a heavier box.

  • IncludedShared hairline
  • IncludedReadable badge
Column C
/ specimen

Third neutral comparison column.

  • IncludedShared hairline
  • Not includedInvented service claim

API reference

Inputs, types, and behavior

Inputtiers
TypePricingTier[]
BehaviorEvery valid tier remains in source order; malformed siblings are omitted.
Inputresponsive grid
Type1 / 2 / up to 3 columns
BehaviorOne column on phones, two from sm, and at most three from lg; additional tiers wrap.
InputclassName
Typestring?
BehaviorMerged last on the shared-seam grid.

Component reference

Procedure section

A complete numbered procedure for onboarding, migration, or release work. Every instruction and accompanying example remains in source order, distinguishing it from a live progress tracker or timed scenario. The desktop ledger becomes ordinary instruction-then-example rows on mobile.

Live specimen

Rendered output

Component release

Component release procedure

All steps remain visible in reading order, with room for commands, diagrams, or screenshots beside each one.
  1. 01
    Input

    Name the change

    Identify the affected component, documentation page, and browser behavior.
    release.ymlyaml
    component: "RouteMap"
    docs: "/components/effects"
    check: ["typecheck", "browser"]
  2. 02
    Execution

    Run the required checks

    Run TypeScript, the static export, and the relevant browser spec.
    01 / TypeScript / passed02 / Static export / passed03 / Browser / passed
  3. 03
    Output

    Write the release note

    Record what changed, how it was checked, and whether the public API moved.
    Change
    RouteMap mobile layout
    Checks
    Type / build / browser

API reference

Inputs, types, and behavior

Inputsteps
TypeProcedureStep[]
BehaviorUp to twenty-four { title, body?, meta?, proof? } steps; blank titles are omitted without hiding valid siblings.
InputstartIndex
Typenumber = 1
BehaviorFinite integer used for the written ledger index; it does not imply live progress.
Inputtitle / body / actions
TypeReactNode / ReactNode?
BehaviorProcedure thesis, context, and optional host-owned action row.
InputheadingAs / stepHeadingAs / as / className
Typeh1–h6 / h2–h6 / section|div / string?
BehaviorIndependent heading levels, semantic root, and consumer classes merged last.

Component reference

Product proof section

A split thesis and context, one large demonstration, then notes for its distinct details. The demonstration remains complete without animation and can contain an interface, diagram, trace, table, or media supplied by the host.

Live specimen

Rendered output

Publication export

Publication export summary

This example places a press-export summary beside source, preflight, and filename notes.
Preflight summary
01Layoutissue-04.inddLinked
02Images48 filesCMYK
03Fonts3 familiesEmbedded
04Outputissue-04-press.pdfReady
32 pages / CMYK / 3 mm bleed
  • 01 / Source

    Source files

    The export lists its layout, images, fonts, and captions.
  • 02 / Check

    Preflight status

    Resolution, color profile, and bleed remain readable after the scan ends.
  • 03 / Output

    Output filename

    The filename identifies the issue, medium, and revision.

API reference

Inputs, types, and behavior

Inputproof / proofLabel
TypeReactNode / string = Product proof
BehaviorRequired content in a named group. Blank titles or proof omit the section.
Inputnotes / columns / noteHeadingAs
TypeProductProofNote[] / 2|3|4 / h2–h6
BehaviorUp to eight attached explanation cells with responsive shared seams and valid heading semantics.
Inputtitle / body / eyebrow / actions
TypeReactNode / ReactNode?
BehaviorThesis, context, register, and optional host-owned actions above the proof.
Inputas / proofClassName / className
Typesection|div / string? / string?
BehaviorSemantic root and consumer classes; proof and outer wrappers merge classes last.

Component reference

Testimonial

A quotation and attribution figure with an optional non-interactive portrait. Blank names or quotations return null. To avoid implying a client endorsement, this specimen quotes the repository’s design guidance.

Live specimen

Rendered output

Production marks must carry real dates, sources, frames, or credits.
Design identityRepository design guidance

API reference

Inputs, types, and behavior

Inputquote / name
TypeReactNode
BehaviorRequired quotation and attribution; blank or non-finite values omit the figure.
Inputrole / avatar
TypeReactNode? / ReactNode|string?
BehaviorOptional attribution detail and non-interactive portrait; a string is treated as an image source.
Inputserif / className
Typeboolean / string?
BehaviorSerif is limited to the quote voice. className merges last.

Component reference

Testimonial grid

A one-column mobile wall that opens to two or three columns from md. It accepts composed children or a data array, removes malformed data entries without truncating valid input, and renders nothing when empty. These attributions name repository sections, not clients.

Live specimen

Rendered output

Reduced motion presents the complete final state without interpolation.
Motion characterRepository motion guidance
Contrast, focus, semantics, and reduced motion are visual decisions.
Accessibility guidanceDesign identity / paraphrased specimen

API reference

Inputs, types, and behavior

Inputitems / children
TypeTestimonialProps[] / ReactNode
BehaviorComposed children take precedence; valid data items otherwise render in order.
Inputcolumns
Type2 | 3
BehaviorDefaults and safely falls back to two columns at md; mobile remains one column.
InputclassName
Typestring?
BehaviorMerged last on the grid.