components / blog
blog post list item
BlogPostListItem composes the blog title row, divider rule, publication date, and hover preview into a single index-list surface. It is the main editorial list unit on blog landing pages.
| field | value |
| group | blog |
| import | @arieare/ds-blog/BlogPostListItem.astro |
| source | packages/ds-blog/src/BlogPostListItem.astro
packages/ds-blog/src/BlogPostPreview.astro |
component tokens
| token | source | description |
--page-bg / --border-color | @arieare/ds-blog/tokens.css | Sets the blog reading surface and divider color. The centered reading width now comes from the shared shell-layout tokens. |
--primary-ink / --secondary-ink | @arieare/ds-blog/tokens.css | Provides the blog package's primary and secondary ink aliases. |
--blog-surface-rule-hover | @arieare/ds-blog/tokens.css | Hover rule color used by list-item and navigator accents. |
props
| prop | type | default | description |
title | string | — | Visible post title. |
href | string | — | Destination for the list row link. |
publishedAtISO / publishedLabel | string | — | Machine-readable and human-readable publication dates. |
excerpt | string | — | Preview copy passed through to BlogPostPreview. |
tags | string[] | — | Tag list passed through to BlogPostPreview. |
kind | "journal" | "essay" | "note" | "short" | — | Used for filter-state data attributes on the list item root. |