blog post preview
BlogPostPreview is the compact editorial hover surface used by blog list items. It relies on the shared card primitives but keeps the copy tone aligned with the blog package's quieter reading system.
| field | value |
|---|---|
| group | blog |
| import | @arieare/ds-blog/BlogPostPreview.astro |
| source | packages/ds-blog/src/BlogPostPreview.astro packages/ds-blog/src/blog.css |
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. |
--card-bg / --card-border / --card-radius | @arieare/ds/tokens.css | Shared card tokens inherited by the post preview shell. |
props
| prop | type | default | description |
|---|---|---|---|
excerpt | string | — | Short editorial summary shown in the preview card. |
tags | string[] | — | Optional tag list rendered as a dot-separated support line. |
class | string | "" | Extra class names applied to the preview aside. |