
## Feature Examples


### Structure
- description: This component displays feature items in columns. Each item can contain:<br/>
        &emsp;- `image` - use to display image preview or illustration of a feature. It’s recommended to keep image dimensions to 60x60px<br/>
        &emsp;- `title` - use for feature name<br/>
        &emsp;- `text` - use for short feature description.
- example: 
```jsx 
<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',
    },
  ]}
/>;
```

### Number of columns
- description: Control number of columns displayed in a row with `cols` prop.
        If items do not fit in a row it will wrap to another line.
- example: 
```jsx 
<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',
    },
  ]}
/>;
```




    


## Common Use Case Examples


### List without images
- description: All `features` list props are optional.
        Create custom design by displaying only what's necessary in your use case, i.e., features list without images.
- example: 
```jsx 
<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.',
    },
  ]}
/>;
```

### Marketing page
- description: Use features list as a footer of `<MarketingPage/>` to promote your product better by listing down its key benefits.
- example: 
```jsx 
<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>;
```


