> 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. ![Blog Posts section overview](/files/BZKtecjesYuYUfFTmqPF) *** ## 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 | | ------------------------ | ------------------------------------------------------------------------------------------ | | Ratio | Crop ratio of the post image. | | 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**. |