--- url: 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/design/card-styles' title: 'Styluj swoje karty | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:37:55+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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ń. tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:37:55+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Styluj swoje karty' description: |- 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ń. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:37:55+0000' dateModified: '2026-10-24T11:37:55+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/design/card-styles' articleSection: 'Przewodniki projektowe' - '@type': WebPage '@id': 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/design/card-styles' description: |- 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ń. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 'Strona Główna' item: 'https://dxpr.com/pl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pl --- [Centrum pomocy](/pl/hc)/[Dokumentacja](/pl/hc/documentation) /[Poznaj DXPR Builder](/pl/hc/documentation/learn-dxpr-builder) /[Buduj strony](/pl/hc/documentation/learn-dxpr-builder/build) /[Stylizuj elementy](/pl/hc/documentation/learn-dxpr-builder/element-settings) /[Przewodniki projektowe](/pl/hc/documentation/learn-dxpr-builder/design/overview) # Styluj swoje karty. Poznaj DXPR BuilderBuduj stronyStylizuj elementyPrzewodniki projektowe ## W tym przewodniku Powiązane przewodniki - [Dodawanie karty](/pl/hc/documentation/learn-dxpr-builder/elements/card) - [Spraw, aby elementy reagowały na najechanie](/pl/hc/documentation/learn-dxpr-builder/design/hover-effects) - [Używaj kolorów marki](/pl/hc/documentation/learn-dxpr-builder/design/colour-and-branding) 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](/hc/documentation/learn-dxpr-builder/elements/card). 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](/hc/documentation/learn-dxpr-builder/design/hover-effects). ## 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? - [Dodawanie karty](/hc/documentation/learn-dxpr-builder/elements/card): dodaj kartę i wypełnij ją elementami. - [Reagowanie elementów na najechanie](/hc/documentation/learn-dxpr-builder/design/hover-effects): pozwól kartom unosić się, gdy odwiedzający je wskazują. - [Używanie kolorów marki](/hc/documentation/learn-dxpr-builder/design/colour-and-branding): trzymaj kolory kart w zgodzie z resztą witryny.