> For the complete documentation index, see [llms.txt](https://docs.ultramarinastudios.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.ultramarinastudios.com/sections/blog-posts.md).

# Blog posts

<figure><img src="/files/58BS9ojzAckq54L8X8Iq" alt=""><figcaption><p>Blog posts on Composition demo store</p></figcaption></figure>

{% hint style="success" %}
**Quick start**

* Select the blog you'd like to display posts from
* Optionally, adjust the layout
  {% endhint %}

{% hint style="info" %}
The style and display of the blog posts is controlled through global settings under the [**Settings > Blog post card**](/theme-settings/blog-post-card.md) section.
{% endhint %}

### Settings

* **Blog:** To display your blog posts, please select the blog you wish to feature.
* **Blog posts:** Select the number of blog posts to display.
* **Layout:**
  * **Number of columns:** You can choose the **number of columns** for **desktop** and **mobile**
  * **Layout (desktop):** This controls the display of excess items that do not fit the grid columns. You can choose between the **slideshow** or **grid** layout.
  * **Container type:** allows you to select **full** to create full-bleed layouts, **padded** to apply the global horizontal gap setting to a full bleed section, or **max** to constrain the blog posts to the maximum container size.
* **Slideshow** settings apply to both mobile and desktop when **layout (desktop)** is set to slideshow:
  * **Arrow position**: Choose between overlay (arrows appear over the blog posts) or below
  * **Counter style:** Choose between hidden, counter or progress bar
  * **Button style:** Choose a button style for when the arrow position is set to overlay (arrows will have a simple text style if they're positioned below)

{% hint style="info" %}
Can't find the setting you're looking for?  The following settings are explained in detail in [common settings](/common-settings.md):

* Color scheme/Color scheme transition
* Padding
* Borders
  {% endhint %}

### Blocks

This section also comes with pre-loaded with two types of option blocks should you wish to add a header above the blog posts or buttons below them:

* [Section header](/blocks/section-blocks/section-header.md) (hidden by default, fill in the settings to display)
* [Buttons](/blocks/buttons.md) (hidden by default, fill in the settings to display)

### Examples & inspiration

<div><figure><img src="/files/6AOuvacKpcJMUXyEsC1W" alt="Composition preset features a left-aligned header and tags, a large title, and a read more link for each blog post."><figcaption><p>Composition preset</p></figcaption></figure> <figure><img src="/files/y9AJ3eeHftm0f9IbyfkY" alt="The Gaia preset features a left aligned header, and a blog post with a title and excerpt."><figcaption><p>Gaia preset</p></figcaption></figure> <figure><img src="/files/mssc8qfiI6ZGu6XufgdO" alt="The Gloss preset features a centered header with badge title and a read posts button underneath. "><figcaption><p>Gloss preset</p></figcaption></figure> <figure><img src="/files/tkWN5OWDAOCoV0Mv69Lw" alt="The savoir preset features a centered header, text badges, a title and a read more link with a button underneath."><figcaption><p>Savoir preset</p></figcaption></figure></div>

### Similar sections

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>The <a href="/pages/NpHOfKMzK1i833hukdcC">featured post</a> section allows you to highlight a single post as a split card or as a full-bleed image banner. </td><td><a href="/files/FMwnKRZvlZ1hztT8nhup">/files/FMwnKRZvlZ1hztT8nhup</a></td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ultramarinastudios.com/sections/blog-posts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.