Gitt One Pages
Open menu

FeatureSection

apps/www/src/sections/FeatureSection.astro · 27 lines · group Features & lists

FeatureSection — a wrapper for one or more <FeatureItem> rows: big split blocks, each with a headline, a paragraph, a button and a large picture bleeding to the edge of the screen. Use for: one or two flagship features that deserve a screen each — a dashboard screenshot, a device photo — presented editorially rather than as a grid. Not for: a grid of several equal features (<FeatureCards>); a picture beside plain text (<Prose> with an image or <StatsSplit>). Children: <FeatureItem> tags only; each is a full-width row. Look: white background with a soft grey gradient at the top; the design is an author block kept from one of the fleet's sites and has no theme or columns props.

In the fleet

Used on 1 site built with this engine.

Samples 1

sample

Own the readings, not a subscription to them

Export the season as CSV, hand it to your agronomist, or pipe it into the tools you already run. Nothing is locked behind our dashboard.

Read the API docs
Own the readings, not a subscription to them
MDX of this sample
<FeatureSection>
  <FeatureItem
    title="Own the readings, not a subscription to them"
    description="Export the season as CSV, hand it to your agronomist, or pipe it into the tools you already run. Nothing is locked behind our dashboard."
    imgPath="photo-05.jpg"
    btnText="Read the API docs"
    btnPath="/api/"
  />
</FeatureSection>

Props

No props — a wrapper around its children.

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

---
/**
 * FeatureSection — a wrapper for one or more <FeatureItem> rows: big split
 *   blocks, each with a headline, a paragraph, a button and a large picture
 *   bleeding to the edge of the screen.
 *
 * Use for: one or two flagship features that deserve a screen each — a
 *   dashboard screenshot, a device photo — presented editorially rather than
 *   as a grid.
 * Not for: a grid of several equal features (<FeatureCards>); a picture beside
 *   plain text (<Prose> with an image or <StatsSplit>).
 * Children: <FeatureItem> tags only; each is a full-width row.
 * Look: white background with a soft grey gradient at the top; the design is
 *   an author block kept from one of the fleet's sites and has no theme or
 *   columns props.
 */
---

<div class="relative pt-16 pb-32 overflow-hidden">
  <div
    aria-hidden="true"
    class="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-gray-100"
  >
  </div>
  <slot />
</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.