> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/storytelling/blog-posts.md).

# Blog posts

Show selected blog articles as responsive blog post cards, grids, and carousels.

The **Blog posts** block displays articles from a selected Shopify blog as a grid or carousel of post cards. Use it to highlight editorial content, announcements, buying guides, stories, press, or journal posts anywhere a compatible section or container can accept the block.

Blog posts builds the post cards from your blog articles. The parent block controls which blog appears, how many posts show, and how the list behaves; the built-in card parts control the featured post, regular post cards, article details, titles, descriptions, and optional read-more buttons.

### 1. What you can do

* Select the blog source for the block
* Show 2-12 posts from the selected blog
* Display posts in a grid or carousel
* Turn a desktop grid into a carousel on mobile
* Add autoplay, infinite loop, hint, control buttons, and pagination for carousel layouts
* Style the shared article card height, corner radius, and full-card link behavior
* Show or hide article tags, author, date, title, description, and read-more buttons
* Adjust padding and margin around the Blog posts block

### 2. Understanding the Blog posts structure

Blog posts uses fixed article card parts. You configure them inside the Blog posts block, but you do not add or reorder them as separate blocks.

```
Blog posts
`-- Regular posts (built in)
    |-- Details
    |-- Title
    `-- Description
```

The **Regular posts** show articles from the selected blog. The block uses the selected **Number of posts to show** to determine how many cards to display.

{% hint style="info" %}
**Note:** Blog posts pulls from Shopify blog articles. Create and publish articles in Shopify first, then choose the blog in the block settings.
{% endhint %}

### 3. How to add Blog posts

{% stepper %}
{% step %}
**Open a compatible section**

In the Theme Editor (Customize), open a compatible section or container.
{% endstep %}

{% step %}
**Add a blog posts block**

Click **Add block**, then select **Blog posts**.
{% endstep %}

{% step %}
**Choose your blog**

Select the **Blog** you want to display.
{% endstep %}

{% step %}
**Set the number of posts**

Specify how many posts to show.
{% endstep %}

{% step %}
**Choose your layout**

Select **Grid** or **Carousel**.
{% endstep %}

{% step %}
**Configure the settings**

Set the layout, style, card settings, details, title, description, and spacing.
{% endstep %}

{% step %}
**Preview the block**

Check how it looks on desktop and mobile.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

### 4. Blog posts settings

<details>

<summary>Blog source</summary>

Use these settings to choose which articles appear and how many posts the block can show.

<table><thead><tr><th width="94.546875">Setting</th><th width="115.0625">Options</th><th width="473.42578125">What it does</th></tr></thead><tbody><tr><td><strong>Blog</strong></td><td>Blog picker</td><td>Selects the Shopify blog used as the article source. The block displays posts from this blog in the order provided by Shopify.</td></tr><tr><td><strong>Number of posts to show</strong></td><td>2-12</td><td>Controls the maximum number of posts displayed in the block. Use fewer posts for compact homepage highlights and more posts for editorial sections that should feel like a browseable feed.</td></tr></tbody></table>

</details>

<details>

<summary>Layout and Carousel</summary>

Blog posts uses the same core grid, carousel, gap, control-button, pagination, hint, and mobile-carousel patterns as Custom list. Use the [Custom list guide](/arctos-theme/blocks/layout/custom-list.md) for deeper guidance.

{% hint style="warning" %}
**Warning:** Use slower autoplay timing when article cards include titles, excerpts, or read-more buttons. Customers need enough time to scan the post before the carousel advances.
{% endhint %}

</details>

<details>

<summary>Post card</summary>

Post card settings control the shared appearance and alignment of all article cards in the block.

