> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fetchski-attract.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Blog Preview

> Show up to 3 of your newest blog posts as cards, with a link to the rest.

The Blog Preview section shows up to 3 of your newest blog posts as cards, with a button to the rest of your blog. Use it to keep your home page fresh, or to suggest more reading below a post.

 **Who can do this:** anyone who can edit the page. The **CSS** tab is for Admins and Owners.

![Parker's Blog Preview as visitors see it: heading "From the blog", a one-line subheading, an "All posts" button on the right, and 3 post cards, each with a photo, category badge, date, title, excerpt and "Read post" link.](https://mintcdn.com/fetchski-attract-api/OLdYoUpjyEyrK8L8/images/cms/guides/sections/blog-preview/guides-sections-blog-preview-overview-light.png?fit=max\&auto=format\&n=OLdYoUpjyEyrK8L8\&q=85\&s=1923991da74b1ceeee9998fbeaf6f9f2)

Your newest posts, with a button to the full blog.

## When to use it

* To show visitors your business is active, right on your home page.
* To point readers to more posts at the bottom of a blog post.
* To pair news or tips with a related page, such as a training page.

## Where the posts come from

You don't pick posts in the section. It shows up to 3 of your newest posts, newest first, by each post's **Publication Date**. To change a post's place, change its **Publication Date** on the post's **Basics** tab. You write posts in the **Blog Posts** manager: press ⌘K (Ctrl+K on Windows) and choose **Blog Posts** under **Manage**.

Each card uses the post's main picture (its featured image), title, short summary (its excerpt), category, date and author. See [Blog](https://docs.fetchski-attract.com/guides/content/blog.md) for how to write posts and set up categories.

## Add it to a page

**1. Open the page**

Sign in, open the page on your site, and choose **Edit** in the edit bar at the top.

**2. Find the spot**

Select the section next to where the new one should go. A round **+** button appears on its top and bottom edges. On an empty page, choose **Add Content** in the middle.

**3. Choose the section**

The **Add Content** menu opens with its groups. Choose the section, then select it and choose **Edit** in its side toolbar to make it yours.

For the full walkthrough, see [Add, move and remove sections](https://docs.fetchski-attract.com/guides/build-pages/add-move-remove-sections.md).

Choose **Add Content** → **Content** → **Blog Preview**.

To suggest more reading below a post, add it to the post's **After content**, the full-width space under the post's text. Press ⌘K (Ctrl+K on Windows), choose **Blog Posts** under **Manage**, and open the post. On its **After Content** tab, choose **Add Content** → **Content** → **Blog Preview**.

## What you can change

Select the Blog Preview on the page and choose **Edit**. The editor opens beside the page, so you see each change as you make it. It has five tabs.

Your changes go into the page's draft. Visitors see them once the page is published with **Update** in the edit bar (**Publish** on a page never published).

![The Blog Preview editor open on the Blog Preview tab beside the live section, with the tab strip ringed (Blog Preview, Background, Fonts, Button, CSS) and Heading ringed, then Subheading, Image shape, Image hover and Image fills the card.](https://mintcdn.com/fetchski-attract-api/l0eBwtzJpLtH9LWE/images/cms/guides/sections/blog-preview/guides-sections-blog-preview-editor-light.png?fit=max\&auto=format\&n=l0eBwtzJpLtH9LWE\&q=85\&s=a7e64c5cd5095afa9eb6f118fc2b2a1d)

The Blog Preview editor, with the section updating beside it.

> [accordion] Blog Preview
>
> The heading and how each post card looks.
>
> **Heading**
>
> * **Heading**: the section's title. The default is "From the blog".
> * **Subheading**: one short line under the heading. Clear it to hide it.
>
> **Image**
>
> * **Image shape**: **Wide (16:10)**, **Photo (4:3)**, **Classic (3:2)** or **Square (1:1)**. Choose **Hidden (no image)** for text-only cards.
> * **Image hover**: **Zoom in** or **None**.
> * **Image fills the card**: the photo becomes the whole card, with the title over a dark band. Posts without a photo keep a normal card.
>
> **Card**
>
> * **Card style**, **Card corners** and **Card hover effect**: the card's frame, its corners and what it does on hover. See [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md).
> * **Hover accent color**: the color of the hover effect. Leave it empty to use your site's accent color.
>
> **What each card shows**
>
> * **Show category**: the post's category badge, a small label with the category's name. **Category badge style** can be **Filled**, **Outline** or **Minimal**. Each category's color is set in the **Blog Categories** manager: press ⌘K (Ctrl+K on Windows) and choose **Blog Categories** under **Manage**. See [Blog](https://docs.fetchski-attract.com/guides/content/blog.md).
> * **Show date**, **Show excerpt** and **Show author**: turn each one on or off. **Excerpt lines** sets how many lines of the excerpt show.
> * **Show “Read post” link**: the link at the foot of each card. **“Read post” placement** can be **Auto (per layout)**, **Below the text** or **Right side**. This section always shows its cards in a grid, so **Auto (per layout)** puts the link below the text.
>
> **Text colors**
>
> Set the color of the title, the excerpt, the date line and the "Read post" link, and their hover colors. Each color can be set separately for the dark and light themes. You can also set **Title weight** and **Excerpt weight**.

> [accordion] Background
>
> Give the section its own background color, from your site's palette or a custom color. See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md).

> [accordion] Fonts
>
> Use a different typeface for parts of this section only, such as the heading. Leave it empty to use the page's fonts, which normally come from **Site design** → **Typography**. See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md).

> [accordion] Button
>
> The button beside the heading. It starts as "All posts", linking to your blog page. Change the label or the link, or clear the label to hide it. See [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md).

> [accordion] CSS
>
> Custom styles for this section only. Admins and Owners can change this tab. See [Custom CSS](https://docs.fetchski-attract.com/guides/site-design/custom-css.md).

## Looks you can make

![A Blog Preview where each card is a full photo with the title and date over a dark band at the bottom.](https://mintcdn.com/fetchski-attract-api/OLdYoUpjyEyrK8L8/images/cms/guides/sections/blog-preview/guides-sections-blog-preview-image-fill-light.png?fit=max\&auto=format\&n=OLdYoUpjyEyrK8L8\&q=85\&s=3f024f96c5a9162cde2dc801deee0258)

Image-filled cards put your photos first.

**A photo-led strip.** Choose **Photo (4:3)**, turn on **Image fills the card**, and turn off **Show excerpt**.

![A Blog Preview with text-only cards: outline category badges, titles, 2-line excerpts and "Read post" on the right, on a soft accent background.](https://mintcdn.com/fetchski-attract-api/OLdYoUpjyEyrK8L8/images/cms/guides/sections/blog-preview/guides-sections-blog-preview-text-only-light.png?fit=max\&auto=format\&n=OLdYoUpjyEyrK8L8\&q=85\&s=527382adfb27a62906ef52eae8cf940d)

Text-only cards suit news and quick tips.

**Quick news and tips.** Set **Image shape** to **Hidden (no image)**, choose the **Outline** badge style, and give the section an **Accent (soft tint)** background.

## Good to know

* **No posts, no section.** With no posts to show, the section stays hidden, even while you edit. It appears once your blog has a post.
* **Up to 3 posts.** With 3 posts, the cards sit side by side on wide screens, 2 per row on tablets, and stacked on phones. With 1 or 2 posts, the cards keep the same width and the rest of the row stays empty.
* **Drafts show while you edit.** You see posts you haven't published yet. Visitors see only your newest published posts.
* **Where it fits.** Blog Preview is a full-width section. It isn't offered inside columns or in a post's **Body**.
* **Write alt text for your post photos**, so every card makes sense to screen reader users. Alt text is a short description that screen readers read aloud, such as "Two puppies playing tug-of-war on the lawn". To add it, open the command palette (⌘K, or Ctrl+K on Windows), choose **Images**, choose the photo, and fill in **Alt Text**. See [The media library](https://docs.fetchski-attract.com/guides/media/media-library.md).

## Appearance options

Most sections also share a few tabs that work the same everywhere:

* **Background**: set the color behind the section, separately for the dark and light themes.
* **Fonts**: use a different typeface for parts of this section only.
* **CSS**: add custom styles to this section. Admins and Owners can change it.

See [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md) for every option.

## Related

> [card] [Blog](https://docs.fetchski-attract.com/guides/content/blog.md)
>
> write posts, add categories and authors, and set up your blog page.

> [card] [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md)
>
> every card style and hover effect.

> [card] [What every section shares](https://docs.fetchski-attract.com/guides/sections/what-every-section-shares.md)
>
> background, fonts and custom styles.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.