FramedContent

Examples #

'use client';

import { FramedContent } from '@coreux/ui';

export default function Circle() {
  return (
    <figure style={{ margin: 0, width: 300, boxSizing: 'border-box', background: '#F4F1E9', color: '#0B1221', padding: 24 }}>
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <FramedContent shape="circle">
          <span style={{ fontFamily: 'Switzer', fontWeight: 700 }}>UX</span>
        </FramedContent>
      </div>
      <figcaption style={{ marginTop: 16, fontSize: 14, lineHeight: 1.5 }}>Illustrative discipline badge: UX means user experience. Keep the full label outside the small frame.</figcaption>
    </figure>
  );
}

Choosing a presentation #

Use FramedContent for one small marker or thumbnail beside a complete description. All four shapes occupy the same 88 × 88 px square. Use GroupFrame for several related pieces of content, or PanelCard for a title, metric and supporting copy.

• Circle preserves the UX seed and explains the initials in a visible caption.
• Rounded square preserves the accent 4 seed. The full workflow step stays outside the small surface.
• Hexagon preserves the A seed with a short centered glyph, clear of its angled edges.
• Diamond on dark demonstrates the fourth supported shape and actual dark field mode.
• Self-contained illustration supplies one labeled SVG and its own circular crop. No external image or asset download is required.

Shape alone does not define a status or action. Explain a marker in nearby text; use explicit status words when choosing a semantic tone. Keep paragraphs and full names outside the small frame. See Typography for text roles and Spacing & shape for the video token family.

Content & clipping #

The implementation requires exactly one centered content slot, measured with React.Children.count. No children or multiple direct children throw. A single wrapper can hold several elements, but the count does not verify that a fragment or conditional child produces useful visible content. Supply one deliberately sized, meaningful element.

The circle and rounded square set border-radius without setting overflow: hidden. Their backgrounds are rounded, but a large image or long text can escape the curve. Crop media inside the supplied child: the illustration uses an 80 × 80 px SVG with borderRadius: '50%' and overflow: 'hidden'. For a photograph, include a real image source, meaningful alt text, explicit dimensions, an appropriate object-fit crop, and the child’s own clipping. There is no image-loading or asset prop.

Hexagon and diamond apply clip-path to both the outer frame and inner surface. Descendants near their angled edges can be cut off, including text or a focus indicator. Keep important content centered and compact. The inner square is 80 × 80 px, but its usable polygon area is smaller; an 80 px square image is not guaranteed to remain entirely visible.

shape, fieldMode and tone are validated against the supported values. The component has no width, height, className, style, click-handler or ARIA-forwarding props. Extra wrapper styling and content semantics belong in the complete consumer composition.

Geometry & appearance #

The outer box is fixed at 88 × 88 px with border-box sizing, a 2 px solid border and 2 px padding, leaving an 80 × 80 px centered inner surface. It does not shrink in a flex row. Circle uses a 999 px radius. Rounded square uses a 16 px outer radius and an 8 px inner radius. Hexagon and diamond use polygon clips with no corner radius.

fieldMode selects light or dark. tone accepts neutral, accent, muted, positive, warning and error, selecting the surface, inherited text and border from the video tone palette. Accent has a cobalt inner surface with ivory text; semantic tones retain the light or dark field surface and add a colored outline. Supply the surrounding background yourself. A preview fit setting does not change any of these props.

revealProgress defaults to 1 for fully visible, settled output. It must be finite and clamps to 0–1, controlling opacity and scale from 0.9 to 1. There is no internal clock or transition. Consumers animating this input must handle timing and reduced-motion preferences.

Props #

Types and optional flags come from the installed declarations. Defaults are checked against the actual implementation. The content-count check and clipping behavior above apply at runtime.

Accessibility & layout #

The component renders two generic divs. It does not create a button, image role, heading or accessible name. The examples use figures and captions to pair each small marker with its full meaning. The SVG example supplies an image role and descriptive label. Give meaningful photographs alt text; hide a purely decorative child from assistive technology when adjacent text already conveys everything it adds.

A shape boundary is supplementary to readable text. Avoid putting interactive controls inside a polygon where their focus ring could be clipped. Check contrast for supplied content and its selected surface, especially when using colored outlines to indicate status. Reducing revealProgress changes presentation only; it does not remove content from the accessibility tree or disable focusable children.

The copied wrappers are 300 px wide and include their padding and captions. At narrow widths, provide contained scrolling or recompose the surrounding content while preserving the 88 px frame. Fit to canvas scales this documentation preview only; Actual size retains the copied geometry in a focusable scrolling area.

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