Card Group

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  <Grid
    class="grid-cols-1 gap-48 lg:grid-cols-2"
    data-component="card-group">
    <Card>
      <div class="flex size-48 items-center justify-center rounded-full bg-sky-200 text-black [&_svg]:size-24">
        <Fragment set:html={clock} />
      </div>
      <div class="flex flex-col gap-8">
        <h2 class="text-xl font-bold">{data.headline}</h2>
        <p class="text-sm">{data.text_long}</p>
      </div>
    </Card>
    <Card>
      <div class="flex size-48 items-center justify-center rounded-full bg-sky-200 text-black [&_svg]:size-24">
        <Fragment set:html={clock} />
      </div>
      <div class="flex flex-col gap-8">
        <h2 class="text-xl font-bold">{data.headline}</h2>
        <p class="text-sm">{data.text_long}</p>
      </div>
    </Card>
  </Grid>

  <div data-layout="Grid" data-component="card-group" class="grid grid-cols-1 gap-48 lg:grid-cols-2">
    <article class="flex flex-col gap-24 items-start">
      <div class="w-48 h-48 flex items-center justify-center rounded-full bg-sky-100">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path></svg>
      </div>
      <div class="flex flex-col gap-8">
        <h2 class="text-xl font-bold">Lorem ipsum dolor sit amet</h2>
        <p class="text-sm">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </article>
    <article class="flex flex-col gap-24 items-start">
      <div class="w-48 h-48 flex items-center justify-center rounded-full bg-sky-100">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path></svg>
      </div>
      <div class="flex flex-col gap-8">
        <h2 class="text-xl font-bold">Lorem ipsum dolor sit amet</h2>
        <p class="text-sm">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </article>
  </div>

API Reference

The following are the props that can be passed to the page block.

Prop	Type	Default
as Main grid wrapper will use this as its html element.	`string`	`"div"`
center Center grid items horizontally and vertically.	`boolean`	`false`

Examples

Center aligned, 3-col, as a `section`.

Lorem ipsum dolor sit amet

Astro
Compiled

  <Grid
    as="section"
    class="grid-cols-1 gap-48 lg:grid-cols-3"
    data-component="card-group">
    <Card>
      <div class="flex size-48 items-center justify-center rounded-full bg-sky-200 text-black [&_svg]:size-24">
        <Fragment set:html={clock} />
      </div>
      <div class="flex flex-col gap-8">
        <h2 class="text-xl font-bold">{data.headline}</h2>
        <p class="text-sm">{data.text_long}</p>
      </div>
    </Card>
    <Card>
      <div class="flex size-48 items-center justify-center rounded-full bg-sky-200 text-black [&_svg]:size-24">
        <Fragment set:html={clock} />
      </div>
      <div class="flex flex-col gap-8">
        <h2 class="text-xl font-bold">{data.headline}</h2>
        <p class="text-sm">{data.text_area}</p>
      </div>
    </Card>
    <Card>
      <div class="flex size-48 items-center justify-center rounded-full bg-sky-200 text-black [&_svg]:size-24">
        <Fragment set:html={clock} />
      </div>
      <div class="flex flex-col gap-8">
        <h2 class="text-xl font-bold">{data.headline}</h2>
        <p class="text-sm">{data.text_long}</p>
      </div>
    </Card>
  </Grid>

  <section data-layout="Grid" data-component="card-group" class="grid grid-cols-1 gap-48 lg:grid-cols-3">
    <article class="flex flex-col gap-24 items-start">
      <div class="w-48 h-48 flex items-center justify-center rounded-full bg-sky-100">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path></svg>
      </div>
      <div class="flex flex-col gap-8">
        <h2 class="text-xl font-bold">Lorem ipsum dolor sit amet</h2>
        <p class="text-sm">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </article>
    <article class="flex flex-col gap-24 items-start">
      <div class="w-48 h-48 flex items-center justify-center rounded-full bg-sky-100">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path></svg>
      </div>
      <div class="flex flex-col gap-8">
        <h2 class="text-xl font-bold">Lorem ipsum dolor sit amet</h2>
        <p class="text-sm">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>
      </div>
    </article>
    <article class="flex flex-col gap-24 items-start">
      <div class="w-48 h-48 flex items-center justify-center rounded-full bg-sky-100">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path></svg>
      </div>
      <div class="flex flex-col gap-8">
        <h2 class="text-xl font-bold">Lorem ipsum dolor sit amet</h2>
        <p class="text-sm">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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </article>
  </section>

Card Group

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

API Reference

Examples

Center aligned, 3-col, as a section.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Center aligned, 3-col, as a `section`.