ChecklistSectionpopular

apps/www/src/sections/ChecklistSection.astro · 35 lines · group Features & lists

In the fleet

Used on 2 sites built with this engine.

Samples 1

sample

Before the first frost night

Twenty minutes of preparation that decide how the night goes.

Check the battery level: The dashboard shows it per station; anything under a fifth gets a replacement.
Set the threshold per field: The lower field freezes first — give it its own rule.
Name the people on duty: An alert that reaches everyone reaches nobody.
Test the siren: One button in the app, once a season.

MDX of this sample

<ChecklistSection title="Before the first frost night" description="Twenty minutes of preparation that decide how the night goes.">
  <ChecklistItem title="Check the battery level" description="The dashboard shows it per station; anything under a fifth gets a replacement." />
  <ChecklistItem title="Set the threshold per field" description="The lower field freezes first — give it its own rule." />
  <ChecklistItem title="Name the people on duty" description="An alert that reaches everyone reaches nobody." />
  <ChecklistItem title="Test the siren" description="One button in the app, once a season." />
</ChecklistSection>

Props

Name	Type	Required	Description
id	string		anchor for the navigation, e.g. "features"
subTitle	string
title	string	yes
description	string

Source apps/www/src/sections/ChecklistSection.astro @ gitt.one

---
interface Props {
  /** anchor for the navigation, e.g. "features" */
  id?: string;
  subTitle?: string;
  title: string;
  description?: string;
}

const { id, subTitle, title, description } = Astro.props;
---

<div id={id} class="bg-gray-50 border-t border-gray-100">
  <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
    <div class="max-w-3xl">
      {
        subTitle && (
          <h2 class="text-sm font-semibold tracking-wide uppercase">
            <span class="bg-gradient-to-r from-primary-600 to-primary-alt-700 bg-clip-text text-transparent">
              {subTitle}
            </span>
          </h2>
        )
      }
      <p class="mt-3 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
        {title}
      </p>
      {description && <p class="mt-4 text-lg text-gray-500">{description}</p>}
    </div>
    <dl class="mt-12 grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
      <slot />
    </dl>
  </div>
</div>

Source links point to engine-astro@38c294d9. Samples are demo content: the components are the real ones, the copy and the pictures are made up.