+ {/* Hero Section */}
+
+
+
Component Showcase
+
CardOffgrid Component
+
+ A versatile card component for displaying feature highlights with an icon, title, and description.
+ Supports neutral and green color variants with interactive states and bottom-to-top gradient hover animation.
+
+
+
+ {/* Variant Showcase */}
+
+
+
+ Color Variants
+ CardOffgrid supports two color variants: neutral (default) and green.
+
+
+
+
Neutral Variant (Default)
+
}
+ title={"Onchain\nMetadata"}
+ description="Easily store key asset information or link to off-chain data using simple APIs, giving token holders transparency."
+ onClick={() => handleCardClick('neutral')}
+ />
+ {clickedCard === 'neutral' && (
+
✓ Card clicked!
+ )}
+
+
+
+
Green Variant
+
}
+ title={"Onchain\nMetadata"}
+ description="Easily store key asset information or link to off-chain data using simple APIs, giving token holders transparency."
+ onClick={() => handleCardClick('green')}
+ />
+ {clickedCard === 'green' && (
+
✓ Card clicked!
+ )}
+
+
+
+ {/* Interactive States */}
+
+
+
+ Interactive States
+ Hover, focus, and press the cards below to see the state transitions.
+
+ {/* Neutral States */}
+ Neutral Variant States
+
+
+ Default
+ }
+ title={"Token\nManagement"}
+ description="Create and manage fungible and non-fungible tokens with built-in compliance features."
+ onClick={() => handleCardClick('neutral-default')}
+ />
+
+
+ Disabled
+ }
+ title={"Token\nManagement"}
+ description="Create and manage fungible and non-fungible tokens with built-in compliance features."
+ disabled
+ />
+
+
Green Variant States
+
+
+ Default
+ }
+ title={"Cross-Chain\nBridges"}
+ description="Connect XRPL with other blockchain networks through secure and efficient bridge protocols."
+ onClick={() => handleCardClick('green-default')}
+ />
+
+
+ Disabled
+ }
+ title={"Cross-Chain\nBridges"}
+ description="Connect XRPL with other blockchain networks through secure and efficient bridge protocols."
+ disabled
+ />
+
+
+
+ {/* Color Palette */}
+
+
+
+ Color Palette
+
+ All colors are mapped from styles/_colors.scss.
+ The site defaults to dark mode. Light mode is activated via html.light.
+
+
+ {/* Dark Mode Colors */}
+ Dark Mode (Default)
+
+ {/* Neutral Colors - Dark */}
+
+
Neutral Variant
+
+
+
+
+ Default: $gray-500
+
+ #72777E (white text)
+
+
+
+
+
+ Hover/Focus: $gray-400
+
+ #8A919A (white text)
+
+
+
+
+
+ Pressed: rgba($gray-500, 0.7)
+
+ 70% opacity
+
+
+
+
+
+ Disabled: $gray-500 @ 30%
+
+ opacity: 0.3
+
+
+
+
+
+ {/* Green Colors - Dark */}
+
+
Green Variant
+
+
+
+
+ Default: $green-300
+
+ #21E46B (black text)
+
+
+
+
+
+ Hover/Focus: $green-200
+
+ #70EE97 (black text)
+
+
+
+
+
+ Pressed: $green-400
+
+ #0DAA3E (black text)
+
+
+
+
+
+ Disabled: $gray-500 @ 30%
+
+ opacity: 0.3 (white text)
+
+
+
+
+
Light Mode (html.light)
+
+ {/* Neutral Colors - Light */}
+
+
Neutral Variant
+
+
+
+
+ Default: $gray-200
+
+ #E6EAF0 (dark text)
+
+
+
+
+
+ Hover/Focus: $gray-300
+
+ #CAD4DF (black text)
+
+
+
+
+
+ Pressed: $gray-400
+
+ #8A919A (black text)
+
+
+
+
+
+ Disabled: $gray-100
+
+ #F0F3F7 (gray text)
+
+
+
+
+
+ {/* Green Colors - Light */}
+
+
Green Variant
+
+
+
+
+ Default: $green-200
+
+ #70EE97 (black text)
+
+
+
+
+
+ Hover/Focus: $green-300
+
+ #21E46B (black text)
+
+
+
+
+
+ Pressed: $green-400
+
+ #0DAA3E (black text)
+
+
+
+
+
+ Disabled: $gray-100
+
+ #F0F3F7 (gray text)
+
+
+
+
+
+
+ {/* Animation Details */}
+
+
+
+ Animation Specifications
+
+
+
+
Timing
+
+ - Duration: 200ms
+ - Easing:
cubic-bezier(0.98, 0.12, 0.12, 0.98)
+
+
+
+
Hover Effect ("Window Shade")
+
+ - Hover in: Shade rises up (bottom → top)
+ - Hover out: Shade falls down (top → bottom)
+ - Darker pressed state on click
+
+
+
+
State Flow
+
+ - Default → Hover → Pressed
+ - Full card area is clickable
+ - Focus ring on keyboard navigation
+
+
+
+
+ {/* Link vs Button */}
+
+
+
+ Link vs Button Rendering
+ The component renders as an <a> tag when href is provided, otherwise as a <button>.
+
+
+
+
As Button (onClick)
+
}
+ title={"Click Me"}
+ description="This card renders as a button element and triggers an onClick handler."
+ onClick={() => handleCardClick('button-demo')}
+ />
+ {clickedCard === 'button-demo' && (
+
✓ Button clicked!
+ )}
+
+
+
+
As Link (href)
+
}
+ title={"Navigate"}
+ description="This card renders as an anchor element and navigates to the specified href."
+ href="#link-demo"
+ />
+
↑ Click to navigate to #link-demo
+
+
+
+ {/* Dimensions */}
+
+
+
+ Dimensions
+
+
+ {/* Header Row */}
+
+
+
+
Card Width
+
400px (full-width on mobile)
+
+
+
+
+
+
+
+
+
+
+
Icon Container
+
84px × 84px
+
+
+
+
+
Icon Size
+
~68px × 68px
+
+
+
+
+
Content Gap
+
40px (between title and description)
+
+
+
+ {/* Typography */}
+
+
+
+ Typography
+
+
+
+
Title
+
+ - Font Size: 32px
+ - Font Weight: 300 (light)
+ - Line Height: 40px
+ - Letter Spacing: -1px
+
+
+
+
Description
+
+ - Font Size: 18px
+ - Font Weight: 300 (light)
+ - Line Height: 26.1px
+ - Letter Spacing: -0.5px
+
+
+
+
+ {/* API Reference */}
+
+
+
+ Component API
+
+ {/* Header Row */}
+
+
Prop
+
Type
+
Default
+
Description
+
+
+ {/* variant */}
+
+
variant
+
'neutral' | 'green'
+
'neutral'
+
Color variant of the card
+
+
+
+ {/* icon */}
+
+
icon
+
ReactNode | string
+
required
+
Icon element or image URL
+
+
+
+ {/* title */}
+
+
title
+
string
+
required
+
Card title (use \n for line breaks)
+
+
+
+ {/* description */}
+
+
description
+
string
+
required
+
Card description text
+
+
+
+ {/* onClick */}
+
+
onClick
+
() => void
+
undefined
+
Click handler (renders as button)
+
+
+
+ {/* href */}
+
+
href
+
string
+
undefined
+
Link destination (renders as anchor)
+
+
+
+ {/* disabled */}
+
+
disabled
+
boolean
+
false
+
Disabled state
+
+
+
+ {/* className */}
+
+
className
+
string
+
''
+
Additional CSS classes
+
+
+
+ {/* Usage Examples */}
+
+
+
+ Usage Examples
+
+
+ {/* Basic Usage */}
+
+
Basic Usage
+
+{`import { CardOffgrid } from 'shared/components/CardOffgrid';
+
+}
+ title="Onchain\\nMetadata"
+ description="Easily store key asset information..."
+ onClick={() => console.log('clicked')}
+/>`}
+
+
+
+ {/* With Link */}
+
+
+ {/* Disabled State */}
+
+
Disabled State
+
+{`}
+ title="Coming Soon"
+ description="This feature is not yet available..."
+ disabled
+/>`}
+
+
+
+
+ {/* Figma References */}
+
+
+
+ Figma References
+
+
+
+
+