Layout · 2 Props

Spacer

Empty vertical space block for adding breathing room between content. Configurable height via size prop.

Layout 2 Props

src/components/blocks/Spacer.astro

Props

Prop	Type	Default	Beschreibung
class	string	—
size	any	md

Beispiele

Sizes

Large vertical gap between blocks.

Block A

Block B (after lg spacer)

[
  {
    "type": "card",
    "props": {
      "variant": "soft",
      "tone": "primary",
      "padding": "sm"
    },
    "blocks": [
      {
        "type": "text",
        "props": {
          "text": "Block A"
        }
      }
    ]
  },
  {
    "type": "spacer",
    "props": {
      "size": "lg"
    }
  },
  {
    "type": "card",
    "props": {
      "variant": "soft",
      "tone": "accent",
      "padding": "sm"
    },
    "blocks": [
      {
        "type": "text",
        "props": {
          "text": "Block B (after lg spacer)"
        }
      }
    ]
  }
]

<Card variant="soft" tone="primary" padding="sm">
  <Text text="Block A" />
</Card>
<Spacer size="lg" />
<Card variant="soft" tone="accent" padding="sm">
  <Text text="Block B (after lg spacer)" />
</Card>