Styluj swoje karty.

Poznaj DXPR BuilderBuduj stronyStylizuj elementyPrzewodniki projektowe

Nadaj kartom wygląd pasujący do witryny: schemat kolorów z Type karty, zaokrąglone rogi i cień z panelu Style. Na końcu masz kartę do powtarzania w wierszu dla funkcji, członków zespołu albo cen. Aby najpierw umieścić kartę na stronie, zobacz dodawanie karty.

Film podąża za poniższymi krokami: nadaje karcie jasny wygląd, okrągłe rogi i miękki cień.

Stylowanie karty

  1. Najedź na kartę, otwórz More i wybierz Settings.
  2. W Type wybierz Light.
  3. Otwórz panel Style.
  4. Ustaw Border radius na 8.
  5. Ustaw Drop shadow na 2.
  6. Kliknij Save.

Co widzisz

Karta ma jasne tło, zaokrąglone rogi i miękki cień. Jej pasek Header znajduje się na górze, jej Title otwiera treść, a dodane wewnątrz elementy podążają poniżej.

Opcja Type koloruje całą kartę, nie tylko nagłówek. Primary, Secondary, Success, Info, Warning, Danger i Dark wypełniają kartę tym kolorem motywu i sprawiają, że tekst jest biały. Light daje jasne tło ze zwykłym tekstem. Default pozostawia kartę motywowi.

Ustawienia

Ustawienie Gdzie Do czego służy
Header General Tekst w pasku u góry karty; zostaw pusty, aby nie było paska
Title General Nagłówek u góry treści karty
Type General Schemat kolorów całej karty; domyślnie Default
Background, Font color Style Własne kolory, gdy Type to Default
Border radius Style Zaokrąglone rogi, w pikselach
Drop shadow Style Głębia, od 1 do 5
Border (model pudełkowy), Border style, Border color Style Ramka na jednym lub więcej bokach

Wzorce kart

  • Karta płaska: Border style Solid, jasny Border color, Border radius 4, bez cienia.
  • Karta wyniesiona: Drop shadow 2, Border style None, Border radius 8.
  • Karta wyróżniona: ustaw lewy bok Border w modelu pudełkowym na 4, Border style Solid i akcentujący Border color.
  • Karta unosząca się: Drop shadow 1 w Style i 4 w Hover style; zobacz reagowanie elementów na najechanie.

Karty w wierszu

Do siatki kart funkcji, członków zespołu albo cen:

  1. Dodaj wiersz i wybierz układ z trzema albo czterema równymi kolumnami.
  2. Dodaj kartę do każdej kolumny i nadaj każdej karcie te same wartości Type i Style.
  3. Otwórz menu More wiersza, wybierz Settings i włącz Equal-height columns.

Kolumny wyrównują się, ale każda karta pozostaje wysoka na swoją treść. Trzymaj tekst każdej karty w podobnej długości, aby karty kończyły się na tej samej wysokości. Do tabeli cen wyróżnij polecany plan innym Type albo głębszym Drop shadow.

Jeśli nie widzisz stylu

  • Background albo Font color w panelu Style nie działa. Type inny niż Default ustawia kolory karty klasami motywu wygrywającymi z panelem Style. Ustaw Type na Default i wybierz własne kolory.
  • Biały tekst na kolorowej karcie jest trudny do czytania. Kolory Warning i Info wielu motywów są blade, a te typy zawsze ustawiają biały tekst. Wybierz ciemniejszy Type albo Light, który zachowuje zwykły kolor tekstu.
  • Cień się nie pokazuje. Drop shadow to 0, co oznacza brak cienia. Ustaw 1 albo więcej.

Co dalej?