--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/design/styles-de-cartes' title: 'Styliser vos cartes | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:00:12+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Donnez à vos cartes un aspect adapté à votre site : un jeu de couleurs depuis le Type de la carte, des coins arrondis et une ombre depuis le panneau Style. À la fin, vous avez une carte répétable sur une ligne pour des fonctions, des membres d’équipe ou des tarifs. Pour d’abord poser une carte sur la page, voir Ajouter une carte. La vidéo suit les étapes ci-dessous : elle donne à une carte un aspect clair, des coins ronds et une ombre douce. 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-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Styliser vos cartes' description: |- Donnez à vos cartes un aspect adapté à votre site : un jeu de couleurs depuis le Type de la carte, des coins arrondis et une ombre depuis le panneau Style. À la fin, vous avez une carte répétable sur une ligne pour des fonctions, des membres d’équipe ou des tarifs. Pour d’abord poser une carte sur la page, voir Ajouter une carte. La vidéo suit les étapes ci-dessous : elle donne à une carte un aspect clair, des coins ronds et une ombre douce. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:00:12+0000' dateModified: '2026-10-24T17:19:22+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/fr/hc/documentation/apprendre-dxpr-builder/design/styles-de-cartes' articleSection: 'Guides de design' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/design/styles-de-cartes' description: |- Donnez à vos cartes un aspect adapté à votre site : un jeu de couleurs depuis le Type de la carte, des coins arrondis et une ombre depuis le panneau Style. À la fin, vous avez une carte répétable sur une ligne pour des fonctions, des membres d’équipe ou des tarifs. Pour d’abord poser une carte sur la page, voir Ajouter une carte. La vidéo suit les étapes ci-dessous : elle donne à une carte un aspect clair, des coins ronds et une ombre douce. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Créer des pages](/fr/hc/documentation/learn-dxpr-builder/build) /[Styler vos éléments](/fr/hc/documentation/learn-dxpr-builder/element-settings) /[Guides de design](/fr/hc/documentation/learn-dxpr-builder/design/overview) # Styliser vos cartes. Apprendre DXPR BuilderCréer des pagesStyler vos élémentsGuides de design ## Dans ce guide Guides associés - [Élément carte](/fr/hc/documentation/apprendre-dxpr-builder/elements/carte) - [Faire réagir les éléments au survol](/fr/hc/documentation/apprendre-dxpr-builder/design/effets-de-survol) - [Utiliser les couleurs de votre marque](/fr/hc/documentation/apprendre-dxpr-builder/design/couleurs-de-la-marque) Donnez à vos cartes un aspect adapté à votre site : un jeu de couleurs depuis le **Type** de la carte, des coins arrondis et une ombre depuis le panneau **Style**. À la fin, vous avez une carte répétable sur une ligne pour des fonctions, des membres d’équipe ou des tarifs. Pour d’abord poser une carte sur la page, voir [Ajouter une carte](/fr/hc/documentation/apprendre-dxpr-builder/elements/carte). La vidéo suit les étapes ci-dessous : elle donne à une carte un aspect clair, des coins ronds et une ombre douce. ## Styliser une carte 1. Survolez la carte, ouvrez **More** et choisissez **Settings**. 2. Sous **Type**, choisissez **Light**. 3. Ouvrez le panneau **Style**. 4. Réglez **Border radius** sur 8. 5. Réglez **Drop shadow** sur 2. 6. Cliquez sur **Save**. ## Ce que vous voyez La carte a un fond clair, des coins arrondis et une ombre douce. Sa barre **Header** se trouve en haut, son **Title** ouvre le corps, et les éléments ajoutés dedans suivent en dessous. Un **Type** colore toute la carte, pas seulement l’en-tête. **Primary**, **Secondary**, **Success**, **Info**, **Warning**, **Danger** et **Dark** remplissent la carte de cette couleur du thème et mettent le texte en blanc. **Light** donne un fond clair avec le texte normal. **Default** laisse la carte à votre thème. ## Paramètres | Paramètre | Où | Rôle | |---|---|---| | **Header** | **General** | Texte dans une barre en haut de la carte ; laissez vide pour aucune barre | | **Title** | **General** | Un titre en haut du corps de la carte | | **Type** | **General** | Le jeu de couleurs de toute la carte ; défaut : **Default** | | **Background**, **Font color** | **Style** | Vos propres couleurs, quand **Type** vaut **Default** | | **Border radius** | **Style** | Coins arrondis, en pixels | | **Drop shadow** | **Style** | Profondeur, de 1 à 5 | | **Border** (modèle de boîte), **Border style**, **Border color** | **Style** | Un cadre sur un ou plusieurs côtés | ## Motifs de cartes - **Flat card** : **Border style** **Solid**, une **Border color** claire, **Border radius** 4, sans ombre. - **Elevated card** : **Drop shadow** 2, **Border style** **None**, **Border radius** 8. - **Highlighted card** : mettez le côté gauche de **Border** dans le modèle de boîte à 4, **Border style** **Solid** et une **Border color** d’accentuation. - **Card that lifts** : **Drop shadow** 1 dans **Style** et 4 dans **Hover style** ; voir [Faire réagir les éléments au survol](/fr/hc/documentation/apprendre-dxpr-builder/design/effets-de-survol). ## Cartes sur une ligne Pour une grille de cartes de fonctions, de membres d’équipe ou de tarifs : 1. Ajoutez une ligne et choisissez une mise en page à trois ou quatre colonnes égales. 2. Ajoutez une carte à chaque colonne et donnez à chaque carte les mêmes valeurs **Type** et **Style**. 3. Ouvrez le menu **More** de la ligne, choisissez **Settings** et activez **Equal-height columns**. Les colonnes s’alignent, mais chaque carte reste à la hauteur de son contenu. Gardez le texte de chaque carte à peu près de la même longueur, pour que les cartes finissent à la même hauteur. Pour un tableau de tarifs, mettez en avant le plan recommandé avec un autre **Type** ou une **Drop shadow** plus profonde. ## Si vous ne voyez pas le style - **Background ou Font color dans le panneau Style est sans effet.** Un **Type** autre que **Default** définit les couleurs de la carte avec des classes du thème qui gagnent sur le panneau **Style**. Réglez **Type** sur **Default** et choisissez vos propres couleurs. - **Du texte blanc sur une carte colorée est dur à lire.** Les couleurs **Warning** et **Info** de beaucoup de thèmes sont pâles, et ces types mettent toujours le texte en blanc. Choisissez un **Type** plus sombre, ou **Light**, qui garde la couleur de texte normale. - **L’ombre ne s’affiche pas.** **Drop shadow** vaut 0, ce qui signifie aucune ombre. Réglez-le sur 1 ou plus. ## Et ensuite ? - [Ajouter une carte](/fr/hc/documentation/apprendre-dxpr-builder/elements/carte) : ajouter une carte et la remplir d’éléments. - [Faire réagir les éléments au survol](/fr/hc/documentation/apprendre-dxpr-builder/design/effets-de-survol) : laisser les cartes se soulever quand les visiteurs les pointent. - [Utiliser les couleurs de votre marque](/fr/hc/documentation/apprendre-dxpr-builder/design/couleurs-de-la-marque) : garder les couleurs des cartes alignées sur le reste du site.