# Blog posts

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FF3K4iwbxjO57zubS6feD%2FPrimavera%20Composition%202025-04-03%20at%202.20.16%20pm.jpg?alt=media&#x26;token=c29b172a-4c8c-4a31-a20e-1d4f19d750b6" 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**](https://docs.ultramarinastudios.com/theme-settings/blog-post-card) 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](https://docs.ultramarinastudios.com/common-settings):

* 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](https://docs.ultramarinastudios.com/blocks/section-blocks/section-header) (hidden by default, fill in the settings to display)
* [Buttons](https://docs.ultramarinastudios.com/blocks/buttons) (hidden by default, fill in the settings to display)

### Examples & inspiration

<div><figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FVgLgF8ijfgksW3C3lKNc%2Fblog-posts-composition.webp?alt=media&#x26;token=ab39432f-3c87-4040-9f76-209ca888db8f" 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="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FKjciWlycstU8dUqlJUbp%2Fblog-posts-gaia.webp?alt=media&#x26;token=5675c530-9362-45eb-be95-e8a6f510b702" 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="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FLkY2fSzoD2E9Md8HFLNv%2Fblog-posts-gloss.webp?alt=media&#x26;token=2d5a1e69-e551-4ac8-a4e9-59b99ce3b79e" 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="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FsT5aAWL32H8ebIhdTBUI%2Fblog-posts-savoir.webp?alt=media&#x26;token=80c44dc3-b438-40de-9d5c-2cbd9c3e419a" 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="featured-post">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="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2Fm3hTjddveX0aFxs5aXQI%2Ffeatured-post-savoir.webp?alt=media&#x26;token=40ff8cad-a744-4cd9-97eb-c1d304ff7dba">featured-post-savoir.webp</a></td></tr></tbody></table>