Skip to content

Shape - Web Component

The Shape component can be used imported from:

Playground

Parameters

The Web component uses the <z-shape> tag:

By default, all the parameters are optional or can be set in different, except for the ones marked as required

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

NameTypeDescriptionSlotA11y
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.

Parameters use

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.

Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples

CodeSandbox example