Gitt One Pages
Open menu

ProductList

apps/www/src/sections/ProductList.astro · 31 lines · group Models (product catalog)

ProductList — the catalog itself: one <Product> per row, text and feature list on the left, the picture on the right.

In the fleet

Used on 1 site built with this engine.

Samples 1

sample

ENTRY

Station N1

For a single field

Read more

  • Air and soil temperature
  • One season on a battery
  • Mounts on a standard post
  • SMS and e-mail alerts
Station N1
Station N1

ENTRY

Station N1

For a single field

  • Air and soil temperature
  • One season on a battery
  • Mounts on a standard post
  • SMS and e-mail alerts
Read more

Station N3

For several fields and a demanding crop

Read more

  • Leaf wetness and wind
  • Expansion port for extra sensors
  • Four kilometres to the gateway
  • Field-swappable sensors
Station N3
Station N3

Station N3

For several fields and a demanding crop

  • Leaf wetness and wind
  • Expansion port for extra sensors
  • Four kilometres to the gateway
  • Field-swappable sensors
Read more
MDX of this sample
<ProductList>
  <Product
    kicker="ENTRY"
    name="Station N1"
    description="For a single field"
    href="/stations/n1/"
    linkText="Read more"
    features={['Air and soil temperature', 'One season on a battery', 'Mounts on a standard post', 'SMS and e-mail alerts']}
    image="product-01.jpg"
  />
  <Product
    name="Station N3"
    description="For several fields and a demanding crop"
    href="/stations/n3/"
    linkText="Read more"
    features={['Leaf wetness and wind', 'Expansion port for extra sensors', 'Four kilometres to the gateway', 'Field-swappable sensors']}
    image="product-02.jpg"
  />
</ProductList>

Props

NameTypeRequiredDefaultDescription
idstring
kickerstring
titlestring
descriptionstring
themeTheme'light'

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

---
/**
 * ProductList — the catalog itself: one <Product> per row, text and feature
 * list on the left, the picture on the right.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';

interface Props {
  id?: string;
  kicker?: string;
  title?: string;
  description?: string;
  theme?: Theme;
}
const { id, kicker, title, description, theme = 'light' } = Astro.props;
---

<Section id={id} theme={theme}>
  {(kicker || title || description) && (
    <div class="mx-auto max-w-4xl text-center">
      {kicker && <p class="text-base font-semibold uppercase tracking-wider text-primary-600">{kicker}</p>}
      {title && <h2 class="mt-2 text-3xl font-extrabold sm:text-4xl">{title}</h2>}
      {description && <p class="mt-3 text-xl text-gray-500">{description}</p>}
    </div>
  )}
  <div class="mt-4 divide-y divide-gray-200" data-variant="list">
    <slot />
  </div>
</Section>

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.