Shape Grid Component

This component allows you to create a masonry grid of various shapes. You can use this for creative background effects or as an alternative for bullet points.

NOTE
Contrary to the shape component, this component first creates a div with the shape class and places a block inside it. This allows for easier styling of the block content.
<div class="shapegrid">
  <div class="shape shape-1">
    <div class="bg-image bg-overlay">
      <slot name="block-1" />
    </div>
  </div>
  <div class="shape shape-2">
    <div class="bg-image bg-overlay">
      <slot name="block-2" />
    </div>
  </div>
  ...
</div>

Arguments

Name	Type	Description	Default
x	Number	Number of shapes horizontally
y	Number	Number of shape rows vertically
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
margin	String	Distance between the shapes	0px
block--*		Any attribute starting with `block--` will be added to all block divs
block-N--*		Any attribute starting with `block-N--` (N a number) will be added to the Nth block div

NOTE
The basic way to use this grid is to construct shapes 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

`::block-N::`

This slot is dynamically created for each shape block and allows you to place content inside of the Nth shape.

WARNING
Currently the slot syntax ::block-N:: is not allowed and thus you need to use <template #block-N>...</template>.

Examples

List Alternative

shape_grid-list_alternative

---
layout: stack
content-class: mb-14
---

# Shape Grid
::content::

<ShapeGrid
  :x="4" :y="2"
  size="200px" type="hexagon-vertical" margin="5px" 
  block--color="var(--kul-blue-200)" block--class="stack"
  block-1--class="hidden" block-4--class="hidden"
>

<template #block-2>Python 3</template>
<template #block-3>Notebook</template>
<template #block-5>NumPy</template>
<template #block-6>Pandas</template>
<template #block-7>PyTorch</template>

</ShapeGrid>

---

Hexagon Cover

shape_grid-hexagon_cover

---
theme: eavise
style: minimal

author: John Doe
image: https://images.unsplash.com/...
class: text-left text-black
---

# What If
## We had impressive slides

<ShapeGrid
  :x="6" :y="9"
  size="200px" type="hexagon" margin="5px"
  class="
    col-start-1 col-end--1 row-start-1 row-end--1
    place-self-center z--1 bg-white mix-blend-lighten"
  block--color="black"
  block-7--class="hidden" block-13--class="hidden"
  block-18--class="hidden" block-19--class="hidden"
  block-20--class="hidden" block-24--class="hidden"
  block-25--class="hidden" block-26--class="hidden"
  block-29--class="hidden" block-30--class="hidden"
  block-31--class="hidden" block-35--class="hidden"
  block-36--class="hidden" block-37--class="hidden"
  block-38--class="hidden" block-40--class="hidden"
  block-41--class="hidden" block-42--class="hidden"
  block-43--class="hidden" block-44--class="hidden"
  block-46--class="hidden" block-47--class="hidden"
  block-48--class="hidden" block-49--class="hidden"
/>

---

Rhombus Cover

shape_grid-rhombus_cover

---
theme: eavise
style: minimal

author: John Doe
image: https://images.unsplash.com/...
class: text-left text-black
---

# What If
## We had pretty slides

<ShapeGrid
  :x="8" :y="8"
  size="215px" type="rhombus" margin="5px"
  class="
    col-start-1 col-end--1 row-start-1 row-end--1 place-self-center
    z--1 bg-white mix-blend-lighten
  "
  block--color="black"
  block-17--class="hidden" block-18--class="hidden"
  block-24--class="hidden" block-25--class="hidden"
  block-26--class="hidden" block-27--class="hidden"
  block-32--class="hidden" block-33--class="hidden"
  block-34--class="hidden" block-35--class="hidden"
  block-39--class="hidden" block-40--class="hidden"
  block-41--class="hidden" block-42--class="hidden"
  block-43--class="hidden" block-44--class="hidden"
  block-47--class="hidden" block-48--class="hidden"
  block-49--class="hidden" block-50--class="hidden"
  block-51--class="hidden" block-52--class="hidden"
  block-54--class="hidden" block-55--class="hidden"
  block-56--class="hidden" block-57--class="hidden"
  block-58--class="hidden" block-59--class="hidden"
  block-60--class="hidden"
/>

---