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