Content
Mask
The mask feature trims the content of an element into unique shapes, providing a simple way to create visually distinct designs.
Basic examples
Squircle
By applying the class `mask` along with `mask-{shape-name}` to an element, you can utilize various shapes to clip your image.
Heart
Example of heart.
Hexagon
Example of hexagon.
Hexagon-2
Example of hexagon-2.
Decagon
Example of decagon.
Pentagon
Example of pentagon.
Diamond
Example of diamond.
Circle
Example of circle.
Parallelogram
Example of parallelogram.
Parallelogram-2
Example of parallelogram-2.
Parallelogram-3
Example of parallelogram-3.
Parallelogram-4
Example of parallelogram-4.
Star
Example of star.
Star-2
Example of star-2.
Triangle
Example of triangle.
Triangle-2
Example of triangle-2.
Triangle-3
Example of triangle-3.
Triangle-4
Example of triangle-4.
Sides
mask-half-1
Utilizing the classes `mask-half-1` and `mask-half-2` in conjunction with `mask-shape_name` allows you to isolate specific sides of the shape. `mask-half-1` represents the left side, while `mask-half-2` represents the right side. Incorporate these classes to enhance the style and appearance of your mask shapes.
mask-half-2
Example of mask-half-2.
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
mask | component | Masks the content with shape. |
mask-squircle | modifier | Applies squircle shape. |
mask-heart | modifier | Applies heart shape. |
mask-hexagon | modifier | Applies hexagon shape. |
mask-hexagon-2 | modifier | Applies hexagon alternative shape. |
mask-decagon | modifier | Applies decagon shape. |
mask-pentagon | modifier | Applies pentagon shape. |
mask-diamond | modifier | Applies diamond shape. |
mask-square | modifier | Applies square shape. |
mask-circle | modifier | Applies circle shape. |
mask-parallelogram | modifier | Applies parallelogram shape. |
mask-parallelogram-2 | modifier | Applies parallelogram alternative shape. |
mask-parallelogram-3 | modifier | Applies parallelogram alternative shape. |
mask-parallelogram-4 | modifier | Applies parallelogram alternative shape. |
mask-star | modifier | Applies star shape. |
mask-star-2 | modifier | Applies star alternative shape. |
mask-triangle | modifier | Applies triangle shape. |
mask-triangle-2 | modifier | Applies triangle alternative shape. |
mask-triangle-3 | modifier | Applies triangle alternative shape. |
mask-triangle-4 | modifier | Applies triangle alternative shape. |
mask-half-1 | modifier | Crops only the first half of mask. |
mask-half-2 | modifier | Crops only the second half of mask. |