> ## Documentation Index
> Fetch the complete documentation index at: https://www.twicecommerce.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Teemaeditori - Listauskortti

> Määritä listauskorttien ulkoasu kokoelmaruudukoissa — värit, reunat, välistys, tasaus ja kuva-asetukset.

<Frame caption="Teemaeditori > Listauskortti">
  <img src="https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-listings-card.webp?fit=max&auto=format&n=lZhc_tO8u1u_bL0Q&q=85&s=bfb6bcb1d9946a90eaf057949a1aaadb" alt="Listauskortin asetuspaneeli teemaeditorissa" width="1920" height="1080" data-path="images/theme-editor-listings-card.webp" />
</Frame>

Listauskortin paneeli ohjaa tuotekorttien ulkoasua kokoelmaruudukoissa ja listausriveillä. Nämä kortit ovat asiakkaiden ensisijainen tapa selata katalogia, joten niiden ulkoasu vaikuttaa suoraan ostokokemukseen.

## Värit

| Asetus              | Oletus    | Kuvaus                                    |
| ------------------- | --------- | ----------------------------------------- |
| Tausta              | `#FFFFFF` | Kortin taustatäyttö.                      |
| Teksti              | `#111826` | Päätekstin väri — tuotteen nimi ja hinta. |
| Toissijainen teksti | `#374152` | Tukiteksti — kuvaukset ja metatiedot.     |

## Reuna

| Asetus            | Tyyppi      | Oletus    | Vaihteluväli | Kuvaus                                          |
| ----------------- | ----------- | --------- | ------------ | ----------------------------------------------- |
| Väri              | Väri        | `#E4E6EB` | —            | Kortin ympärillä olevan reunan väri.            |
| Paksuus           | Liukusäädin | 0 px      | 0–8 px       | Reunan leveys. Oletus on 0 (ei näkyvää reunaa). |
| Kulmien pyöristys | Liukusäädin | 0 px      | 0–40 px      | Kuinka pyöristettyjä kortin kulmat ovat.        |

## Välistys ja tasaus

| Asetus          | Tyyppi      | Oletus | Vaihteluväli          | Kuvaus                                                      |
| --------------- | ----------- | ------ | --------------------- | ----------------------------------------------------------- |
| Kortin täyte    | Liukusäädin | 0 px   | 0–16 px               | Kortin reunan ja sisällön välinen tila.                     |
| Tekstin täyte   | Liukusäädin | 0 px   | 0–16 px               | Kuva-alueen ja sen alapuolisen tekstisisällön välinen tila. |
| Sisällön tasaus | Valitsin    | Left   | Left / Center / Right | Tuotteen nimen, hinnan ja kuvaustekstin vaakatasaus.        |

## Kuva

| Asetus            | Tyyppi      | Oletus | Vaihteluväli | Kuvaus                                       |
| ----------------- | ----------- | ------ | ------------ | -------------------------------------------- |
| Kulmien pyöristys | Liukusäädin | 4 px   | 0–40 px      | Kuinka pyöristettyjä tuotekuvan kulmat ovat. |
| Täyte             | Liukusäädin | 0 px   | 0–16 px      | Kortin reunan ja tuotekuvan välinen tila.    |

## CSS-muuttujat

<CodeGroup>
  ```css CSS-muuttujat theme={null}
  :root {
    --storefront-listings-card-background: #FFFFFF;
    --storefront-listings-card-text-color: #111826;
    --storefront-listings-card-text-secondary-color: #374152;
    --storefront-listings-card-border-color: #E4E6EB;
    --storefront-listings-card-border-width: 0px;
    --storefront-listings-card-border-radius: 0px;
    --storefront-listings-card-padding: 0px;
    --storefront-listings-card-content-padding: 0px;
    --storefront-listings-card-content-alignment: left;
    --storefront-listings-card-image-border-radius: 4px;
    --storefront-listings-card-image-padding: 0px;
  }
  ```
</CodeGroup>

## Aiheeseen liittyvää

<CardGroup cols={2}>
  <Card title="Värit" icon="palette" href="/docs/fi/sales-channels/online-store/theme-editor/settings/colors">
    Määritä verkkokaupan väripaletti.
  </Card>

  <Card title="Asettelu" icon="columns-3" href="/docs/fi/sales-channels/online-store/theme-editor/settings/layout">
    Määritä sivun leveys ja välistys.
  </Card>
</CardGroup>