## Feature Examples

### Plain Example
- description: A simple example with short content and buttons in the footer.
- example:
```jsx
() => {
  const [open, setOpen] = React.useState(false);

  return (
    <div>
      <Button onClick={() => setOpen(!open)}>Open</Button>
      <Modal
        isOpen={open}
        onRequestClose={() => setOpen(false)}
        contentLabel="Mobile modal example"
        scrollable={false}
        scrollableContent
        screen="mobile"
      >
        <ModalMobileLayout
          title={<Text weight="bold">Enter VAT ID</Text>}
          content={
            <Text weight="thin">
              Enter a valid European Union VAT identification number for the
              ‘Reverse Charge’ mechanism in order to apply.
            </Text>
          }
          footer={
            <Box align="right">
              <Box marginRight="12px">
                <Button priority="secondary" onClick={() => setOpen(false)}>
                  Cancel
                </Button>
              </Box>
              <Button onClick={() => setOpen(false)}>OK</Button>
            </Box>
          }
          onOverlayClick={() => setOpen(false)}
        />
      </Modal>
    </div>
  );
};
```

### Title
- description: 
- example:
```jsx
<Layout>
  <Cell>
    <ModalMobileLayout
      title={<Text weight="bold">Enter VAT ID</Text>}
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
      footer={
        <Box align="right">
          <Box marginRight="12px">
            <Button priority="secondary">Cancel</Button>
          </Box>
          <Button>Save</Button>
        </Box>
      }
      onCloseButtonClick={() => {}}
    />
  </Cell>

  <Cell>
    <ModalMobileLayout
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
      footer={
        <Box align="right">
          <Box marginRight="12px">
            <Button priority="secondary">Cancel</Button>
          </Box>
          <Button>Save</Button>
        </Box>
      }
      onCloseButtonClick={() => {}}
    />
  </Cell>
</Layout>;
```

### Sticky Title
- description: 
- example:
```jsx
<div>
  <div style={{ height: '185px' }}>
    <ModalMobileLayout
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
      title={<Text weight="bold">Enter VAT ID</Text>}
      onCloseButtonClick={() => {}}
      stickyTitle
    />
  </div>

  <div style={{ height: '185px' }}>
    <ModalMobileLayout
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
      title={<Text weight="bold">Enter VAT ID</Text>}
      onCloseButtonClick={() => {}}
    />
  </div>
</div>;
```

### Footer
- description: 
- example:
```jsx
<Layout>
  <Cell>
    <ModalMobileLayout
      title={<Text weight="bold">Enter VAT ID</Text>}
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
      footer={
        <Box align="right">
          <Box marginRight="12px">
            <Button priority="secondary">Cancel</Button>
          </Box>
          <Button>Save</Button>
        </Box>
      }
      onCloseButtonClick={() => {}}
    />
  </Cell>

  <Cell>
    <ModalMobileLayout
      title={<Text weight="bold">Enter VAT ID</Text>}
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
      onCloseButtonClick={() => {}}
    />
  </Cell>
</Layout>;
```

### Sticky Footer
- description: 
- example:
```jsx
<div>
  <div style={{ height: '185px' }}>
    <ModalMobileLayout
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
      footer={
        <Box align="right">
          <Box marginRight="12px">
            <Button priority="secondary">Cancel</Button>
          </Box>
          <Button>Save</Button>
        </Box>
      }
      onCloseButtonClick={() => {}}
      stickyFooter
    />
  </div>

  <div style={{ height: '185px' }}>
    <ModalMobileLayout
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
      footer={
        <Box align="right">
          <Box marginRight="12px">
            <Button priority="secondary">Cancel</Button>
          </Box>
          <Button>Save</Button>
        </Box>
      }
      onCloseButtonClick={() => {}}
    />
  </div>
</div>;
```

### Close Button
- description: 
- example:
```jsx
<Layout>
  <Cell>
    <ModalMobileLayout
      title={<Text weight="bold">Enter VAT ID</Text>}
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
      footer={
        <Box align="right">
          <Box marginRight="12px">
            <Button priority="secondary">Cancel</Button>
          </Box>
          <Button>Save</Button>
        </Box>
      }
      onCloseButtonClick={() => {}}
    />
  </Cell>

  <Cell>
    <ModalMobileLayout
      title={<Text weight="bold">Enter VAT ID</Text>}
      content={
        <Text weight="thin" secondary>
          Enter a valid European Union VAT identification number for the
          ‘Reverse Charge’ mechanism in order to apply.
        </Text>
      }
      footer={
        <Box align="right">
          <Box marginRight="12px">
            <Button priority="secondary">Cancel</Button>
          </Box>
          <Button>Save</Button>
        </Box>
      }
    />
  </Cell>
</Layout>;
```

## Common Use Case Examples

### Default Template
- description: 
- example:
```jsx
<Box width="375px" height="640px" backgroundColor="rgba(22, 45, 61, 0.66)">
  <ModalMobileLayout
    title={<Text weight="bold">Enter VAT ID</Text>}
    content={
      <Text weight="thin" secondary>
        Enter a valid European Union VAT identification number for the ‘Reverse
        Charge’ mechanism in order to apply.
      </Text>
    }
    footer={
      <Box align="right">
        <Box marginRight="12px">
          <Button priority="secondary">Cancel</Button>
        </Box>
        <Button>Save</Button>
      </Box>
    }
    onCloseButtonClick={() => {}}
  />
</Box>;
```

### Fullscreen Template
- description: 
- example:
```jsx
<Box width="375px" height="640px">
  <ModalMobileLayout
    fullscreen
    onCloseButtonClick={() => {}}
    content={
      <Box direction="vertical" align="center" textAlign="center">
        <Box marginBottom="36px" marginTop="91px">
          <Image src="Illustration.svg" />
        </Box>
        <Box marginBottom="12px">
          <Heading size="extraLarge">Welcome!</Heading>
        </Box>
        <Box marginBottom="36px">
          <Text weight="thin" secondary>
            First impressions count. Apps have one chance to grab a new user’s
            attention. Use it well.
          </Text>
        </Box>
        <Box marginBottom="18px">
          <Button size="large">Start Now</Button>
        </Box>
        <Box marginBottom="91px">
          <TextButton>Learn More</TextButton>
        </Box>
      </Box>
    }
  />
</Box>;
```