@xsolla/xui-game-card

Game artwork card with image, title, subtitle, corner tags, and a trailing action.

Installation

yarn add @xsolla/xui-game-card

Usage

import { GameCard } from '@xsolla/xui-game-card';

<GameCard
  image="https://example.com/game.jpg"
  title="Whiteout Survival"
  subtitle="Strategy • Puzzle"
  size="lg"
  buttonText="Activate"
  onButtonClick={() => console.log('clicked')}
/>

Props

GameCard

| Prop | Type | Default | Description | |------|------|---------|-------------| | image | string | — | Game artwork image URL | | title | string | — | Game title | | subtitle | string | — | Game subtitle (e.g. genre tags) | | size | "lg" \| "md" \| "sm" | "lg" | Size variant of the card | | tagsTopLeft | ReactNode | — | Content for top-left corner | | tagsTopRight | ReactNode | — | Content for top-right corner | | trailing | ReactNode | — | Custom trailing content; overrides buttonText | | buttonText | string | — | Button label (used when trailing is not provided) | | onButtonClick | () => void | — | Button click handler | | onPress | () => void | — | Card press handler |