ChecklistItempopular

apps/www/src/sections/ChecklistItem.astro · 28 lines · group Features & lists

ChecklistItem — one point of <ChecklistSection>: a brand-coloured check mark, a bold title and a line of text. Parent: <ChecklistSection> only. Children: none, both props are plain strings.

In the fleet

Used on 2 sites built with this engine.

Samples 1

sampleshown inside <ChecklistSection>

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	Default	Description
title	string	yes		the point, bold
description	string	yes		one sentence under it

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

---
/**
 * ChecklistItem — one point of <ChecklistSection>: a brand-coloured check
 *   mark, a bold title and a line of text.
 *
 * Parent: <ChecklistSection> only. Children: none, both props are plain
 *   strings.
 */
import Check from 'astro-heroicons/outline/Check.astro';

interface Props {
  /** the point, bold */
  title: string;
  /** one sentence under it */
  description: string;
}

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

<div class="relative pl-10">
  <dt class="text-base font-bold text-gray-900">
    <Check class="absolute left-0 top-0 h-6 w-6 text-primary-600" aria-hidden="true" />
    {title}
  </dt>
  <dd class="mt-2 text-base text-gray-500">{description}</dd>
</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.