#

Hero

#

#

Hero

#

#

#

SC Simple Data Display (Pattern)

SC Simple Data Display (Pattern)

SC Simple Data Display (Pattern)

Aug 26, 2025

0 views

CMS-friendly label/value list with an optional pattern column for visual rhythm. Supports variable-font axes per column, responsive switch to a stacked layout, and a friendly placeholder when no data is provided.

Get Component

Get Component

Get Component

Get Component

Preview

Preview

Preview

Preview

Lilac Flower
Lilac Flower
Lilac Flower
Lilac Flower

[MAIN]

{#main}

[MAIN]

{#main}

[MAIN]

{#main}

[MAIN]

{#main}

[OVRV]

Overview

[OVRV]

Overview

[OVRV]

Overview

[OVRV]

Overview

#
Built With
React, CSS, Framer Code Component API
#
Layout Support
Fully Responsive (switches to stacked view under breakpoint)
#
Orientation
Pattern column → label → value (desktop); stacked rows (mobile)
#
Ideal Use Case
Pricing/spec blocks, feature matrices, project metadata, compact CMS hand-offs
#
Built With
React, CSS, Framer Code Component API
#
Layout Support
Fully Responsive (switches to stacked view under breakpoint)
#
Orientation
Pattern column → label → value (desktop); stacked rows (mobile)
#
Ideal Use Case
Pricing/spec blocks, feature matrices, project metadata, compact CMS hand-offs
#
Built With
React, CSS, Framer Code Component API
#
Layout Support
Fully Responsive (switches to stacked view under breakpoint)
#
Orientation
Pattern column → label → value (desktop); stacked rows (mobile)
#
Ideal Use Case
Pricing/spec blocks, feature matrices, project metadata, compact CMS hand-offs

//

Tags

data-display
pattern
variable-font
responsive
cms
typography

[DEPS]

Dependencies

[DEPS]

Dependencies

[DEPS]

Dependencies

[DEPS]

Dependencies

//
Technologies
None (pure React + CSS)
//
Notes
No runtime libraries required; works with Framer’s runtime. Variable font axes require a VF family in your project.
//
Technologies
None (pure React + CSS)
//
Notes
No runtime libraries required; works with Framer’s runtime. Variable font axes require a VF family in your project.
//
Technologies
None (pure React + CSS)
//
Notes
No runtime libraries required; works with Framer’s runtime. Variable font axes require a VF family in your project.

[CMPLX]

Complexity

[CMPLX]

Complexity

[CMPLX]

Complexity

[CMPLX]

Complexity

#
Logic Level
Low–Medium (string parsing + responsive observer)
#
Runtime Cost
Very Low (text rendering)
#
Component Size
~3–4 KB (raw TSX)
#
Notes
Axes apply via font-variation-settings; provide a VF stack or disable Variable Font.
#
Logic Level
Low–Medium (string parsing + responsive observer)
#
Runtime Cost
Very Low (text rendering)
#
Component Size
~3–4 KB (raw TSX)
#
Notes
Axes apply via font-variation-settings; provide a VF stack or disable Variable Font.
#
Logic Level
Low–Medium (string parsing + responsive observer)
#
Runtime Cost
Very Low (text rendering)
#
Component Size
~3–4 KB (raw TSX)
#
Notes
Axes apply via font-variation-settings; provide a VF stack or disable Variable Font.

[GUIDE]

{#guide}

[GUIDE]

{#guide}

[GUIDE]

{#guide}

[GUIDE]

{#guide}

[STEP]

Instructions

[STEP]

Instructions

[STEP]

Instructions

[STEP]

Instructions

  1. Content: In Content, enter one row per line as Label::Value (or change Delimiter).

  2. Pattern: Choose Pattern, Pattern Color, Pattern Width, and Pattern Align.

  3. Typography: Pick Font, Label Color, Value Color.

  4. Variable Fonts: Toggle Variable Font; tune Label Axes and Value Axes (MONO, CASL, CRSV, slnt, wght).

  5. Layout: Set Label Width, Column Gap, Row Gap, enable Responsive and set Breakpoint.

  6. Empty State: If no content, a helper placeholder appears automatically.

[EXMP]

Examples / Presets

[EXMP]

Examples / Presets

[EXMP]

Examples / Presets

[EXMP]

Examples / Presets

  • Preset: Spec Sheet Minimal

    CPU::Apple M3
RAM::16 GB
Storage::512 GB SSD
Display::14" 3024×1964

Preset: Project Meta

Client::SecretoCho Design
Scope::UI Engineering
Stack::Framer, TypeScript, Three.js
Status::In Production


  • Pattern //, Pattern Align right, CASL slight 0.2 on labels.

[MECH]

{#mechanics}

[MECH]

{#mechanics}

[MECH]

{#mechanics}

[MECH]

{#mechanics}

[HOW]

How it Works

[HOW]

How it Works

[HOW]

How it Works

[HOW]

How it Works

  • Parsing: Splits content by newline → each line split by delimiter → {label, value}.

  • Pattern Column: Renders pattern as text with reduced opacity; width fixed by Pattern Width.

  • Variable Fonts: If Variable Font is on, converts the first family in the stack to its " Variable" form and applies font-variation-settings per column; falls back to cssFontWeight when wght isn’t applied.

  • Responsive: A ResizeObserver checks container width and flips to a stacked layout at Breakpoint.

[PERF]

Performance & Tuning

[PERF]

Performance & Tuning

[PERF]

Performance & Tuning

[PERF]

Performance & Tuning

  • Prefer concise patterns (e.g. #, //, ·) to avoid visual noise.

  • Long values: rely on built-in word-break: break-word.

  • Large lists: rendering is light; main cost is text layout—keep Row Gap modest.

[COMP]

Compatibility & Limits

[COMP]

Compatibility & Limits

[COMP]

Compatibility & Limits

[COMP]

Compatibility & Limits

  • Modern evergreen browsers.

  • Variable font axes require VF support; if unavailable, component falls back to font-weight.

  • No server/client fetches; purely presentational.

[QUAL]

{#quality}

[QUAL]

{#quality}

[QUAL]

{#quality}

[QUAL]

{#quality}

[A11Y]

Accessibility

[A11Y]

Accessibility

[A11Y]

Accessibility

[A11Y]

Accessibility

  • Treat the list as terms + descriptions. For maximum semantics, consider placing the component inside a region with an accessible name, or replicate with <dl>/<dt>/<dd> when exporting to code.

  • Pattern column is decorative; if it confuses SRs, wrap it with aria-hidden="true".

  • Placeholder uses aria-live="polite" to hint updates when content becomes available.

[SEC]

Security & Privacy

[SEC]

Security & Privacy

[SEC]

Security & Privacy

[SEC]

Security & Privacy

  • No network calls; no storage; no device permissions.

  • Inputs are rendered as text (not HTML) — no dangerouslySetInnerHTML, no eval.

  • Main foot-gun is very large content leading to long pages; paginate or limit rows in CMS.

[REF]

{#reference}

[REF]

{#reference}

[REF]

{#reference}

[REF]

{#reference}

[API]

Props

[API]

Props

[API]

Props

[API]

Props

Name

Type

Default

Description

content

string

"Label

Value\n..."

delimiter

string

"

"

pattern

string

"#"

Characters painted in the pattern column.

patternColor

color

rgba(0,0,0,0.64)

Pattern text color.

patternWidth

number(px)

30

Fixed width of the pattern column.

patternAlign

enum

center

Pattern text alignment (left|center|right).

font

FontValue

Recursive, ...

Shared base font for both columns.

labelColor

color

#666

Label text color.

valueColor

color

#111

Value text color.

variableAxes

boolean

true

Enable variable-font axes.

labelAxes

Axes

{ MONO:1, CASL:0, CRSV:0, slnt:0, wght:400, cssFontWeight:400 }

description

valueAxes

Axes

{ MONO:1, CASL:0, CRSV:0, slnt:0, wght:600, cssFontWeight:600 }

description

labelWidth

number(px)

180

Fixed label column width (desktop).

gap

number(px)

20

Gap between columns.

rowGap

number(px)

8

Gap between rows (desktop).

mobileRowGap

number(px)

24

Gap between groups on mobile.

responsive

boolean

true

Enable layout switch based on width.

breakpoint

number(px)

600

Width to switch to stacked layout.

placeholderMinHeight

number(px)

120

Minimum height of the empty-state box.

name:content
type:string
default:"Label
desc:Value\n..."
name:delimiter
type:string
default:"
desc:"
name:pattern
type:string
default:"#"
desc:Characters painted in the pattern column.
name:patternColor
type:color
default:rgba(0,0,0,0.64)
desc:Pattern text color.
name:patternWidth
type:number(px)
default:30
desc:Fixed width of the pattern column.
name:patternAlign
type:enum
default:center
desc:Pattern text alignment (left|center|right).
name:font
type:FontValue
default:Recursive, ...
desc:Shared base font for both columns.
name:labelColor
type:color
default:#666
desc:Label text color.
name:valueColor
type:color
default:#111
desc:Value text color.
name:variableAxes
type:boolean
default:true
desc:Enable variable-font axes.
name:labelAxes
type:Axes
default:{ MONO:1, CASL:0, CRSV:0, slnt:0, wght:400, cssFontWeight:400 }
desc:description
name:valueAxes
type:Axes
default:{ MONO:1, CASL:0, CRSV:0, slnt:0, wght:600, cssFontWeight:600 }
desc:description
name:labelWidth
type:number(px)
default:180
desc:Fixed label column width (desktop).
name:gap
type:number(px)
default:20
desc:Gap between columns.
name:rowGap
type:number(px)
default:8
desc:Gap between rows (desktop).
name:mobileRowGap
type:number(px)
default:24
desc:Gap between groups on mobile.
name:responsive
type:boolean
default:true
desc:Enable layout switch based on width.
name:breakpoint
type:number(px)
default:600
desc:Width to switch to stacked layout.
name:placeholderMinHeight
type:number(px)
default:120
desc:Minimum height of the empty-state box.

Name

Type

Default

Description

name:content
type:string
default:"Label
desc:Value\n..."
name:delimiter
type:string
default:"
desc:"
name:pattern
type:string
default:"#"
desc:Characters painted in the pattern column.
name:patternColor
type:color
default:rgba(0,0,0,0.64)
desc:Pattern text color.
name:patternWidth
type:number(px)
default:30
desc:Fixed width of the pattern column.
name:patternAlign
type:enum
default:center
desc:Pattern text alignment (left|center|right).
name:font
type:FontValue
default:Recursive, ...
desc:Shared base font for both columns.
name:labelColor
type:color
default:#666
desc:Label text color.
name:valueColor
type:color
default:#111
desc:Value text color.
name:variableAxes
type:boolean
default:true
desc:Enable variable-font axes.
name:labelAxes
type:Axes
default:{ MONO:1, CASL:0, CRSV:0, slnt:0, wght:400, cssFontWeight:400 }
desc:description
name:valueAxes
type:Axes
default:{ MONO:1, CASL:0, CRSV:0, slnt:0, wght:600, cssFontWeight:600 }
desc:description
name:labelWidth
type:number(px)
default:180
desc:Fixed label column width (desktop).
name:gap
type:number(px)
default:20
desc:Gap between columns.
name:rowGap
type:number(px)
default:8
desc:Gap between rows (desktop).
name:mobileRowGap
type:number(px)
default:24
desc:Gap between groups on mobile.
name:responsive
type:boolean
default:true
desc:Enable layout switch based on width.
name:breakpoint
type:number(px)
default:600
desc:Width to switch to stacked layout.
name:placeholderMinHeight
type:number(px)
default:120
desc:Minimum height of the empty-state box.

[NOTE]

Notes & Tips

[NOTE]

Notes & Tips

[NOTE]

Notes & Tips

[NOTE]

Notes & Tips

  • Treat the list as terms + descriptions. For maximum semantics, consider placing the component inside a region with an accessible name, or replicate with <dl>/<dt>/<dd> when exporting to code.

  • Pattern column is decorative; if it confuses SRs, wrap it with aria-hidden="true".

  • Placeholder uses aria-live="polite" to hint updates when content becomes available.

[FAQ]

Troubleshooting / FAQ

[FAQ]

Troubleshooting / FAQ

[FAQ]

Troubleshooting / FAQ

[FAQ]

Troubleshooting / FAQ

  • No network calls; no storage; no device permissions.

  • Inputs are rendered as text (not HTML) — no dangerouslySetInnerHTML, no eval.

  • Main foot-gun is very large content leading to long pages; paginate or limit rows in CMS.

[CRED]

{#credits-legal}

[CRED]

{#credits-legal}

[CRED]

{#credits-legal}

[CRED]

{#credits-legal}

[AUTH]

Credits

[AUTH]

Credits

[AUTH]

Credits

[AUTH]

Credits

Variable-font axis controls inspired by modern VF practices (e.g., Recursive).
Development, Implementation and Framer adaptation by SecretoCho Design.

SecretoCho Design 2025

[LEGAL]

Disclaimer

[LEGAL]

Disclaimer

[LEGAL]

Disclaimer

[LEGAL]

Disclaimer

Provided “as is” for visual/UX purposes. You are responsible for verifying performance, accessibility, and any font licensing in your project.

SC Rich Text Enhanced

SC Rich Text Enhanced

SC Rich Text Enhanced

SC Rich Text Enhanced

SC Tag Display

SC Tag Display

SC Tag Display

SC Tag Display

Stay ahead of the curve with insights into emerging visualization trends and technologies.

SUBSCRIBE

SUBSCRIBE

SUBSCRIBE

SUBSCRIBE

About

Book a Call

Book a Call

Book a Call