Not Found (404)

Not Found (404)

Not Found displays a custom 404 error page with hero image, action buttons, recommended content carousel, and GrowthBook feature flag integration.

Visual Specifications

Property	Desktop	Mobile
Hero Image	300-400px wide	200-300px
Title Size	32-40px	24-28px
Button Height	44-48px	40-44px
Carousel Items	3	2

Layout Variants

Default Without Home Button

Standard 404 page with recommendations

Home button controlled by config or feature flag

Configuration Options

Option	Description
Custom hero image	Alternate 404 illustration
Custom home/support URLs	Alternative navigation destinations
Custom page title	Branded error page title
Recommended content	Custom carousel items
GrowthBook integration	Feature flag support for buttons

Carousel Configuration

Setting	Desktop	Mobile
Items shown	3	2
Items to scroll	3	2
Navigation arrows	Yes	No
Pagination dots	Yes	Yes
Infinite loop	No	No

Carousel Content

Property	Description
Image	Card visual
Title	Card heading
Description	Card summary text
Link URL	Destination on click

Translations

The component includes built-in translations for:

• English (en)
• Indonesian (id)

Features

Feature	Description
SEO Meta	Sets page title
Accessibility	Screen reader support, semantic HTML
GrowthBook Integration	Feature flag support
Responsive Carousel	Adaptive items per screen
Translate Ready	i18n support

Usage Guidance

When to use

• Custom 404 error pages
• App-level error routing
• Brand-specific error handling

Best practices

✅ Do	❌ Don’t
Helpful navigation	Dead end page
On-brand imagery	Generic placeholder
Relevant recommendations	Random links
Clear next steps	User confusion
Test feature flags	Broken toggles

Live Demo

View in Storybook →