> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/global-sections/blog-posts.md).
# Blog posts
A blog display section built from a fixed set of blocks — a header, a blog post list, and a View all button. Choose a grid or carousel layout, set the post count, and design the cards.
***
## Settings
### Layout
| Setting | Description |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Width | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. |
| Desktop alignment | Horizontal alignment of all content blocks on desktop. |
| Mobile alignment | Horizontal alignment on mobile, set independently. |
### Gap
Vertical spacing between the stacked blocks (header, list, button).
| Setting | Description |
| ------------- | ---------------------------------- |
| Gap — Desktop | Spacing between blocks on desktop. |
| Gap — Mobile | Spacing between blocks on mobile. |
### Background
| Setting | Description |
| --------------- | ----------------------------------------------------------------- |
| Media | Sets what appears behind the section: an image, a video, or none. |
| Image | Section background image. |
| Mobile Image | Separate background image for mobile. |
| Video | Shopify-hosted background video. Autoplays muted. |
| Overlay | Adds a color layer over the background media. |
| Overlay color | Color and opacity of the overlay. |
| Parallax effect | Adds motion to the background as the page scrolls. |
### Appearance
| Setting | Description |
| ------------ | ------------------------------------------- |
| Color scheme | Background and text colors for the section. |
### Spacing
| Setting | Description |
| ----------------------- | -------------------------------------------------------- |
| Padding top / bottom | Outer vertical spacing. |
| Custom padding — Mobile | Override desktop padding with independent mobile values. |
***
## Available Blocks
This section is built from three static blocks — **Header**, **View all button**, and **Blog list**. They are always present in this order and cannot be removed, reordered, or added to.
### Header
The section header. Add **Subheading**, **Heading**, and **Text** child blocks inside it — see [Header](/helix/theme-blocks/basic/header.md).
{% hint style="info" %}
If you're looking for the heading and text settings, open the **Header** block — they live in its child blocks, not at section level.
{% endhint %}
### View all button
The button links automatically to the blog selected in the Blog list block, so the **Link** and **Open link in new tab** settings are hidden.
| Setting | Description |
| ------------- | ------------------------------------------------------------------ |
| Label | The button text. |
| Style | Button style. Set separately for desktop and mobile. |
| Height | Button height. Set separately for desktop and mobile. |
| Full width | Stretches the button to fill the available width. Mobile only. |
| Show icon | Adds an icon to the button. Set separately for desktop and mobile. |
| Icon | Which icon to show. |
| Icon position | Places the icon before or after the label. |
| Icon size | Icon size, with a **Custom icon size** value when set to Custom. |
### Blog list
| Setting | Description |
| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| Blog | The blog to pull posts from. |
| Max posts | How many posts to show. |
| Type | **Grid** or **Carousel**. The settings below change with this choice. |
| Desktop columns / Mobile columns | Number of cards per row on each device. |
| Enable swipe on mobile | Lets the cards scroll horizontally on mobile. Grid only. |
| Show next slide preview on desktop | Reveals part of the next card to hint that it can be swiped. Carousel only. |
| Custom columns | Set the column count per breakpoint yourself, via **Columns per breakpoint**. |
| Gap — Horizontal / Vertical | Spacing between cards, with independent mobile values. Grid only. |
| Gap — Desktop / Mobile | Spacing between cards in carousel mode. Carousel only. |
| Show navigation on desktop | Previous / next arrows, with **Position**, **Style**, **Icon**, and **Behavior**. Carousel only. |
| Show pagination on desktop | Slide indicators, with **Type**, **Top padding**, and an optional **Limit width** / **Max width** cap on the progress bar. Carousel only. |
| Auto-rotate slides | Advances the carousel automatically, at a set **Speed**, and can **Pause on hover**. Carousel only. |
#### Blog card
Sits inside the Blog list and controls how every post card looks.
| Setting | Description |
| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| Desktop layout | **Vertical** — the image sits above the text. **Horizontal** — the image sits beside the text, from tablet up. Mobile always stacks. |
| Ratio | Crop ratio of the post image — **Original**, **Square (1:1)**, **Portrait (4:5)**, **Portrait (3:4)**, **Portrait (2:3)**, or **Landscape (3:2)**. |
| Alignment | Horizontal alignment of the card content. |
| Desktop gap / Mobile gap | Spacing between the card's title, excerpt, and meta. |
| Border thickness | Width of the card outline. |
| Corner radius | Rounding of the card corners, with a **Custom corner radius** value when set to Custom. |
| Shadow | Drop-shadow depth. |
| Type | **Inherit** the section's color scheme, or apply a separate **Color scheme**. |
| Content padding | Inner spacing on all four sides, with independent mobile values via **Custom for mobile**. |
The card's content is built from its own child blocks — **Title**, **Description**, **Meta**, **Tag**, and **Button**. Add a **Spacer** to push blocks apart, or a **Group** to arrange several of them in a row, for example the meta and tag side by side.
{% hint style="info" %}
While the selected blog has no posts yet, the theme editor shows placeholder content in the card — including a placeholder tag — so you can style it before publishing.
{% endhint %}
***
{% hint style="info" icon="headset" %}
**Need help?**
Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.
Chat with us Submit a ticket
{% endhint %}