Shape - Web Component ​

...

Browser support ​

Parameters ​

The Web component uses a <z-shape> tag.

The parametrization of the component can be done with the following custom HTML params:

NameTypeDescription
shapestring

The main parameter has two components following the pattern: <shape><?:flip> where:

  • shape: Value of the shape to display. Possible values are 1, 2, 3, 4, 5, 6, 7
  • flip: Optional parameter to flip the shape.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.3.7/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.7/@zurich/web-components/shape.js"></script>
Code
html
<z-shape shape="3"></z-shape>
<z-shape shape="4"></z-shape>
<z-shape shape="5"></z-shape>