Design showcase

Example components

Explore the building blocks used across this static site — tabs, cards, typography, and colour tokens.

Interactive demo

Click the tabs below to switch content panels.

Quick deploy

# Install dependencies and deploy $ npm install $ npm run build $ cdk deploy \ -c accountId=123456789 \ -c domain=mystaticsite.com \ -c subdomain=www
  • Content lives in the site-contents/ folder
  • CloudFront serves index.html as the default root
  • 403 errors redirect to error.html

UI components

Reusable patterns you can copy into your own pages.

🔘

Buttons

Primary and secondary variants with hover lift.

📊

Stat cards

Highlight key metrics with gradient numbers.

99.9%
Uptime
<50ms
CDN edge
✨

Badges

Animated status indicators for live content.

All systems operational

Ready to customise?

Edit files in site-contents/ and redeploy. No build step required for the front-end.

← Back to home