Split Block

Split block is an Astro layout component that allows you to split content into two columns and serve whatever content you would like within each column. The split block component is responsive and can be used to create a variety of layouts.

Astro
Compiled

<SplitBlock split="1/2">
  <div slot="1">Slot 1</div>
  <div slot="2">Slot 2</div>
</SplitBlock>

<div data-layout="SplitBlock" class="grid md:grid-cols-2">
  <div>Slot 1</div>
  <div>Slot 2</div>
</div>

API Reference

This component uses grid to create responsive split layouts. The following are the props that can be passed to the component.

Prop	Type	Default
as The element type to render the block as.	`HTMLTag`	`div`
split The split ratio of the block. The value is a fraction of the total width of the block. For example, `1/2` will split the block into two equal columns.	`"1/4" \| "1/3" \| "1/2" \| "2/3" \| "3/4"`	`1/2`
reverse Reverse the order of the columns when columns are not stacked.	`boolean`	`false`

Examples

Splits

The split prop can be used to define the ratio of the split. The value is a fraction of the total width of the block. Split Block comes with the following splits: 1/4, 1/3, 1/2, 2/3, and 3/4. Splits should be added, removed, and modified as needed to create the desired layout.

Astro

<SplitBlock split="1/4">
  <div slot="1">Slot 1</div>
  <div slot="2">Slot 2</div>
</SplitBlock>

<SplitBlock split="1/3">
  <div slot="1">Slot 1</div>
  <div slot="2">Slot 2</div>
</SplitBlock>

<SplitBlock split="1/2">
  <div slot="1">Slot 1</div>
  <div slot="2">Slot 2</div>
</SplitBlock>

<SplitBlock split="2/3">
  <div slot="1">Slot 1</div>
  <div slot="2">Slot 2</div>
</SplitBlock>

<SplitBlock split="3/4">
  <div slot="1">Slot 1</div>
  <div slot="2">Slot 2</div>
</SplitBlock>

Reverse

The reverse prop can be used to reverse the order of the columns when columns are not stacked. This can be useful for alternating the layout of the columns.

Astro

<SplitBlock reverse split="1/2">
  <div slot="1">Slot 1</div>
  <div slot="2">Slot 2</div>
</SplitBlock>

Astro Component

It’s recommended that an element like this is made as a reusable component. In this case, we have put together the following Astro component to serve as a blueprint for how you could possibly set up a Split Block component, and what properties to consider.

---
import type { HTMLTag, HTMLAttributes } from 'astro/types'

interface Props extends HTMLAttributes<HTMLTag> {
  /**
    The element type to render the block as.
  */
  as?: HTMLTag
  /**
    The column split ratio.
  */
  split?: '1/4' | '1/3' | '1/2' | '2/3' | '3/4'
  /**
    Whether to reverse the order of the columns.
  */
  reverse?: boolean
}

const {
  class: className,
  split = '1/2',
  reverse = false,
  as: Element = 'div',
  ...attrs
} = Astro.props
---

<Element
  data-layout="SplitBlock"
  class:list={[
    'grid',
    className,
    {
      'md:grid-cols-[1fr_3fr]': split === '1/4',
      'md:grid-cols-[1fr_2fr]': split === '1/3',
      'md:grid-cols-2': split === '1/2',
      'md:grid-cols-[2fr_1fr]': split === '2/3',
      'md:grid-cols-[3fr_1fr]': split === '3/4',
    },
  ]}
  {...attrs}
>
  <!-- slots are used to handle the interior section split  -->
  <div>
    <slot name="1" />
    <slot />
  </div>
  {
    Astro.slots.has('2') && (
      <div
        class:list={[
          {
            'md:order-first': reverse,
          },
        ]}
      >
        <slot name="2" />
      </div>
    )
  }
</Element>