# Blog posts

> The latest posts from one of your blogs as cards with an image, title, date and excerpt. Placeholders fill the row until you have published enough posts of your own.

Tally theme documentation · HTML version: https://themelab.page/tally/docs/sections/blog-posts/

## At a glance

- **In the editor:** Blog posts
- **Where it goes:** Any page template, with Add section
- **In the presets:** Tally: Home page; Petal: Home page
- **Settings:** 33
- **App blocks:** Yes

## Set it up

1. Pick the **Blog** and how many **Posts to show** (1–9).
2. Set **Columns on desktop** (1–4).
3. Once your blog has enough posts, turn off **Fill missing posts with placeholders**.

## Post cards

- **Card style:** *Plain* (image and text), *Card* (on a soft panel) or *Title on the image*.
- **Text alignment**, **Heading size**, **Image ratio** and **Image shape** (*Rounded*, *Arch* or *Square*).
- **Show date**, **Show author** and **Show excerpt**, and a **Button label** for a *Read more* link.

## Hover effect

*Zoom and lift*, *Zoom the image*, *Lift the tile*, *Darken the image* or *None*, with a **Zoom** amount. Only cards with a link react, and only with a mouse.

> **Important**
>
> **Fill missing posts with placeholders** is on by default so the section looks complete in the demo. Turn it off once you publish your own posts – placeholders are not meant for a live store.

## All settings

Every setting in the order of the theme editor, with its options and its default value.

**Section: Blog posts** (33 settings, in editor order)

| Setting | Options | Default |
| --- | --- | --- |
| **Heading** | Rich text (one line) | Sample text |
| **Text** | Rich text | – |
| **Heading size** | Large · Medium · Small | Medium |
| **Heading alignment** | Left · Center | Left |
| **Blog** | Blog | – |
| **Posts to show** | 1–9 (step 1) | 3 |
| **Fill missing posts with placeholders** – While the blog has fewer posts than the section shows. Turn off once you publish your own posts. | Checkbox | On |
| **Columns on desktop** | 1–4 (step 1) | 3 |

*Post cards*

| Setting | Options | Default |
| --- | --- | --- |
| **Card style** | Plain · Card · Title on the image | Plain |
| **Text alignment** | Left · Center | Left |
| **Heading size** | Small · Medium · Large | Medium |
| **Image ratio** | Landscape · Wide · Square · Portrait | Landscape |
| **Image shape** | Rounded · Arch · Square | Rounded |

*Hover effect*

| Setting | Options | Default |
| --- | --- | --- |
| **Effect** | Zoom and lift · Zoom the image · Lift the tile · Darken the image · None | Zoom and lift |
| **Zoom** | 101–112% (step 1) | 105% |
| **Show date** | Checkbox | On |
| **Show author** | Checkbox | Off |
| **Show excerpt** | Checkbox | On |
| **Button label** | Text | Sample text |
| **Color scheme** | Color scheme | Scheme 1 |

*Grid spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Use custom spacing** – Otherwise the spacing from Theme settings > Layout is used. | Checkbox | Off |
| **Space between columns** | 0–64px (step 2) | 20px |
| **Space between rows** | 0–96px (step 2) | 20px |
| **Space between columns on mobile** | 0–32px (step 1) | 8px |
| **Space between rows on mobile** | 0–64px (step 1) | 21px |

*Section spacing*

| Setting | Options | Default |
| --- | --- | --- |
| **Top padding** | 0–160px (step 4) | 80px |
| **Bottom padding** | 0–160px (step 4) | 80px |
| **Top padding on mobile** | 0–120px (step 4) | 56px |
| **Bottom padding on mobile** | 0–120px (step 4) | 56px |

*Advanced*

| Setting | Options | Default |
| --- | --- | --- |
| **Hide on mobile** | Checkbox | Off |
| **Hide on desktop** – Mobile means below the width where the header switches to the mobile menu (Header > Switch to the mobile menu below). | Checkbox | Off |
| **Animate on scroll** | Checkbox | On |
| **Anchor ID** – Link to this section with #anchor-id. | Text | – |

## Related

- [Blog](https://themelab.page/tally/docs/sections/blog.md): The blog page – a featured newest post, a tag filter and post cards with hover effects.
- [Blog post](https://themelab.page/tally/docs/sections/blog-post.md): A post with reading time, table of contents, progress bar, share buttons, author box and related posts.