# Logo list

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FaPMnGA05q6Wfifi4sAHj%2FPrimavera%20Gloss%20%C2%B7%20Customize%20primavera-1-0-0%20%C2%B7%20Shopify%202025-04-03%20at%202.43.24%20pm.jpg?alt=media&#x26;token=0b885cc4-804a-467d-8204-11bcec4f46ff" alt=""><figcaption><p>Logo list with auto-scroll enabled, hidden header and top/bottom borders</p></figcaption></figure>

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

* Edit the **section heading** (or clear the settings to hide altogether)
* Click into each **logo** block to add an **image** and optional **link** (or delete if not needed)
  {% endhint %}

### Settings

* **Layout:**
  * **Layout**: Choose between **auto-scroll** and **grid.** Auto-scroll will slowly move items across the screen in whichever direction you choose. If there are not enough items to fill the screen width, items will be duplicated in order to fill the available space. In **grid** mode, logos will be stacked on top of eachother without animation.
  * **Scrolling speed**: When auto-scroll is selected, choose the scrolling speed
  * **Scroll direction:** When auto-scroll is selected, choose betwen to left or to right
  * **Base size**: Sets the base size of the logos, from 16px to 160px
  * **Spacing**: Override the space between logo items
* **Grid layout:**
  * **Horizontal alignment:** Control the horizontal alignment of your logos when in **grid** mode
  * **Container type:** 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.

### Blocks

* [Section header](https://docs.ultramarinastudios.com/sections/section-header)
* **Logo**: To add a logo, hover over the logo list section and press the **Add logo** button. Each logo acceps an image and an optional link. We suggest using .svg files wherever possible for logos in order as this ensures the logo will look crisp, even when resized.
* [Buttons](https://docs.ultramarinastudios.com/blocks/buttons) (hidden by default, fill in the settings to display)

{% 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 %}

### Examples & inspiration

<figure><img src="https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2Fx8e7C6oQLTnXcNcmm0hV%2Flogo-list-composition.webp?alt=media&#x26;token=918c1235-e78a-4291-aade-5911880f5b9d" alt=""><figcaption><p>The Composition preset logo list includes a centered section header.  </p></figcaption></figure>
