Teemaeditori - Listauskortti

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.

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.

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.

Asetus

Tyyppi

Oletus

Vaihteluväli

Kuvaus

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.

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.

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

: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;
}

Määritä verkkokaupan väripaletti.

Tervetuloa TWICE-dokumentaatioon

Liikkuminen TWICEssä

Järjestelmän ymmärtäminen

Teemaeditori - Listauskortti

Värit

Reuna

Välistys ja tasaus

Kuva

CSS-muuttujat

Aiheeseen liittyvää

Värit

Asettelu

​Värit

​Reuna

​Välistys ja tasaus

​Kuva

​CSS-muuttujat

​Aiheeseen liittyvää

Värit

Asettelu

Värit

Reuna

Välistys ja tasaus

Kuva

CSS-muuttujat

Aiheeseen liittyvää