---
title: "PostMeta"
description: "The author and date byline the default post cards share."
requested_language: fr
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/fr/next/components/post-meta
version: unreleased (main)
docs_index: https://docs.systhema.app/fr/next/llms.txt
---
> This page isn't translated yet. Showing English.


`PostMeta` renders a post's byline: the author, a `•` separator and the date. [`PostCard`](https://docs.systhema.app/fr/next/components/post-card.md) and `HighlightCard` both use it, and you can use it in your own card or post header. Each side can be hidden on its own, and the separator only appears when both show.

```tsx preview title="PostMeta"
import { PostMeta } from '@systhemaui/next'

export default function Demo() {
  return (
    <PostMeta
      className="post-byline"
      author="Mira Kovač"
      authorAvatar={{ url: '/demo-assets/avatar-1.webp' }}
      date="September 14, 2026"
      dateTime="2026-09-14T09:00:00.000Z"
      showAuthor
      showDate
    />
  )
}
```

## Import

```tsx
import { PostMeta } from '@systhemaui/next'
```

In a React app without Next.js, import it from `@systhemaui/react`.

## Examples

### From a `PostView`

`postByline(post)` returns the `author`, the formatted `date` and the ISO `dateTime` from a [`PostView`](https://docs.systhema.app/fr/next/components/posts-helpers.md#postview), formatted in `post.locale` (en-US by default):

```tsx
import { PostMeta, postByline, type PostView } from '@systhemaui/next'

export function Byline({ post }: { post: PostView }) {
  const { author, date, dateTime } = postByline(post)
  return (
    <PostMeta
      className="post-byline"
      author={author}
      authorAvatar={post.author?.avatar}
      date={date}
      dateTime={dateTime}
      showAuthor
      showDate
    />
  )
}
```

### One side only

`showAuthor` and `showDate` are required, so the caller decides what shows. A side with no value (`null`) is skipped as well, and when neither side renders, `PostMeta` renders nothing.

```tsx preview title="Author only, date only"
import { PostMeta } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex flex-col items-center gap-4">
      <PostMeta
        className="post-byline"
        author="Jonas Weber"
        date={null}
        showAuthor
        showDate={false}
      />
      <PostMeta
        className="post-byline"
        author={null}
        date="September 2, 2026"
        dateTime="2026-09-02"
        showAuthor={false}
        showDate
      />
    </div>
  )
}
```

### Styling each side

`className` goes on the row, and `authorClassName` and `dateClassName` are merged over each side's default classes with tailwind-merge.

```tsx
<PostMeta
  className="post-card-meta"
  author="Mira Kovač"
  date="September 14, 2026"
  showAuthor
  showDate
  dateClassName="uppercase tracking-wide"
/>
```

## Props

<!-- generated:props @systhemaui/react PostMetaProps -->

| Prop                    | Type                   | Default | Description                                                                |
| ----------------------- | ---------------------- | ------- | -------------------------------------------------------------------------- |
| `author` (required)     | `string \| null`       | -       |                                                                            |
| `authorAvatar`          | `AuthorAvatar \| null` | -       |                                                                            |
| `date` (required)       | `string \| null`       | -       |                                                                            |
| `dateTime`              | `string`               | -       |                                                                            |
| `showAuthor` (required) | `boolean`              | -       |                                                                            |
| `showDate` (required)   | `boolean`              | -       |                                                                            |
| `className` (required)  | `string`               | -       | Root class for the meta row (e.g. `post-card-meta`/`post-highlight-meta`). |
| `authorClassName`       | `string`               | -       |                                                                            |
| `dateClassName`         | `string`               | -       |                                                                            |

<!-- /generated -->

`PostMeta` does not format dates. Pass a display string as `date` and the machine-readable value as `dateTime`, or use [`postByline`](https://docs.systhema.app/fr/next/components/posts-helpers.md#postbyline-and-formatpostdate).

## HTML and CSS

```html
<div class="post-meta text-small flex flex-wrap items-center gap-x-2">
  <span class="post-meta-author inline-flex items-center gap-2">
    <img class="post-meta-avatar size-6 rounded-full object-cover" src="/media/mira.webp" alt="Mira Kovač" />
    Mira Kovač
  </span>
  <span class="post-meta-separator" aria-hidden="true">•</span>
  <time class="post-meta-date" datetime="2026-09-14T09:00:00.000Z">September 14, 2026</time>
</div>
```

The `.post-meta*` hooks come from the `posts` CSS layer, which mutes the byline against the current text color.

<!-- generated:utilities posts -->

| Class                               | Styles                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `posts-list`                        | `width: 100%;`<br>`max-width: var(--container-width);`<br>`margin-inline: auto;`                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `posts-list-grid`                   | `& { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap-sm, 1.25rem); row-gap: var(--gap-md, 2.5rem); }`<br>`& > .post-card { animation-delay: var(--post-card-stagger-delay, 0ms); }`<br>`& > * > .post-card { animation-delay: var(--post-card-stagger-delay, 0ms); }`                                                                                                                                                                                                                   |
| `posts-list-row`                    | `display: flex;`<br>`flex-direction: column;`<br>`row-gap: var(--gap-md, 2.5rem);`                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `posts-list-grid-2`                 | `@media (width >= 640px) { & { grid-template-columns: repeat(2, minmax(0, 1fr)); } }`<br>`@media (width >= 640px) { & > :nth-child(2n - 1) { --post-card-stagger-delay: 0ms; } }`<br>`@media (width >= 640px) { & > :nth-child(2n) { --post-card-stagger-delay: calc(var(--tw-stagger-delay, 120ms) * 1); } }`                                                                                                                                                                                                      |
| `posts-list-grid-3`                 | `@media (width >= 640px) { & { grid-template-columns: repeat(2, minmax(0, 1fr)); } }`<br>`@media (width >= 1192px) { & { grid-template-columns: repeat(3, minmax(0, 1fr)); } }`<br>`@media (width >= 640px) and (width < 1192px) { & > :nth-child(2n - 1) { --post-card-stagger-delay: 0ms; } }`<br>`@media (width >= 640px) and (width < 1192px) { & > :nth-child(2n) { --post-card-stagger-delay: calc(var(--tw-stagger-delay, 120ms) * 1); } }`<br>+ 3 more rules                                                |
| `posts-list-grid-4`                 | `@media (width >= 640px) { & { grid-template-columns: repeat(2, minmax(0, 1fr)); } }`<br>`@media (width >= 1192px) { & { grid-template-columns: repeat(4, minmax(0, 1fr)); } }`<br>`@media (width >= 640px) and (width < 1192px) { & > :nth-child(2n - 1) { --post-card-stagger-delay: 0ms; } }`<br>`@media (width >= 640px) and (width < 1192px) { & > :nth-child(2n) { --post-card-stagger-delay: calc(var(--tw-stagger-delay, 120ms) * 1); } }`<br>+ 4 more rules                                                |
| `posts-list-interspace`             | `width: 100%;`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| `posts-list-empty`                  | `color: color-mix(in srgb, currentColor 60%, transparent);`<br>`text-align: center;`<br>`padding-block: var(--gap-md, 2.5rem);`                                                                                                                                                                                                                                                                                                                                                                                     |
| `posts-list-actions`                | `display: flex;`<br>`align-items: center;`<br>`justify-content: center;`<br>`gap: var(--gap-sm, 1.25rem);`                                                                                                                                                                                                                                                                                                                                                                                                          |
| `posts-list-load-more`              | `&:disabled, .posts-list-load-more[disabled] { opacity: 0.4; cursor: not-allowed; }`                                                                                                                                                                                                                                                                                                                                                                                                                                |
| `posts-list-pagination`             | `& { display: flex; justify-content: center; align-items: center; gap: var(--gallery-navigation-gap-x, 10px); }`<br>+ 13 more rules                                                                                                                                                                                                                                                                                                                                                                                 |
| `post-card`                         | `& { color: var(--color-typography-body); }`<br>`.posts-list-grid > .post-card { animation-delay: var(--post-card-stagger-delay, 0ms); }`<br>`.posts-list-grid > * > .post-card { animation-delay: var(--post-card-stagger-delay, 0ms); }`                                                                                                                                                                                                                                                                          |
| `post-card-label`                   | `& { color: color-mix(in srgb, currentColor 60%, transparent); }`<br>`&.text-label { color: color-mix(in srgb, currentColor 60%, transparent); }`                                                                                                                                                                                                                                                                                                                                                                   |
| `post-highlight-label`              | `& { color: color-mix(in srgb, currentColor 60%, transparent); }`<br>`&.text-label { color: color-mix(in srgb, currentColor 60%, transparent); }`                                                                                                                                                                                                                                                                                                                                                                   |
| `post-type`                         | `color: color-mix(in srgb, currentColor 60%, transparent);`                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `text-label`                        | `& { font-family: var(--font-label-font-family); font-size: var(--typography-label-font-size); font-weight: var(--font-label-font-weight); letter-spacing: var(--typography-label-letter-spacing); line-height: var(--typography-label-line-height); text-transform: uppercase; text-decoration: none; font-style: var(--font-label-font-style); }`<br>`.post-card-label.text-label { color: color-mix(in srgb, currentColor 60%, transparent); }`<br>+ 1 more rule                                                 |
| `post-card-title`                   | `text-wrap: balance;`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `post-card-read-more`               | `color: var(--color-link-text-default, currentColor);`<br>`font-weight: 600;`<br>`text-decoration-line: underline;`                                                                                                                                                                                                                                                                                                                                                                                                 |
| `post-highlight-read-more`          | `color: var(--color-link-text-default, currentColor);`<br>`font-weight: 600;`<br>`text-decoration-line: underline;`                                                                                                                                                                                                                                                                                                                                                                                                 |
| `post-card-media-placeholder`       | `width: 100%;`<br>`height: 100%;`<br>`background-color: color-mix(in srgb, currentColor 6%, transparent);`                                                                                                                                                                                                                                                                                                                                                                                                          |
| `post-card-row`                     | `@media (width >= 640px) { & .post-card-body { align-self: start; justify-content: flex-start; } }`                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `post-card-body`                    | `@media (width >= 640px) { .post-card-row .post-card-body { align-self: start; justify-content: flex-start; } }`                                                                                                                                                                                                                                                                                                                                                                                                    |
| `post-highlight`                    | `position: relative;`<br>`overflow: hidden;`<br>`border-radius: var(--card-default-border-radius, 12px);`                                                                                                                                                                                                                                                                                                                                                                                                           |
| `highlight-card`                    | `position: relative;`<br>`overflow: hidden;`<br>`border-radius: var(--card-default-border-radius, 12px);`                                                                                                                                                                                                                                                                                                                                                                                                           |
| `post-highlight-scrim`              | `position: absolute;`<br>`inset: 0;`<br>`background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0) 70%);`<br>`pointer-events: none;`                                                                                                                                                                                                                                                                                                                                             |
| `post-highlight-overlay`            | `position: relative;`<br>`z-index: 1;`                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `post-highlight-excerpt`            | `color: color-mix(in srgb, #ffffff 85%, transparent);`                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| `post-meta`                         | `display: flex;`<br>`align-items: center;`<br>`flex-wrap: wrap;`<br>`gap: 0.5em;`<br>`color: color-mix(in srgb, currentColor 60%, transparent);`                                                                                                                                                                                                                                                                                                                                                                    |
| `post-byline-meta`                  | `display: flex;`<br>`align-items: center;`<br>`flex-wrap: wrap;`<br>`gap: 0.5em;`<br>`color: color-mix(in srgb, currentColor 60%, transparent);`                                                                                                                                                                                                                                                                                                                                                                    |
| `post-meta-avatar`                  | `width: var(--post-byline-avatar-size, 1.75em);`<br>`height: var(--post-byline-avatar-size, 1.75em);`<br>`border-radius: 9999px;`<br>`object-fit: cover;`<br>`flex-shrink: 0;`                                                                                                                                                                                                                                                                                                                                      |
| `post-meta-separator`               | `opacity: 0.5;`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `post-meta-author-role`             | `& { opacity: 0.7; }`<br>`&::before { content: ", "; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| `archive-filter`                    | `display: flex;`<br>`flex-direction: column;`<br>`gap: var(--gap-sm, 1.25rem);`                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| `archive-filter-bar`                | `display: flex;`<br>`flex-wrap: wrap;`<br>`align-items: center;`<br>`gap: var(--gap-sm, 1.25rem);`                                                                                                                                                                                                                                                                                                                                                                                                                  |
| `archive-filter-label`              | `flex: 0 0 auto;`<br>`color: color-mix(in srgb, currentColor 60%, transparent);`                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `archive-filter-search`             | `flex: 1 1 16rem;`<br>`min-width: 0;`<br>`margin: 0;`                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `archive-filter-select`             | `flex: 1 1 16rem;`<br>`min-width: 0;`<br>`margin: 0;`                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
| `archive-filter-chips`              | `display: flex;`<br>`flex-wrap: wrap;`<br>`align-items: center;`<br>`gap: var(--chip-gap, 0.5rem);`<br>`flex: 1 1 16rem;`<br>`min-width: 0;`                                                                                                                                                                                                                                                                                                                                                                        |
| `archive-filter-chip-toggle`        | `cursor: pointer;`<br>`appearance: none;`                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `archive-filter-chip-toggle-active` | `background-color: var(--color-chip-hover-background);`<br>`border-color: var(--color-chip-hover-border);`<br>`color: var(--color-chip-hover-text);`                                                                                                                                                                                                                                                                                                                                                                |
| `archive-filter-active`             | `display: flex;`<br>`flex-wrap: wrap;`<br>`align-items: center;`<br>`gap: var(--chip-gap, 0.5rem);`                                                                                                                                                                                                                                                                                                                                                                                                                 |
| `archive-filter-chip`               | `& { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--chip-gap); font-size: var(--chip-font-size); line-height: var(--chip-line-height); letter-spacing: calc(var(--chip-letter-spacing, 0) * 1px); padding-inline: var(--chip-padding-x); padding-block: var(--chip-padding-y); border-radius: var(--chip-border-radius); border-style: solid; border-width: var(--chip-border-width); background-color: var(--color-chip-normal-background); border-co…`<br>+ 1 more rule |
| `archive-filter-chip-remove`        | `font-size: 1.2em;`<br>`line-height: 1;`<br>`opacity: 0.7;`                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `post-related-title`                | `margin-bottom: var(--gap-sm, 1.25rem);`                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `post-single`                       | `& .article > :not(section, .figure-w-full, .figure-w-screen, .figure-w-container, a:not([class*="card"]), div:not(.columns, .stack, [class*="card"], [class*="accordion"])) { max-width: var(--post-reading-width, calc(var(--container-width) - (var(--article-padding-x) * 2))); }`                                                                                                                                                                                                                              |
| `post-share-button-label`           | `font-size: var(--text-small-font-size, 0.875rem);`<br>`line-height: 1;`                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| `post-share-icon-label`             | `& .post-share-list > a { display: inline-flex; align-items: center; gap: var(--gap-xs, 0.5rem); width: auto; }`<br>`& .post-share-list > button { display: inline-flex; align-items: center; gap: var(--gap-xs, 0.5rem); width: auto; }`                                                                                                                                                                                                                                                                           |
| `post-share-list`                   | `.post-share-icon-label .post-share-list > a { display: inline-flex; align-items: center; gap: var(--gap-xs, 0.5rem); width: auto; }`<br>`.post-share-icon-label .post-share-list > button { display: inline-flex; align-items: center; gap: var(--gap-xs, 0.5rem); width: auto; }`<br>`.post-share-pills .post-share-list > a { display: inline-flex; align-items: center; gap: var(--gap-xs, 0.5rem); width: auto; }`<br>+ 3 more rules                                                                           |
| `post-share-pills`                  | `& .post-share-list > a { display: inline-flex; align-items: center; gap: var(--gap-xs, 0.5rem); width: auto; }`<br>`& .post-share-list > button { display: inline-flex; align-items: center; gap: var(--gap-xs, 0.5rem); width: auto; }`<br>`& .post-share-list > a { padding: var(--gap-xs, 0.5rem) var(--gap-sm, 1.25rem); border-radius: 9999px; border: 1px solid var(--color-separator-line, currentColor); }`<br>+ 1 more rule                                                                               |
| `post-share-sticky-bottom`          | `position: fixed;`<br>`left: 0;`<br>`right: 0;`<br>`bottom: 0;`<br>`z-index: 40;`<br>`justify-content: center;`<br>`background-color: var(--color-foundations-surface-bg);`<br>`border-top: 1px solid var(--color-separator-line, currentColor);`<br>`padding-block: var(--gap-sm, 1.25rem);`                                                                                                                                                                                                                       |
| `post-share-floating-sidebar`       | `@media (width >= 1192px) { & { position: fixed; left: var(--gap-lg, 1.5rem); top: 50%; transform: translateY(-50%); flex-direction: column; align-items: center; z-index: 40; } }`                                                                                                                                                                                                                                                                                                                                 |

<!-- /generated -->

## Next.js

`@systhemaui/next` re-exports `PostMeta` from `@systhemaui/react` unchanged.

## Accessibility

- The separator is `aria-hidden`, so screen readers hear "Mira Kovač September 14, 2026".
- The date is a `<time>` element; pass `dateTime` so it carries a machine-readable value.
- The avatar's `alt` is `authorAvatar.alt`, or the author's name when that is empty, so a screen reader hears the name twice when an avatar shows. An empty `alt` falls back to the name too.

## Related

- [PostCard and HighlightCard](https://docs.systhema.app/fr/next/components/post-card.md)
- [Posts view model and helpers](https://docs.systhema.app/fr/next/components/posts-helpers.md)