## Feature Examples


### Skins
- description: <p>A Skeleton can be rendered on any background, in order to prevent high contrast we provide 2 skins, \</p>
- example: 
```jsx 
() => {
  return (
    <Layout>
      <Cell span={6}>
        <Box backgroundColor="white" padding="SP5" width="200">
          <SkeletonGroup skin="light" backgroundColor="white">
            <Layout>
              <Cell>
                <Layout>
                  <Cell span={2}>
                    <SkeletonCircle diameter="32px" />
                  </Cell>
                  <Cell span={5}>
                    <Box direction="vertical">
                      <SkeletonLine marginBottom="5px" />
                      <SkeletonLine marginBottom="5px" />
                    </Box>
                  </Cell>
                </Layout>
              </Cell>
              <Cell>
                <SkeletonRectangle height="150px" />
              </Cell>
            </Layout>
          </SkeletonGroup>
        </Box>
      </Cell>
      <Cell span={6}>
        <Box backgroundColor="gray" padding="SP5" width="200">
          <SkeletonGroup skin="dark" backgroundColor="gray">
            <Layout>
              <Cell>
                <Layout>
                  <Cell span={2}>
                    <SkeletonCircle diameter="32px" />
                  </Cell>
                  <Cell span={5}>
                    <Box direction="vertical">
                      <SkeletonLine marginBottom="5px" />
                      <SkeletonLine marginBottom="5px" />
                    </Box>
                  </Cell>
                </Layout>
              </Cell>
              <Cell>
                <SkeletonRectangle height="150px" />
              </Cell>
            </Layout>
          </SkeletonGroup>
        </Box>
      </Cell>
    </Layout>
  );
};
```