CardBanner

Install

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

Examples

Product card
Partner Network News
Partner Network lets you manage every affiliate and influencer program with a single, easy-to-use, cost-effective tool.
Product card with upsell child and footer
Partner Network News
Title
Description
Learn more
5 min
Partner Network News
Title
Description
Learn more
5 min

Usage

<CardBanner
      className={cx('example-banner-card')}
      image={url}
      badge="Partner Network News"
      footer={
        <FormFooter ignoreCentered={true}>
          <Button>Connect</Button>
        </FormFooter>
      }
      children={
        <FormGroup indentation="sm">
          Partner Network lets you manage every affiliate and influencer program with a single,
          easy-to-use, cost-effective tool.
        </FormGroup>
      }
    />

API

PropertyDescriptionTypeDefault
childrencontent of BannerCardReactNode
footerfooter of BannerCardReactNode
classNamecustom className for BannerCardstring
imageimagestring
badgebadge text for BannerCardstring
cardDataIdAttribute for data identifierstring
badgeDataIdAttribute for data identifierstring
imageDataIdAttribute for data identifierstring