Skip to content

PostPreview

Experimental

A PostPreview is used to display a post in a list of posts, e.g., on an overview page, and as header of a post page.

Examples

In this example we render authors with Names and add a description:

Post

Vestibulum proin eu mi nulla ac enim in tempor turpis

Willow Rangall, Suzy Cahan, Sandra Abramovici, Jan McKea, Ola Brunger, Ivette Rowlinson, Madeleine Stredwick, Lin Billson, Alfie Piborn, Garvy Bartlomiej

Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum. In hac habitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis, diam erat fermentum justo, nec condimentum neque sapien placerat ante. Nulla justo.

Read on

In this example we render authors with Avatars and omit tag and description. This is how you can use PostPreview on a post page:

Vestibulum proin eu mi nulla ac enim in tempor turpis

This is an example of a post without authors:

News

Vestibulum proin eu mi nulla ac enim in tempor turpis

Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum. In hac habitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis, diam erat fermentum justo, nec condimentum neque sapien placerat ante. Nulla justo.

Read on

System props

PostPreview supports space props and color props from Styled System.

Component props

NameTypeDefaultRequiredDescription
postObjectSee below.

Post

NameTypeDefaultRequiredDescription
tagStringTag that is dispalyed at the top.
titleNodeComponent that renders a title (composition pattern).
dateStringFormatted event date.
authorsNodeComponent that renders authors (composition pattern).
descriptionNodeComponent that renders a description (composition pattern).
hrefStringLink to post page. Triggers rendering of read on button when present.

title, authors and description are React components that give you flexibility in how to render a PostPreview without making its component API too complicated. But this flexibility comes with the responsiblity to manage margins. Generally, you should use bottom margins only and no top margins:

  • title may not have a top margin, only a bottom margin. The bottom margin spaces it from the date.
  • authors may not have a top margin, only a bottom margin. The bottom margin ahouls be zero if authors is not followed by description or href.
  • description may not have a top margin, only a bottom margin. The bottom margin should be zero if it is not followed by a button.

Variants

You can customize PostPreview by defining the following variants in your theme:

KeyDescription
post-preview.badgeCustomize optional tag.
post-preview.buttonCustomize optional button.

In this example we define above variants in a ThemeProvider to customize the look of the tag and button (you would normally do this in your theme):

Post

Vestibulum proin eu mi nulla ac enim in tempor turpis

Willow Rangall, Suzy Cahan, Sandra Abramovici, Jan McKea, Ola Brunger, Ivette Rowlinson, Madeleine Stredwick, Lin Billson, Alfie Piborn, Garvy Bartlomiej

Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum. In hac habitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis, diam erat fermentum justo, nec condimentum neque sapien placerat ante. Nulla justo.

Read on

Visual regression testing

The following URLs can be used for visual regression testing: