Layout · 6 Props

Split

Two-column layout with configurable lead/body ratio. Use for side-by-side content like text + image or form + description.

Layout 6 Props

src/components/blocks/Split.astro

← Alle Components

Props

Prop	Type	Default	Beschreibung
as	string	div	"header" \| "footer" \| "section" \| "div" \| "article" \| "main" \| "aside"
bodyClass	string	—
class	string	—
leadClass	string	—
leadSpan	number	5
reverse	boolean	false

Beispiele

Default (7/5)

Asymmetric two-column layout with 7/5 ratio.

Lead Column (7)

Takes up 7 of 12 grid columns.

Body Column (5)

Takes up the remaining 5 columns.

{
  "type": "split",
  "props": {
    "leadSpan": 7,
    "gap": "lg"
  },
  "blocks": [
    {
      "type": "card",
      "props": {
        "variant": "soft",
        "tone": "primary",
        "padding": "lg",
        "slot": "lead"
      },
      "blocks": [
        {
          "type": "text",
          "props": {
            "variant": "title",
            "text": "Lead Column (7)"
          }
        },
        {
          "type": "text",
          "props": {
            "tone": "muted",
            "text": "Takes up 7 of 12 grid columns."
          }
        }
      ]
    },
    {
      "type": "card",
      "props": {
        "variant": "soft",
        "tone": "accent",
        "padding": "lg",
        "slot": "body"
      },
      "blocks": [
        {
          "type": "text",
          "props": {
            "variant": "title",
            "text": "Body Column (5)"
          }
        },
        {
          "type": "text",
          "props": {
            "tone": "muted",
            "text": "Takes up the remaining 5 columns."
          }
        }
      ]
    }
  ]
}

<Split leadSpan={7} gap="lg">
  <Card variant="soft" tone="primary" padding="lg" slot="lead">
    <Text variant="title" text="Lead Column (7)" />
    <Text tone="muted" text="Takes up 7 of 12 grid columns." />
  </Card>
  <Card variant="soft" tone="accent" padding="lg" slot="body">
    <Text variant="title" text="Body Column (5)" />
    <Text tone="muted" text="Takes up the remaining 5 columns." />
  </Card>
</Split>