@wix/design-system/dist/docs/components/MarketingPageLayoutContentExamples.md

@wix/design-system

## 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: <br/>
        &emsp;- `large` (default) - use it in larger screens sizes.<br/>
        &emsp;- `medium` - use it in smaller screen sizes.<br/>
        <br/>
        Read more about screen sizes in
        <a href="https://www.wix-pages.com/wix-design-system-employees/?path=/story/components-api-components--marketingpagelayout">`<MarketingPageLayout/>`</a>.
- 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>;
```