GameCard

A cross-platform React card component for displaying game promotions with customizable tags, images, and action buttons. Perfect for game catalogs, reward systems, and promotional content.

Installation

npm install @xsolla/xui-game-card
# or
yarn add @xsolla/xui-game-card

Demo

Basic GameCard

import * as React from 'react';
import { GameCard } from '@xsolla/xui-game-card';

export default function BasicGameCard() {
  return (
    <GameCard
      image="https://example.com/game.jpg"
      title="Whiteout Survival"
      subtitle="Strategy • Puzzle • Building"
      buttonText="Play"
    />
  );
}

GameCard with Tags

import * as React from 'react';
import { GameCard } from '@xsolla/xui-game-card';
import { Tag } from '@xsolla/xui-tag';
import { XsollaTicket, XsollaPoint } from '@xsolla/xui-icons-currency';

export default function GameCardWithTags() {
  return (
    <GameCard
      image="https://example.com/game.jpg"
      title="Whiteout Survival"
      subtitle="Strategy • Puzzle • Building"
      tagsTopLeft={
        <>
          <Tag size="sm" tone="brand" icon={<XsollaPoint />}>250</Tag>
          <Tag size="sm" tone="secondary" icon={<XsollaTicket />}>5x</Tag>
        </>
      }
      tagsTopRight={<Tag size="sm" tone="secondary">10h left</Tag>}
      buttonText="Activate"
    />
  );
}

GameCard with Custom Trailing

import * as React from 'react';
import { GameCard } from '@xsolla/xui-game-card';
import { Button } from '@xsolla/xui-button';
import { Badge } from '@xsolla/xui-badge';

export default function GameCardCustomTrailing() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      {/* Custom Button */}
      <GameCard
        image="https://example.com/game.jpg"
        title="Epic Adventure"
        subtitle="RPG • Action"
        trailing={
          <Button size="xs" tone="brand">
            Play Now
          </Button>
        }
      />

      {/* Price Display */}
      <GameCard
        image="https://example.com/game.jpg"
        title="Premium Bundle"
        subtitle="Action • Adventure"
        trailing={
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontSize: 14, fontWeight: 600 }}>$29.99</div>
            <div style={{ fontSize: 11, textDecoration: 'line-through', opacity: 0.6 }}>$49.99</div>
          </div>
        }
      />

      {/* Badge */}
      <GameCard
        image="https://example.com/game.jpg"
        title="Free to Play"
        subtitle="Casual • Puzzle"
        trailing={<Badge size="xl" tone="success">FREE</Badge>}
      />
    </div>
  );
}

GameCard Sizes

import * as React from 'react';
import { GameCard } from '@xsolla/xui-game-card';

export default function GameCardSizes() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
      <div style={{ maxWidth: 366 }}>
        <p>Large (lg)</p>
        <GameCard
          image="https://example.com/game.jpg"
          title="Game Title"
          subtitle="Genre"
          size="lg"
          buttonText="Play"
        />
      </div>
      <div style={{ maxWidth: 280 }}>
        <p>Medium (md)</p>
        <GameCard
          image="https://example.com/game.jpg"
          title="Game Title"
          subtitle="Genre"
          size="md"
          buttonText="Play"
        />
      </div>
      <div style={{ maxWidth: 200 }}>
        <p>Small (sm)</p>
        <GameCard
          image="https://example.com/game.jpg"
          title="Game Title"
          subtitle="Genre"
          size="sm"
          buttonText="Play"
        />
      </div>
    </div>
  );
}

Anatomy

Import the component and use it directly:

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

<GameCard
  image="..."              // Required: Game artwork URL
  title="Game Title"       // Required: Game name
  subtitle="Genre"         // Optional: Categories/genre
  size="lg"                // Size variant
  tagsTopLeft={<Tag />}    // Custom top-left content
  tagsTopRight={<Tag />}   // Custom top-right content
  trailing={<Button />}    // Custom trailing content
  buttonText="Play"        // Default button text (if no trailing)
  onButtonClick={() => {}} // Default button handler
  onPress={() => {}}       // Card press handler
/>

API Reference

GameCard

A card component for displaying game promotions.

GameCard Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | image | string | required | Game artwork image URL. | | title | string | required | Game title. | | subtitle | string | - | Game subtitle (e.g., genre tags). | | size | "lg" \| "md" \| "sm" | "lg" | Size variant of the card. | | tagsTopLeft | ReactNode | - | Custom content for top-left corner. | | tagsTopRight | ReactNode | - | Custom content for top-right corner. | | trailing | ReactNode | - | Custom trailing content (button, price, etc.). | | buttonText | string | - | Button label text (if trailing not provided). | | onButtonClick | () => void | - | Button click handler (if trailing not provided). | | onPress | () => void | - | Card click handler. | | imageAlt | string | - | Alt text for game image. | | className | string | - | Custom className for the container. |

Size Dimensions:

| Size | Image Aspect Ratio | Reference Width | | :--- | :----------------- | :-------------- | | lg | 366:206 (~16:9) | 366px | | md | 280:158 (~16:9) | 280px | | sm | 200:113 (~16:9) | 200px |

Theming

GameCard uses the design system theme for colors:

// Colors accessed via theme
theme.colors.background.primary  // Card background
theme.colors.content.primary     // Title text
theme.colors.content.tertiary    // Subtitle text
theme.shadow.surface             // Card shadow

Accessibility

• Uses semantic HTML structure
• Image includes alt text (defaults to title)
• Interactive elements are keyboard accessible
• Supports custom onPress for full card interaction