wix-style-react/src/FeatureList/docs/FeatureList.examples.js

wix-style-react

export const _structure = `
<FeatureList
  features={[
    {
      image: <Image width={60} height={60} />,
      title: 'Feature Title',
      text: 'This is a short and catchy feature description',
    },
    {
      image: <Image width={60} height={60} />,
      title: 'Feature Title',
      text: 'This is a short and catchy feature description',
    },
    {
      image: <Image width={60} height={60} />,
      title: 'Feature Title',
      text: 'This is a short and catchy feature description',
    },
  ]}
/>;
`;

export const _numberOfColumns = `
<FeatureList
  cols={2}
  features={[
    {
      image: <Image width={60} height={60} />,
      title: 'Feature Title',
      text: 'This is a short and catchy feature description',
    },
    {
      image: <Image width={60} height={60} />,
      title: 'Feature Title',
      text: 'This is a short and catchy feature description',
    },
    {
      image: <Image width={60} height={60} />,
      title: 'Feature Title',
      text: 'This is a short and catchy feature description',
    },
    {
      image: <Image width={60} height={60} />,
      title: 'Feature Title',
      text: 'This is a short and catchy feature description',
    },
  ]}
/>;
`;

export const _listWithoutImages = `
<FeatureList
  features={[
    {
      title: 'Analytics & Reports',
      text:
        'See how visitors interact with your business and optimize your site.',
    },

    {
      title: 'Financial Tools',
      text:
        'Get paid online, create price quotes & send invoices to customers.',
    },
    {
      title: 'SEO Tools',
      text: 'Rank higher on Google using advanced SEO tools.',
    },
  ]}
/>;
`;

export const _marketingPage = `
<Card backgroundColor="D80">
  <MarketingPageLayout
    content={
      <Box height="480px" verticalAlign="middle">
        <MarketingPageLayoutContent
          title="Upgrade Your Site with a Premium Plan"
          content="Wix gives you everything you need for a stunning website. Upgrade your site to Premium and get even more."
          actions={
            <Button skin="premium" size="large">
              Upgrade Your Site
            </Button>
          }
        />
      </Box>
    }
    image={<Image src="marketing_page.png" transparent />}
    footer={
      <FeatureList
        features={[
          {
            image: (
              <Image
                width={60}
                height={60}
                src={'connect_domain.svg'}
                transparent
              />
            ),

            title: 'Connect a Custom Domain',
            text: 'Get your business found with a custom domain.',
          },
          {
            image: (
              <Image
                width={60}
                height={60}
                src={'payment_methods.svg'}
                transparent
              />
            ),

            title: 'Accept Online Payment',
            text: 'Let your customers and clients pay you online at checkout.',
          },
          {
            image: (
              <Image
                width={60}
                height={60}
                src={'email_account.svg'}
                transparent
              />
            ),

            title: 'Connect Your Gmail Account',
            text: 'Always stay connected by syncing Gmail yo your Wix Inbox.',
          },
        ]}
      />
    }
  />
</Card>;
`;