components / blog
blog article header
BlogArticleHeader packages the article title, publication metadata, permalink affordance, and reaction/share controls into one reusable top-of-article block.
| field | value |
| group | blog |
| import | @arieare/ds-blog/BlogArticleHeader.astro |
| source | packages/ds-blog/src/BlogArticleHeader.astro
packages/ds-blog/src/blog.css |
Design systems that read like field notes
component tokens
| token | source | description |
--blog-type-article-title / --blog-type-prose-* | @arieare/ds-blog/tokens.css | Semantic aliases for article titles and editorial prose tiers. |
--blog-prose-list-* | @arieare/ds-blog/tokens.css | Controls editorial list indentation, gap rhythm, unordered markers, and ordered-number badge styling. |
--blog-inline-image-* / --blog-link-* | @arieare/ds-blog/tokens.css | Styles inline image sizing and link decoration inside longform content. |
--ds-tooltip-bg / --ds-tooltip-ink | @arieare/ds/tokens.css | Controls tooltip surface and text colors. |
--ds-tooltip-font / --ds-tooltip-feature-settings | @arieare/ds/tokens.css | Keeps tooltip copy on the shared small-body type contract. |
--ds-tooltip-offset / --ds-tooltip-max-width | @arieare/ds/tokens.css | Defines tooltip offset from the trigger and its maximum readable width. |
props
| prop | type | default | description |
title | string | — | Article title displayed as the header heading. |
publishedAtISO / publishedLabel | string | — | Machine-readable and human-readable publication dates. |
canonicalHref | string | — | Permalink destination rendered in the metadata row. |
reactionKey | string | — | Stable id used to derive the like endpoint for the article. |
shareLinks | { x: string; linkedin: string; } | — | Outbound share URLs for the built-in share controls. |