Cards
Where to Use Service Card in React Apps
Service Card presents dark and light product cards with GLB wells, segment pills, and share actions. Catalog and marketplace teams ship it when each offering needs a tactile, shareable product story instead of a flat list row.
Where teams use Service Card
Use case 1
Product marketing grid
Landing and catalog pages use paired light/dark cards with 3D wells for hero products. Segment pills communicate SKU variants without opening a PDP.
Use case 2
API and service marketplace
Platform marketplaces list integrations as service cards with share actions for partner outreach. Theme variants match host light and dark shells.
Use case 3
Internal tool catalog
Platform teams publish internal services with the same card pattern so discoverability matches consumer quality. Share copies deep links to Slack.
Use case 4
Portfolio or case study tiles
Agency sites showcase engagements with GLB accents and segment tags for industry. Cards stay consistent across case study indexes.
Who it is for
Design-system and marketing engineers building product and service showcase grids.
Try Service Card on AkmanOS
Compare light and dark treatments in the live preview, then copy markdown into your AI editor to adapt Service Card to your catalog data.
Preview /preview/service-cardMore in Cards
- Add-ons & IntegrationsFilterable grid of integrations and premium add-ons with connect, upgrade, and status badges. Explore real product surfaces for the Add-ons & Integrations component — then open the live AkmanOS preview and copy production-ready source.
- Agent Limits CardContext window breakdown with segmented usage bar, expandable tool groups, and plan limit meters. Explore real product surfaces for the Agent Limits Card component — then open the live AkmanOS preview and copy production-ready source.
- AI Chat HeroCream grain landing hero with Acme nav, launch badge, Pro chat shell, model picker, and partner row. Explore real product surfaces for the AI Chat Hero component — then open the live AkmanOS preview and copy production-ready source.
- Bento CardCycling 2×2 bento carousel — four 1:1 tiles per layout, opposite row slide directions. Explore real product surfaces for the Bento Card component — then open the live AkmanOS preview and copy production-ready source.