<table data-search="false"><thead><tr><th width="150">Setting</th><th width="150">Options</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Style</strong></td><td><ul><li>Classic</li><li>Bento</li></ul></td><td><strong>Classic</strong> shows a standard list of posts. <strong>Bento</strong> displays cards inside framed containers.</td></tr><tr><td><strong>Show divider</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds a visual separator. Available when <strong>Style</strong> is <strong>Classic</strong>.</td></tr><tr><td><strong>Desktop height</strong></td><td>400-600px</td><td>Sets the desktop card height. Taller cards give featured imagery and article text more presence; shorter cards keep the post list compact.</td></tr><tr><td><strong>Mobile height</strong></td><td>300-500px</td><td>Sets the mobile card height so article cards can be shorter on small screens.</td></tr><tr><td><strong>Corner radius</strong></td><td><ul><li>Main corner</li><li>Small</li><li>Extra small</li><li>None</li><li>Custom</li></ul></td><td><p>Controls how rounded the corners of your card are.</p><ul><li><strong>Main corner</strong> matches the global corner radius set in your theme.</li><li><strong>Small</strong> and <strong>Extra small</strong> inherit from the <a href="/pages/MtcWsJuspkVnqjnkw5Ur#id-1.-global-style-main-corner">main corner</a> value and scale it down proportionally for a subtler effect.</li><li><strong>None</strong> removes rounding entirely for a sharp, full-bleed look.</li><li><strong>Custom</strong> lets you set a precise value to match a specific design.</li></ul><p><em>Available when <strong>Style</strong> is <strong>Bento</strong>.</em></p></td></tr><tr><td><strong>Custom corner</strong></td><td>0-100px</td><td>Sets a precise card corner radius. Available when <strong>Corner radius</strong> is <strong>Custom</strong>.</td></tr><tr><td><strong>Use alternate background color</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Uses the alternate background color from your color scheme. Available when <strong>Style</strong> is <strong>Bento</strong>.</td></tr><tr><td><strong>Content alignment</strong></td><td><ul><li>Left</li><li>Center</li><li>Right</li></ul></td><td>Aligns the details, title, description, and button inside all cards.</td></tr><tr><td><strong>Reveal content on hover</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Hides the text content until a customer hovers over the card.</td></tr><tr><td><strong>Full card link</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Makes the entire article card clickable instead of just the title or button.</td></tr></tbody></table>

</details>

<details>

<summary>Read more button</summary>

<table data-search="false"><thead><tr><th width="124.9765625">Setting</th><th width="155.47265625">Options</th><th width="404.09375">What it does</th></tr></thead><tbody><tr><td><strong>Read more button</strong></td><td><ul><li>None</li><li>All devices</li><li>Desktop only</li><li>Mobile only</li></ul></td><td>Shows a read-more action that links customers to the article.</td></tr><tr><td><strong>Button type</strong></td><td><ul><li>Primary</li><li>Secondary</li><li>Link</li></ul></td><td>Sets the button emphasis. Available when <strong>Read more button</strong> is not <strong>None</strong>. For shared button behavior, see <a href="/arctos-theme/blocks/basic/button.md">Button</a>.</td></tr><tr><td><strong>Desktop size</strong></td><td><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td><td>Sets the desktop button size. Available when <strong>Read more button</strong> shows on desktop and <strong>Button type</strong> is not <strong>Link</strong>.</td></tr><tr><td><strong>Mobile size</strong></td><td><ul><li>Small</li><li>Medium</li><li>Large</li></ul></td><td>Sets the mobile button size. Available when <strong>Read more button</strong> shows on mobile and <strong>Button type</strong> is not <strong>Link</strong>.</td></tr><tr><td><strong>Show icon</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds the theme's button icon to the read-more action. Available when <strong>Read more button</strong> is not <strong>None</strong>.</td></tr></tbody></table>

</details>

<details>

<summary>Spacing</summary>

<table><thead><tr><th width="113.93359375">Setting</th><th width="192.8046875">Options</th><th width="375.453125">When to use</th></tr></thead><tbody><tr><td><strong>Padding</strong></td><td>Custom value per side</td><td>Sets the spacing between the block and its surrounding edge.</td></tr><tr><td><strong>Margin</strong></td><td>Custom value per side</td><td>Sets the spacing around the block to separate it from neighboring blocks.</td></tr><tr><td><strong>Custom on mobile</strong></td><td></td><td>Set separate padding and margin values for mobile.</td></tr></tbody></table>

</details>

### 5. Blog post card settings

The built-in **Blog post cards** control how each regular article card looks. These cards use articles from the selected **Blog**.

<details>

<summary>Preview image</summary>

