> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/template/sections/vendors-list.md).

# Vendors list

Shows a list of brands or suppliers available in your store.

*Shared Settings*:

* [<mark style="color:$primary;">Card</mark>](#card)
* [<mark style="color:$primary;">Section layout</mark>](/triumph/template/shared-settings/section-layout.md)
* [<mark style="color:$primary;">Section mobile layout</mark>](/triumph/template/shared-settings/section-mobile-layout.md)
* [<mark style="color:$primary;">Divider line</mark>](/triumph/template/shared-settings/divider-line.md)
* [<mark style="color:$primary;">Section background</mark>](/triumph/template/shared-settings/section-background.md)
* [<mark style="color:$primary;">Colors</mark>](#colors)
* [<mark style="color:$primary;">Card colors</mark>](#card-colors)
* [<mark style="color:$primary;">Hover card colors</mark>](#hover-card-colors)

*Shared Blocks:*

* [<mark style="color:$primary;">Heading</mark>](/triumph/template/shared-blocks/heading.md)
* [<mark style="color:$primary;">Vendor</mark>](/triumph/template/sections/vendors-list/vendor.md)

***

**Alignment**\
Choose how the grid content is aligned:

* **Left** – Aligns content to the left.
* **Center** – Centers the content.

**Card hover effect**\
Activate to scale a card on hover.

***

#### Card

**Text alignment**\
Sets vendor titles to the left or center of the card.

**Heading size**\
Adjust ventor titles size (15–20 px).

**Image aspect ratio**\
Specify the image style:

* **Adapt to image** – Keeps each image’s original proportions.
* **Squared** – Displays images in a 1:1 ratio.
* **Portrait** – Taller images (3:4 ratio).
* **Landscape** – Wider images (4:3 ratio).

**Image fit**\
Choose how the image fits:

* **Full background**
  * Scales the image to fill the whole container.
  * The image may be cropped to maintain its aspect ratio.
  * Behaves like a background image (`cover`).
  * Equivalent to `background-size: cover`
* **Contain**
  * Scales the image to fit entirely within the container.
  * Preserves the original aspect ratio.
  * May leave a space around the image.
  * Equivalent to `background-size: contain`

***

#### Card colors

**Text**\
Controls the card text color.

***

#### Hover card colors

**Change colors on hover**\
Turn this on to apply a different color scheme when hovering over the card.

**Hover background**\
Background color on hover.

**Hover text**\
Card text color on hover.