> 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/category-list.md).

# Category list

Display a list of category cards that link to collections. Use this section for quick category navigation, age/size filters.

{% hint style="info" %}
Available since v3.0.0
{% endhint %}

*Shared Settings*:

* [<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;">Background</mark>](/triumph/template/shared-settings/section-background.md)
* [<mark style="color:$primary;">Colors</mark>](/triumph/template/shared-settings/colors.md)

*Blocks:*

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

***

**Card**

**Show image**\
Toggles between a card image and a plain arrow icon.

{% tabs %}
{% tab title="Show image enabled" %}
**Image aspect ratio**\
Use the drop-down to choose the shape of the card image:

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

**Image fit**\
Available once an aspect ratio other than *Adapt to image* is selected.

* **Cover** – Crops the image to fill the frame.
* **Contain** – Shows the full image inside the frame.

If a block has no image selected, a placeholder image is shown in its place.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2Fuuy6bRD1RorZ8YlDfvHJ%2Fcl_image.png?alt=media&amp;token=755dfef1-5e9f-4b06-b862-4676d6b43a3f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Show image disabled" %}
Every card shows a small arrow icon instead of an image. Colors for the icon are set in Card colors.

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2F6N64QrunenQunFRsk8BJ%2Fcl_icon.png?alt=media&amp;token=e03e7543-021c-44f7-8dee-9da4a683883e" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

Unlike other carousel sections, edge peeking and arrow position are fixed and cannot be customized.

{% tabs %}
{% tab title="Desktop" %}

* Arrows are pinned to the left and right sides of the carousel.
* An arrow fades out once there is nothing left to scroll to in that direction.
  {% endtab %}

{% tab title="Tablet & Mobile" %}

* Arrows are hidden; cards are browsed with a swipe gesture.
* The next card always peeks in from the edge of the screen to hint that more categories are available.
  {% endtab %}
  {% endtabs %}

***

**Card colors**

Controls the appearance of colors on category cards.

* **Background** – Sets the card's background color.
* **Text** – Sets the card's text color.
* **Border** – Sets the card's border color.

{% tabs %}
{% tab title="Show image enabled" %}
**Image border**\
Sets the border color around the card image. Leave empty for a transparent border.
{% endtab %}

{% tab title="Show image disabled" %}
**Arrow background**\
Sets the background color of the arrow icon.

**Arrow color**\
Sets the color of the arrow icon.

**Hover arrow background**\
Sets the arrow's background color on hover.

**Hover arrow color**\
Sets the arrow's color on hover.
{% endtab %}
{% endtabs %}

***

**Hover card colors**

Controls how cards look when hovered.

* **Change colors on hover** – Enables custom hover styles.
* **Hover background** – Sets the background color on hover.
* **Text** – Adjusts the text color on hover.

***

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FKkeLW5E3WQm7Fv1z0Dyx%2Fcl_d.png?alt=media&amp;token=16c8d531-85fb-440b-91f9-1ed5f2ce9ac6" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FUzdzMBIJIZTFOCr6rUlF%2Fcl_m.png?alt=media&amp;token=25eec3e4-8367-46c9-bba5-d039f688d1c2" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}