Card

Install

import {Card} from '@xsolla/uikit';

Examples

Product card
Partner Network
Partner Network lets you manage every affiliate and influencer program with a single, easy-to-use, cost-effective tool.
Module card
Virtual Currency
Ready
Partner Network lets you manage every affiliate and influencer program with a single, easy-to-use, cost-effective tool.
Connected
Promotions
Sell in-game items that players purchase with virtual or real currency.
Promotions
Sell in-game items that players purchase with virtual or real currency.
Promotions
Sell in-game items that players purchase with virtual or real currency.

Usage

<Card hoverable={true}>
  {({hovered}) => (
    <Fragment>
      <Head appearance="separated">Partner Network</Head>
      <FormGroup indentation="sm">
        Partner Network lets you manage every affiliate and influencer program with a single,
        easy-to-use, cost-effective tool.
      </FormGroup>
      <FormGroup indentation="xs">
        <a href="/">
          Documentation&nbsp;<Icon name="new-tab" />
        </a>
      </FormGroup>
      <div style={{marginTop: 'auto'}}>
        <FormFooter ignoreCentered={true}>
          <Button appearance={hovered ? 'primary' : 'outline-primary'}>Connect</Button>
        </FormFooter>
      </div>
    </Fragment>
  )}
</Card>

API

PropertyDescriptionTypeDefault
childrenentry of card (return ({hovered})Function
classNamecustom className for Cardstring
hoverablehover effectbooleanfalse
connectedconnect to other cardsbooleanfalse
shadowTypetype of cards shadowhard, softhard
dataIdattribute for data identifierstring