title: Cluster
label: Cluster
status: beta

variants:
  - name: default
    label: Default
    hidden: true
  - name: "400"
    label: Spacing (400)
    context:
      cluster_child_flex: 25% 1 0
      cluster__spacing: 400
  - name: "600"
    label: Spacing (600)
    context:
      cluster_child_flex: 25% 1 0
      cluster__spacing: 600
  - name: "800"
    label: Spacing (800)
    context:
      cluster_child_flex: 25% 1 0
      cluster__spacing: 800
  - name: custom-spacing
    label: Spacing (custom)
    context:
      cluster_child_flex: 25% 1 0
      cluster_custom_spacing: 3rem
  - name: custom-alignment-flex-start
    label: Alignment (start)
    context:
      cluster_child_flex: 25% 1 0
      cluster_custom_alignment: flex-start
  - name: custom-alignment-center
    label: Alignment (center)
    context:
      cluster_child_flex: 25% 1 0
      cluster_custom_alignment: center
  - name: custom-alignment-flex-end
    label: Alignment (end)
    context:
      cluster_child_flex: 25% 1 0
      cluster_custom_alignment: flex-end
  - name: custom-alignment-stretch
    label: Alignment (stretch)
    context:
      cluster_child_flex: 25% 1 0
      cluster_custom_alignment: stretch
  - name: custom-child-flex
    lavel: Custom Child Flex
    context:
      cluster_child_flex: 25% 1 0

context:
  component-type: layout
