Shape Component

This component allows you to create a variety of different shapes with content.

NOTE
Contrary to the shape grid, this component simply adds the shape class to a Block component.
<div class="bg-image bg-overlay shape">
  <slot />
</div>

Arguments

Name	Type	Description	Default
size	String	Width of the shapes
type	String	Type of shape
aspect	Number	Aspect ratio of the shape	1
horizontal-clip	Number	Horizontal clipping distance (between 0-0.5)	0
vertical-clip	Number	Vertical clipping distance (between 0-0.5)	0

NOTE
The basic way to use this component is to construct a shape with the size, aspect, horizontal-clip and vertical-clip properties. However, this is quite error prone and thus there is an alternative method with only size and type. If type is one of the following values, the aspect, horizontal-clip and vertical-clip will be setup automatically:

hexagon

hexagon-vertical

rhombus

octagon

Slots

/

Examples

Default Shapes

shape-default

---
layout: stack
content-class: flex-row gap-25 mb-14
---

# Shape
::content::

<Shape size="150px" type="hexagon" />
<Shape size="150px" type="hexagon-vertical" />
<Shape size="150px" type="octagon" />
<Shape size="150px" type="rhombus" />

---

Custom Shapes

shape-custom

---
layout: stack
content-class: flex-row gap-25 mb-14
---

# Shape
::content::

<Shape
  size="150px"
  :aspect="1.0" :vertical-clip="0.2" :horizontal-clip="0.4"
/>

<Shape
  size="150px"
  :aspect="0.6" :vertical-clip="0.5" :horizontal-clip="0.5"
/>

<Shape
  size="150px"
  :aspect="1.5" :vertical-clip="0.5" :horizontal-clip="0.1"
/>

---

Block Properties

shape-effects

---
layout: stack
content-class: flex-row gap-25 mb-14
---

# Shape
::content::

<Shape
  size="300px" type="rhombus"
  color="var(--kul-blue-200)"
/>

<Shape
  size="300px" type="octagon"
  image="https://i.pravatar.cc/300"
  color="undefined"
/>

<Shape
  size="300px" type="hexagon"
  image="https://images.unsplash.com/..."
  image-filter="blur(1px)"
  color-opacity="0.6"
/>

---