Setting up Post Cards on listing pages

Post Card

One common feature across archive pages is the Post Card pattern which is generally used to display the post’s featured image, title, date, excerpt and a “read more” link. It is what’s known as a “Synced Pattern” - which means that any changes you make to it will affect all instances of that pattern used across your site. It can be found by going to Patterns > Posts and then clicking on the Post Card preview. You can edit this pattern if you wish but there are some things to be aware of.

There is a class of “post-card” added to the main container that hides the “read more” link that comes as part of the Excerpt block and also adds an arrow button to the Read More block.

There is also a class of “grid-rows-min-content” which is part of a series of settings that allow the Read More buttons (shown as Learn More with a right arrow in the example) to align at the bottom regardless of the size of the title/excerpt.

The other settings are:

• A minimum height of 100% on the Post Card container 
• Putting the Read More block inside a flex container (such as a Row)
• Giving the container (Row) a CSS class of “flex-grow” and setting its vertical alignment to bottom