## Feature Examples


### Structure
- description: Control the option label type by passing relevant compound components as child items. It accepts 2 types:<br/>
        &emsp;- `content` - use it to add textual content using `<MarketingPageLayoutContent/>` component.<br/>
        &emsp;- `image` - use it to show a preview of a promoted product.<br/>
        &emsp;- `footer` - use it to list key features or user testimonials.<br/>
- example: 
```jsx 
<MarketingPageLayout
  content={
    <StorybookComponents.Stack height="400px">
      <StorybookComponents.Placeholder>Content</StorybookComponents.Placeholder>
    </StorybookComponents.Stack>
  }
  image={<Image height="400px" />}
  footer={
    <StorybookComponents.Stack height="100px">
      <StorybookComponents.Placeholder>Footer</StorybookComponents.Placeholder>
    </StorybookComponents.Stack>
  }
/>;
```

### Content
- description: Use
        <a href="https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-api-components--marketingpagelayoutcontent" target="_blank">\<MarketingPageLayoutContent/></a>
        component to layout text inside a content area. It consists of outline, title, subtitle, content and actions areas.
- example: 
```jsx 
<MarketingPageLayout
  content={
    <MarketingPageLayoutContent
      overline="Overline"
      title="Title"
      subtitle="Subtitle"
      content="Content"
      actions={<Button size="large">Action</Button>}
    />
  }
  image={<Image />}
/>;
```

### Padding
- description: Control side paddings of a page with `horizontalSize` prop. It supports 2 values:<br/>
        &emsp;- `large` (default) - use for screen sizes with width >1464px.<br/>
        &emsp;- `medium` - use for screen sizes with width <1464px.<br/>
        <br/>
        Control top and bottom paddings of a page with `verticalSize` prop. It supports 2 values:<br/>
        &emsp;- `large` (default) - use for screen sizes with height >630px.<br/>
        &emsp;- `medium` - use for screen sizes with height <630px.<br/>
        
- example: 
```jsx 
<StorybookComponents.Stack flexDirection="column">
  <Card>
    <MarketingPageLayout
      horizontalSize="large"
      verticalSize="large"
      image={<Image />}
      content={
        <MarketingPageLayoutContent
          size="large"
          title="Large title"
          content={
            <Text size="medium">
              <ul>
                <li>Large content item one</li>
                <li>Large content item two</li>
                <li>Large content item three</li>
              </ul>
            </Text>
          }
          actions={<Button size="large">Large Action</Button>}
        />
      }
    />
  </Card>
  <Card>
    <MarketingPageLayout
      horizontalSize="medium"
      verticalSize="medium"
      image={<Image />}
      content={
        <MarketingPageLayoutContent
          size="medium"
          title="Medium title"
          content={
            <Text size="small">
              <ul>
                <li>Medium content item one</li>
                <li>Medium content item two</li>
                <li>Medium content item three</li>
              </ul>
            </Text>
          }
          actions={<Button size="medium">Medium Action</Button>}
        />
      }
    />
  </Card>
</StorybookComponents.Stack>;
```

### Full Size Image
- description: Extend preview image to the edges of a screen by removing paddings for it with `removeImageHorizontalPadding` and `removeImageVerticalPadding` props.
- example: 
```jsx 
<Card>
  <MarketingPageLayout
    content={
      <MarketingPageLayoutContent
        overline="Overline"
        title="Title"
        content={
          <Text>
            <ul>
              <li>Bullet item 1</li>
              <li>Bullet item 2</li>
              <li>Bullet item 3</li>
            </ul>
          </Text>
        }
        actions={<Button size="large">Action</Button>}
      />
    }
    image={<Image />}
    removeImageHorizontalPadding
    removeImageVerticalPadding
  />
</Card>;
```




    


## Common Use Case Examples


### List in a footer
- description: Emphasize product quality and benefits by listing user testimonials or product features in a footer.<br/><br/>
        Use `<TestimonialList/>` and `<FeatureList/>` components for that.
- example: 
```jsx 
<Card>
  <MarketingPageLayout
    content={
      <Box height="612px" verticalAlign="middle">
        <MarketingPageLayoutContent
          title="Reach the Right Shoppers on Facebook & Instagram"
          subtitle="Get set up and Wix’s AI will take care of the rest"
          content={
            <Text>
              <ul>
                <li>Show your ad to the people most likely to buy</li>
                <li>Test your ad non-stop to see what’s working </li>
                <li>Optimize your budget to get you the best results </li>
              </ul>
            </Text>
          }
          actions={
            <Box gap="12px">
              <Button size="medium">Start Now</Button>
              <Button priority="secondary" prefixIcon={<Icons.PlayFilled />}>
                Get to Know Wix's AI
              </Button>
            </Box>
          }
        />
      </Box>
    }
    image={<Image src="MarketingIllustration2.png" />}
    footer={
      <TestimonialList
        testimonials={[
          {
            id: '0001',
            avatar: <Avatar name="Guy in glasses" size="size60" />,
            text: 'I love it! It helped me to increase the sales.',
            authorName: 'John Smith',
          },
          {
            id: '0002',
            avatar: <Avatar name="Person with a hat" size="size60" />,
            text: 'Amazing! It is simple to use, I had no struggle to setup.',
            authorName: 'Templeton Peck',
          },
          {
            id: '0003',
            avatar: <Avatar name="Smiling lady" size="size60" />,
            text: 'A perfect tool for creating ad campaigns that sell.',
            authorName: 'Bosco B.A.',
          },
        ]}
      />
    }
  />
</Card>;
```

### Extended Image
- description: Provide detailed visuals for product marketing by extending the image to the edges of a page.
- example: 
```jsx 
<Card>
  <MarketingPageLayout
    removeImageHorizontalPadding
    removeImageVerticalPadding
    content={
      <Box height="840px" verticalAlign="middle">
        <MarketingPageLayoutContent
          title="Streamline your workflow with Ascend business tools"
          content="Simplify the way you track leads, bill clients* and manage your projects. Unlock email marketing, workflows and automations when you reach Pioneer level."
          actions={<Button>Check Your Level</Button>}
        />
      </Box>
    }
    image={<Image borderRadius={0} src="MarketingIllustration3.png" />}
  />
</Card>;
```