Section List

Date items

Use SectionListDateItem for article and post indexes. The date is right-aligned on tablet and above, stacked on mobile. A missing url renders the title as plain text.

2024

  1. The TypeScript satisfies operator
<Stack space="x-spacious">
<SectionList name="2025">
<SectionListDateItem
title="Motivation In An Absurd System"
url="/posts/2025/fuzzy-search"
date={new Date('2025-03-23')}
/>
<SectionListDateItem
title="Building a design system with Vanilla Extract and Astro"
url="/posts/2025/vanilla-extract-design-system"
date={new Date('2025-01-15')}
/>
</SectionList>
<SectionList name="2024">
<SectionListDateItem
title="Understanding CSS Grid layout patterns"
url="/posts/2024/css-grid"
date={new Date('2024-11-08')}
/>
<SectionListDateItem
title="The TypeScript satisfies operator"
date={new Date('2024-07-22')}
/>
</SectionList>
</Stack>

Custom items

For custom content, slot Box as='li' directly. The list owns all spacing and dividers via CSS, with no wrapper component needed.

Currently Reading

  1. Designing Data-Intensive Applications

    Martin Kleppmann

  2. A Philosophy of Software Design

    John Ousterhout

  3. The Pragmatic Programmer

    David Thomas, Andrew Hunt

<SectionList name="Currently Reading">
<Box as="li">
<Stack space="xxx-small">
<Text
element="p"
weight="medium">
Designing Data-Intensive Applications
</Text>
<Text
element="p"
tone="secondary"
size="small">
Martin Kleppmann
</Text>
</Stack>
</Box>
<Box as="li">
<Stack space="xxx-small">
<Text
element="p"
weight="medium">
A Philosophy of Software Design
</Text>
<Text
element="p"
tone="secondary"
size="small">
John Ousterhout
</Text>
</Stack>
</Box>
<Box as="li">
<Stack space="xxx-small">
<Text
element="p"
weight="medium">
The Pragmatic Programmer
</Text>
<Text
element="p"
tone="secondary"
size="small">
David Thomas, Andrew Hunt
</Text>
</Stack>
</Box>
</SectionList>