<table data-search="false"><thead><tr><th width="119.74609375">Setting</th><th width="142.765625">Options</th><th width="419.46484375">What it does</th></tr></thead><tbody><tr><td><strong>Display</strong></td><td><ul><li>Full card</li><li>Large</li><li>Small</li><li>None</li></ul></td><td>Controls how much space the article image takes up inside the card.</td></tr><tr><td><strong>Overlay</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds a transparent color or gradient over the full preview image to improve contrast and text readability. <em>Available when <strong>Display</strong> is <strong>Full card</strong>.</em></td></tr><tr><td><strong>Image ratio</strong></td><td><ul><li>16:9</li><li>4:3</li><li>1:1</li></ul></td><td>Sets the preview image shape. <em>Available when <strong>Display</strong> is <strong>Small</strong> or <strong>Large</strong>.</em></td></tr><tr><td><strong>Hover interaction</strong></td><td><ul><li>None</li><li>Zoom in</li><li>Grayscale</li></ul></td><td>Controls the image effect customers see on desktop hover. <em>Available when <strong>Display</strong> is not <strong>None</strong>.</em></td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Reveals a separate mobile <strong>Image ratio</strong> control. <em>Available when <strong>Display</strong> is <strong>Small</strong> or <strong>Large</strong>.</em></td></tr></tbody></table>

</details>

<details>

<summary>Style and spacing</summary>

<table><thead><tr><th width="107.5703125">Setting</th><th width="98.85546875">Options</th><th width="474.8515625">What it does</th></tr></thead><tbody><tr><td><strong>Inherit color scheme</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><ul><li>Turning this <strong>On</strong> matches the post colors to the section, block, or parent it sits in.</li><li>Turning it <strong>Off</strong> lets you pick a unique color scheme to make the post stand out.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Color scheme picker</td><td>Use the picker to select a color scheme set in Theme settings > Colors. <em>Only available when <strong>Inherit color scheme</strong> is off.</em></td></tr><tr><td><strong>Padding</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds space inside the post card. Turn it on to reveal top, bottom, left, and right padding controls from 0-100px.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Reveals separate mobile padding values from 0-50px. <em>Available when <strong>Padding</strong> is on.</em></td></tr></tbody></table>

</details>

### 6. Built-in article details, title, and description

The regular posts include built-in **Details**, **Title**, and **Description** parts. Configure them inside their card settings; they are not blocks merchants add separately.

<details>

<summary>Details</summary>

<table><thead><tr><th width="101.44921875">Setting</th><th width="99.91015625">Options</th><th width="480.98828125">What it does</th></tr></thead><tbody><tr><td><strong>Show tag</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Shows the article tag area when the article has tags available. Use tags to help customers understand the topic or category at a glance.</td></tr><tr><td><strong>Show author</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Shows the article author when author context matters for trust, editorial voice, or journal-style content.</td></tr><tr><td><strong>Show date</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Shows the publish date so customers can understand how current the post is.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Reveals separate mobile visibility controls for tag, author, and date.</td></tr></tbody></table>

</details>

<details>

<summary>Title</summary>

The built-in Title uses the article title. Its style controls follow the same text style pattern as [Heading](/arctos-theme/blocks/basic/heading.md).

<table><thead><tr><th width="104.96484375">Setting</th><th width="145.078125">Options</th><th width="431.3359375">What it does</th></tr></thead><tbody><tr><td><strong>Text style</strong></td><td><ul><li>H0–H6</li><li>Custom</li></ul></td><td>Sets the article title typography. Use larger heading styles for editorial cards and smaller styles for dense post grids.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Reveals a separate mobile <strong>Text style</strong> control so titles can scale down on smaller screens.</td></tr><tr><td><strong>Margin</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds vertical space outside the Title. Turn it on to reveal top and bottom margin controls from 0-200px.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Reveals separate mobile top and bottom margin values from 0-100px. <em>Available when <strong>Margin</strong> is on.</em></td></tr></tbody></table>

</details>

<details>

<summary>Description</summary>

The built-in Description uses the article excerpt or available article description content. Use its spacing controls when the excerpt needs more separation from details, title, or button.

<table><thead><tr><th width="115.01953125">Setting</th><th width="100.08984375">Options</th><th width="467.0078125">What it does</th></tr></thead><tbody><tr><td><strong>Margin</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Adds vertical space outside the Description. Turn it on to reveal top and bottom margin controls from 0-200px.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Reveals separate mobile top and bottom margin values from 0-100px. <em>Available when <strong>Margin</strong> is on.</em></td></tr></tbody></table>

</details>