AtAGlance01

File: src/blocks/at-a-glance/AtAGlance01.astro

Tabbed “at a glance” list with a sticky media panel. Items activate on click or autoplay.

Mobile: the shared sticky media column is hidden. Each item shows its image under the text when that item is selected (or auto-selected).

Config (blocks.ts → atAGlance)

atAGlance: {
  define: "numerical", // "numerical" | "alphabetical" | "none"
  width: "wide",
  imageBleed: true,
  imagePosition: "right", // desktop left | right
  autoPlay: true,
  interval: 3000,
  heading: "At A Glance",
  subheading: "End-to-end web development…",
  stickyTop: 150,
  items: [
    {
      image: "/images/hero.svg",
      imageAlt: "Workspace",
      meta: "Core skill",
      title: "Frontend Development",
      description: "Astro, React, and Tailwind…",
    },
  ],
},

Add to a page

---
import AtAGlance01 from "@/blocks/at-a-glance/AtAGlance01.astro";
---

<AtAGlance01 />

Inline:

<AtAGlance01
  autoPlay={false}
  imagePosition="left"
  sectionId="capabilities"
/>

Props

Also include: AtAGlanceLayout.astro. Returns null if items is empty.

← At a glance versions · Blocks overview