--- url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/design/card-styles' title: 'Kies kaartstijlen die op de hele site terugkeren | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:30:10+00:00' updated: '2026-10-24T06:23:23+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Geef je kaarten een look die bij je site past: een kleurenschema uit de Type van de kaart, afgeronde hoeken en een schaduw uit het paneel Style. Aan het eind heb je een kaart die je in een rij kunt herhalen voor functies, teamleden of prijzen. Om eerst een kaart te plaatsen, zie Een kaart toevoegen. De video volgt de stappen hieronder: hij geeft een kaart een lichte look, ronde hoeken en een zachte schaduw. tags: - Ontwerpgidsen image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T06:23:23+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Kies kaartstijlen die op de hele site terugkeren' description: |- Geef je kaarten een look die bij je site past: een kleurenschema uit de Type van de kaart, afgeronde hoeken en een schaduw uit het paneel Style. Aan het eind heb je een kaart die je in een rij kunt herhalen voor functies, teamleden of prijzen. Om eerst een kaart te plaatsen, zie Een kaart toevoegen. De video volgt de stappen hieronder: hij geeft een kaart een lichte look, ronde hoeken en een zachte schaduw. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T02:30:10+0000' dateModified: '2026-10-24T06:23:23+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/nl/hc/documentation/learn-dxpr-builder/design/card-styles' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/design/card-styles' description: |- Geef je kaarten een look die bij je site past: een kleurenschema uit de Type van de kaart, afgeronde hoeken en een schaduw uit het paneel Style. Aan het eind heb je een kaart die je in een rij kunt herhalen voor functies, teamleden of prijzen. Om eerst een kaart te plaatsen, zie Een kaart toevoegen. De video volgt de stappen hieronder: hij geeft een kaart een lichte look, ronde hoeken en een zachte schaduw. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Help Center](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # Kies kaartstijlen die op de hele site terugkeren. Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen ## In this guide Related guides - [Een kaart toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements/card) - [Elementen laten reageren bij hover](/nl/hc/documentation/learn-dxpr-builder/design/hover-effects) - [Gebruik je merkkleuren](/nl/hc/documentation/learn-dxpr-builder/design/colour-and-branding) Geef je kaarten een look die bij je site past: een kleurenschema uit de **Type** van de kaart, afgeronde hoeken en een schaduw uit het paneel **Style**. Aan het eind heb je een kaart die je in een rij kunt herhalen voor functies, teamleden of prijzen. Om eerst een kaart te plaatsen, zie [Een kaart toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements/card). De video volgt de stappen hieronder: hij geeft een kaart een lichte look, ronde hoeken en een zachte schaduw. ## Een kaart stijlen 1. Wijs de kaart aan, open **More** en kies **Settings**. 2. Kies onder **Type** **Light**. 3. Open het paneel **Style**. 4. Zet **Border radius** op 8. 5. Zet **Drop shadow** op 2. 6. Klik op **Save**. ## Wat je ziet De kaart heeft een lichte achtergrond, afgeronde hoeken en een zachte schaduw. Zijn **Header**-balk staat bovenaan, zijn **Title** opent de body en de elementen die je erin hebt toegevoegd volgen eronder. Een **Type** kleurt de hele kaart, niet alleen de header. **Primary**, **Secondary**, **Success**, **Info**, **Warning**, **Danger** en **Dark** vullen de kaart met die themakleur en maken de tekst wit. **Light** geeft een lichte achtergrond met normale tekst. **Default** laat de kaart aan je thema over. ## Instellingen | Instelling | Waar | Wat het doet | |---|---|---| | **Header** | **General** | Tekst in een balk bovenaan de kaart; laat hem leeg voor geen balk | | **Title** | **General** | Een kop bovenaan de body van de kaart | | **Type** | **General** | Het kleurenschema van de hele kaart; standaard **Default** | | **Background**, **Font color** | **Style** | Je eigen kleuren, bij **Type** **Default** | | **Border radius** | **Style** | Afgeronde hoeken, in pixels | | **Drop shadow** | **Style** | Diepte, van 1 tot 5 | | **Border** (box model), **Border style**, **Border color** | **Style** | Een kader aan één of meer zijden | ## Kaartpatronen - **Flat card**: **Border style** **Solid**, een lichte **Border color**, **Border radius** 4, geen schaduw. - **Elevated card**: **Drop shadow** 2, **Border style** **None**, **Border radius** 8. - **Highlighted card**: zet de linkerkant van **Border** in het boxmodel op 4, **Border style** **Solid** en een accent-**Border color**. - **Card that lifts**: **Drop shadow** 1 in **Style** en 4 in **Hover style**; zie [Elementen laten reageren bij hover](/nl/hc/documentation/learn-dxpr-builder/design/hover-effects). ## Kaarten in een rij Voor een grid met functiekaarten, teamleden of prijzen: 1. Voeg een rij toe en kies een lay-out met drie of vier gelijke kolommen. 2. Voeg aan elke kolom een kaart toe en geef elke kaart dezelfde **Type**- en **Style**-waarden. 3. Open het menu **More** van de rij, kies **Settings** en schakel **Equal-height columns** in. De kolommen lijnen uit, maar elke kaart blijft zo hoog als zijn inhoud. Houd de tekst van elke kaart ongeveer even lang, zodat de kaarten op dezelfde hoogte eindigen. Voor een prijstabel licht je het aanbevolen abonnement uit met een andere **Type** of een diepere **Drop shadow**. ## Als je de stijl niet ziet - **Background of Font color in het Style-paneel heeft geen effect.** Een **Type** anders dan **Default** stelt de kleuren van de kaart in met themaklassen die winnen van het paneel **Style**. Zet **Type** op **Default** en kies je eigen kleuren. - **Witte tekst op een gekleurde kaart is moeilijk leesbaar.** De **Warning**- en **Info**-kleuren van veel thema's zijn licht, en deze types zetten altijd witte tekst. Kies een donkerdere **Type**, of **Light**, die de normale tekstkleur behoudt. - **De schaduw toont niet.** **Drop shadow** is 0, wat geen schaduw betekent. Zet hem op 1 of hoger. ## Wat nu? - [Een kaart toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements/card): voeg een kaart toe en vul hem met elementen. - [Elementen laten reageren bij hover](/nl/hc/documentation/learn-dxpr-builder/design/hover-effects): laat kaarten omhoogkomen wanneer bezoekers erop wijzen. - [Je merkkleuren gebruiken](/nl/hc/documentation/learn-dxpr-builder/design/colour-and-branding): houd kaartkleuren in lijn met de rest van de site.