Editor storefrontu - Karta nabídek

Nastavení	Výchozí	Popis
Pozadí	`#FFFFFF`	Výplň pozadí karty.
Text	`#111826`	Barva primárního textu: název nabídky a cena.
Text sekundární	`#374152`	Podpůrný text: popisy a metadata.

Nastavení

Výchozí

Popis

Pozadí

#FFFFFF

Výplň pozadí karty.

Text

#111826

Barva primárního textu: název nabídky a cena.

Text sekundární

#374152

Podpůrný text: popisy a metadata.

Nastavení	Typ	Výchozí	Rozsah	Popis
Barva	Barva	`#E4E6EB`	-	Barva rámečku kolem karty.
Tloušťka	Posuvník	0 px	0–8 px	Šířka rámečku. Výchozí je 0 (žádný viditelný rámeček).
Poloměr rohu	Posuvník	0 px	0–40 px	Jak zaoblené jsou rohy karty.

Nastavení

Typ

Výchozí

Rozsah

Popis

Barva

#E4E6EB

Barva rámečku kolem karty.

Tloušťka

Posuvník

0 px

0–8 px

Šířka rámečku. Výchozí je 0 (žádný viditelný rámeček).

Poloměr rohu

Posuvník

0 px

0–40 px

Jak zaoblené jsou rohy karty.

Rozestupy a zarovnání

Nastavení	Typ	Výchozí	Rozsah	Popis
Odsazení karty	Posuvník	0 px	0–16 px	Prostor mezi rámečkem karty a jejím obsahem.
Odsazení textu	Posuvník	0 px	0–16 px	Prostor mezi oblastí obrázku a textovým obsahem pod ní.
Zarovnání obsahu	Přepínač	Vlevo	Vlevo / Na střed / Vpravo	Vodorovné zarovnání názvu nabídky, ceny a popisného textu.

Nastavení	Typ	Výchozí	Rozsah	Popis
Poloměr rohu	Posuvník	4 px	0–40 px	Jak zaoblené jsou rohy obrázku nabídky.
Odsazení	Posuvník	0 px	0–16 px	Prostor mezi rámečkem karty a obrázkem nabídky.

Nastavení

Typ

Výchozí

Rozsah

Popis

Poloměr rohu

Posuvník

4 px

0–40 px

Jak zaoblené jsou rohy obrázku nabídky.

Odsazení

Posuvník

0 px

0–16 px

Prostor mezi rámečkem karty a obrázkem nabídky.

CSS proměnné

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

Definujte barevnou paletu storefrontu.

Vítejte v dokumentaci TWICE

Orientace v TWICE

Jak systém funguje

Editor storefrontu - Karta nabídek

Barvy

Rámeček

Rozestupy a zarovnání

Obrázek

CSS proměnné

Související články

Barvy

Rozvržení

​Barvy

​Rámeček

​Rozestupy a zarovnání

​Obrázek

​CSS proměnné

​Související články

Barvy

Rozvržení

Barvy

Rámeček

Rozestupy a zarovnání

Obrázek

CSS proměnné

Související články