## Feature Examples

### Structure
- description: The component consists of \`outline\`, \`title\`, \`subtitle\`, \`content\` and \`actions\` areas. Each area is optional and highly customizable.
- example:
```jsx
<MarketingPageLayoutContent
  overline="Overline"
  title="Title"
  subtitle="Subtitle"
  content="Content"
  actions={<Button size="large">Action</Button>}
/>;
```

### Size
- description: Adjust the size of the content with \`size\` prop. It supports two sizes:\ - \`large\` (default) - use it in larger screens sizes.\ - \`medium\` - use it in smaller screen sizes.\ \ Read more about screen sizes in [`<MarketingPageLayout/>`](https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-api-components--marketingpagelayout).
- example:
```jsx
<StorybookComponents.Stack>
  <StorybookComponents.Stack width="100%">
    <MarketingPageLayoutContent
      overline="Large overline"
      title="Large title"
      subtitle="Large subtitle"
      content="Large content"
      actions={<Button size="large">Large Action</Button>}
    />
  </StorybookComponents.Stack>
  <StorybookComponents.Stack width="100%">
    <MarketingPageLayoutContent
      size="medium"
      overline="Medium overline"
      title="Medium title"
      subtitle="Medium subtitle"
      content="Medium content"
      actions={<Button size="medium">Medium Action</Button>}
    />
  </StorybookComponents.Stack>
</StorybookComponents.Stack>;
```

## Common Use Case Examples

### Bulleted list
- description: This component is highly customizable and supports complex layouts. This example shows how to add a bulleted list to the content area and a footnote to the actions area.
- example:
```jsx
<MarketingPageLayoutContent
  overline="Coming Soon"
  title="Create a Branded Client Experience"
  content={
    <Text>
      <ul>
        <li>Brand your dashboard with a custom logo</li>
        <li>Remove Wix ads and promotions</li>
        <li>Promote your business when sharing in-progress work</li>
        <li>Customize your client’s dashboard</li>
      </ul>
    </Text>
  }
  actions={
    <Layout>
      <Cell>
        <Button size="large">Contact Us</Button>
        <Box inline marginLeft="12px">
          <TextButton>Learn More</TextButton>
        </Box>
      </Cell>
      <Cell>
        <Text size="tiny" secondary>
          Custom branding is free for Partners who have reached the Icon and
          Legend level. Have less than 2000 points? Purchase custom branding for
          $200/month.
        </Text>
      </Cell>
    </Layout>
  }
/>;
```

### Marketing page
- description: `<MarketingPageLayoutContent/>` should be used as a building part of a marketing page.
- example:
```jsx
<Card>
  <MarketingPageLayout
    horizontalSize="medium"
    verticalSize="medium"
    content={
      <Box verticalAlign="middle" height="360px">
        <MarketingPageLayoutContent
          size="medium"
          title="Earn revenue share on your client sites"
          content="Once you reach Legend level, you can earn 20% revenue share on select Premium Plans you sell to clients."
          actions={<Button size="medium">Check Your Level</Button>}
        />
      </Box>
    }
    image={<Image src="marketingPageLayout.png" />}
  />
</Card>;
```