Components

Every reusable React component on RNN has its own playground — tweak props live, see the static samples, and copy the import path into your screen.

ArticleCard
Editorial card. Aspect × orientation × cutout × panel. Optional image, context, tag, avatar.
@/components/ArticleCard
ArticleCopy
Editorial text block. Tag, title, author/time, context, CTA. Dark/light tones.
@/components/ArticleCopy
ArticleList
Vertical list of Avatar + ArticleCopy rows. Dividers, gap, dark/light tones.
@/components/ArticleList
MediaFrame
Image frame with aspect, cutout, fit, and effect (grayscale, luminosity, mono-red, mono-to-red hover).
@/components/MediaFrame
Avatar
Cutout-corner avatar. Author (24), Article (72), Quote (96). Optional drop shadow.
@/components/Avatar
Badge
Reusable pill tag with tone, icon, icon position, and cutout-corner options.
@/components/Badge
CutoutCorner
Signature L-shaped cutout. Four corners, any fill, any size.
@/components/CutoutCorner
Eyebrow
Mono uppercase label for tags, authors, timestamps.
@/components/Eyebrow
Footer
Global site footer. Wordmark, legal link rails, newsletter module, and social icons.
@/components/Footer
HeroSlider
Featured carousel. Image, content, badge, and left/right pixel arrows in one component.
@/components/HeroSlider
CTA
Signature call-to-action with clip-path cutout corner, mono label, and arrow glyph. Red / ink / cream tones.
@/components/CTA
SectionLabel
All-caps heading with 2px red indicator bar.
@/components/SectionLabel