Gitt One Pages
Open menu

FeatureAsidepopular

apps/www/src/sections/FeatureAside.astro · 49 lines · group Features & lists

FeatureAside — the heading (and an optional picture) on the left, a dense icon+text list of <Feature> on the right. For a block that explains one thing in several points rather than offering a choice.

In the fleet

Used on 2 sites built with this engine.

Samples 1

sample

IN THE FIELD

Small enough to forget, stubborn enough to trust

The parts that matter are the ones you never think about: the seal, the mount and the radio.

  • Sealed to IP67

    Rain, dust and a pressure washer at the end of the season.

  • Four kilometres

    Line of sight to the gateway, on a licence-free band.

  • Field calibration

    Swap a sensor and the station recognises it by itself.

MDX of this sample
import BoltIcon from 'astro-heroicons/outline/Bolt.astro';
import SignalIcon from 'astro-heroicons/outline/Signal.astro';
import ShieldIcon from 'astro-heroicons/outline/ShieldCheck.astro';

<FeatureAside
  theme="muted"
  kicker="IN THE FIELD"
  title="Small enough to forget, stubborn enough to trust"
  description="The parts that matter are the ones you never think about: the seal, the mount and the radio."
  image="photo-01.jpg"
>
  <Feature title="Sealed to IP67" description="Rain, dust and a pressure washer at the end of the season." Icon={ShieldIcon} />
  <Feature title="Four kilometres" description="Line of sight to the gateway, on a licence-free band." Icon={SignalIcon} />
  <Feature title="Field calibration" description="Swap a sensor and the station recognises it by itself." Icon={BoltIcon} />
</FeatureAside>

Props

NameTypeRequiredDefaultDescription
idstring
kickerstring
titlestring
descriptionstring
themeTheme'light'
decor'none' | 'dots' | 'dots-left''none'
imagestring
linkTextstring
hrefstring
classstring

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

---
/**
 * FeatureAside — the heading (and an optional picture) on the left, a dense
 * icon+text list of <Feature> on the right. For a block that explains one
 * thing in several points rather than offering a choice.
 */
import { Image } from 'astro:assets';
import { resolveImage } from '../lib/images';
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';
import Button from './_Button.astro';

interface Props {
  id?: string;
  kicker?: string;
  title?: string;
  description?: string;
  theme?: Theme;
  decor?: 'none' | 'dots' | 'dots-left';
  image?: string;
  linkText?: string;
  href?: string;
  class?: string;
}

const { id, kicker, title, description, theme = 'light', decor = 'none', image, linkText, href, class: extra = '' } = Astro.props;
const img = image ? await resolveImage(image) : undefined;
---

<Section id={id} theme={theme} heading="sr" class={extra} decor={decor}>
  <div class="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-16">
    <div>
      {kicker && <p class="text-sm font-semibold uppercase tracking-wide"><span class="bg-gradient-to-r from-primary-500 to-primary-alt-600 bg-clip-text text-transparent [.bg-gradient-to-r_&]:from-primary-100 [.bg-gradient-to-r_&]:to-primary-alt-400">{kicker}</span></p>}
      {title && <h2 class="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">{title}</h2>}
      {description && <p class="mt-4 text-lg text-gray-500 [.bg-stone-800_&]:text-primary-100 [.bg-gradient-to-r_&]:text-primary-100">{description}</p>}
      {img && <Image src={img} alt="" widths={[400, 840]} class="mt-8 w-full rounded-lg shadow-lg" />}
    </div>
    <ul
      class="mt-10 grid list-none grid-cols-1 gap-y-8 lg:mt-0"
      data-variant="plain"
      data-aside=""
      data-on-dark={theme === 'brand' || theme === 'dark' ? '' : undefined}
    >
      <slot />
    </ul>
  </div>
  {linkText && href && <p class="mt-10 text-center"><Button href={href}>{linkText}</Button></p>}
</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.