Shape - Web Component ​

Browser support ​

Parameters ​

The Web component uses the <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.

shape ​

The shapeis used to define the shape to display. Possible values are 1, 2, 3, 4, 5, 6, 7.

All this shapes can be flipped by adding the flip parameter. The pattern is <shape><?:flip>

The size of the shape can be customized using the --z-shape--size CSS custom property.

Playground ​

Customization ​

HTML Examples ​

Imports
html
<link rel="stylesheet" href="/0.3.10/@zurich/web-components/styles.css" />
<script type="module" src="/0.3.10/@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>