ChecklistSectionpopular

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

ChecklistSection — a heading on the left and a three-column grid of check-marked points (<ChecklistItem>) on a light grey band. Use for: requirements, "what you need before you start", compliance points, a checklist of what is included — items that read as "yes, done" rather than as features to sell. Not for: benefits with icons (<FeatureCards>, <FeatureList>); an ordered process (<Steps>). Children: <ChecklistItem> tags only, usually three to nine. Look: an author block kept from one of the fleet's sites — always the grey band, always three columns on desktop; the heading has a gradient `subTitle` above it.

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 of the section, e.g. "features"
subTitle	string		short uppercase line above the title, painted with the brand gradient
title	string	yes	the section heading
description	string		a paragraph under the heading

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

---
/**
 * ChecklistSection — a heading on the left and a three-column grid of
 *   check-marked points (<ChecklistItem>) on a light grey band.
 *
 * Use for: requirements, "what you need before you start", compliance points,
 *   a checklist of what is included — items that read as "yes, done" rather
 *   than as features to sell.
 * Not for: benefits with icons (<FeatureCards>, <FeatureList>); an ordered
 *   process (<Steps>).
 * Children: <ChecklistItem> tags only, usually three to nine.
 * Look: an author block kept from one of the fleet's sites — always the grey
 *   band, always three columns on desktop; the heading has a gradient
 *   `subTitle` above it.
 */
interface Props {
  /** anchor of the section, e.g. "features" */
  id?: string;
  /** short uppercase line above the title, painted with the brand gradient */
  subTitle?: string;
  /** the section heading */
  title: string;
  /** a paragraph under the heading */
  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@7b686388. Samples are demo content: the components are the real ones, the copy and the pictures are made up.