@wix/design-system/dist/esm/Proportion/docs/examples.js

@wix/design-system

export var simple = "\n<div\n  data-hook=\"proportion-example-basic\"\n  style={{ background: '#F0F4F7', padding: 30 }}\n>\n  <Layout>\n    <Cell span={4}>\n      <Proportion aspectRatio={1}>\n        <AddItem />\n      </Proportion>\n    </Cell>\n    <Cell span={8}>\n      <Card>\n        <Card.Header title=\"Square Proportion\" />\n        <Card.Divider />\n        <Card.Content>I don't maintain proportion</Card.Content>\n      </Card>\n    </Cell>\n    <Cell span={4}>\n      <Proportion aspectRatio={3 / 4}>\n        <AddItem />\n      </Proportion>\n    </Cell>\n    <Cell span={8}>\n      <Card>\n        <Card.Header title=\"Portrait Proportion\" />\n        <Card.Divider />\n        <Card.Content>I don't maintain proportion</Card.Content>\n      </Card>\n    </Cell>\n    <Cell span={4}>\n      <Proportion aspectRatio={16 / 9}>\n        <AddItem />\n      </Proportion>\n    </Cell>\n    <Cell span={8}>\n      <Card>\n        <Card.Header title=\"Cinema Proportion\" />\n        <Card.Divider />\n        <Card.Content>I don't maintain proportion</Card.Content>\n      </Card>\n    </Cell>\n    <Cell span={4}>\n      <Proportion aspectRatio={4 / 3}>\n        <AddItem />\n      </Proportion>\n    </Cell>\n    <Cell span={8}>\n      <Card>\n        <Card.Header title=\"Landscape Proportion\" />\n        <Card.Divider />\n        <Card.Content>I don't maintain proportion</Card.Content>\n      </Card>\n    </Cell>\n    <Cell span={4}>\n      <Proportion aspectRatio={9.5 / 3}>\n        <AddItem />\n      </Proportion>\n    </Cell>\n    <Cell span={8}>\n      <Card>\n        <Card.Header title=\"Custom Proportion (9.5 / 3)\" />\n        <Card.Divider />\n        <Card.Content>I don't maintain proportion</Card.Content>\n      </Card>\n    </Cell>\n  </Layout>\n</div>\n";