Text & Image

Lorem ipsum dolor

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

link text

Astro

<SplitBlock
  data-component="TextImage"
  as="section"
  class="items-center gap-56"
  split="1/2"
  reverse={false}
>
  <div slot="1" class="flex flex-col items-start gap-16">
    <h2 class="m-0 text-xs font-bold uppercase tracking-tighter">{data.text_short}</h2>
    <h1 class="m-0 text-lg font-bold leading-tight">{data.headline}</h1>
    <p>{data.text_area}</p>
    <Button href={data.link.href}>
      {data.link.text}
    </Button>
  </div>
  <ImageCaption
    slot="2"
    asset={data.image}
    caption={{
      text: data.short_text_area,
    }}
  />
</SplitBlock>

Compiled

<section data-layout="SplitBlock" data-component="TextImage" class="grid items-center gap-56 md:grid-cols-2">
  <div>
    <div class="flex flex-col items-start gap-16">
      <h2 class="m-0 text-xs font-bold uppercase tracking-tighter">Lorem ipsum dolor</h2>
      <h1 class="m-0 text-lg font-bold leading-tight">Lorem ipsum dolor sit amet</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <a href="https://google.com" data-component="Button" class="btn-contained"> link text </a>
    </div>
  </div>
  <div>
    <figure>
      <img src="https://place-hold.it/400x300" data-image-component="true" alt="" loading="eager" width="400" height="300" decoding="async">
    </figure>
  </div>
</section>

API Reference

This page section uses SplitBlock to create responsive split layouts and slot to allow for any additional markup to be added. ImageCaption is used for the image element. See the following pages for individual component API reference:

Split Block

Image Caption