The **Card component** offers a flexible way to showcase content with a **customizable design**. Discover how you can e**nhance your layout** with text, media, and interactive elements ## How to edit in the back office? ![Card editing mode in drupal](/sites/g/files/dvc2391/files/styles/media/public/image/2024/10/Card.png.webp?h=85aeb7f2&itok=8aQI4M0f) The **Card component** allows you to present content in a structured, **visually appealing format**. It supports not only text but also various media, including images, documents, videos, and CTA buttons, giving you flexibility to **enrich your content**. Cards always use the **full width of the page** and can be added to a Grid, Content with Aside, or Tabs paragraph. You can **customize the card's appearance** by choosing from Veolia's color palette, and it can feature either rounded or square corners with an optional white border. ## Examples: ### Card in one column Add content here... ### Cards in two columns ![Image du Lac de Sainte Suzanne ](/sites/g/files/dvc2391/files/styles/crop_freeform/public/image/2024/10/Le%20lac%20de%20Sainte-Suzanne%20%28%20lac%20de%20Carc%C3%A8s%20%29%20%281%29.jpg.webp?itok=KYtp5nTX) ![Image d'un glacier ](/sites/g/files/dvc2391/files/styles/crop_freeform/public/image/2024/10/CHILI-1-1591.jpg.webp?itok=-fsUdh3l) ### Cards in three columns Add content here... Add content here... Add the content... ### Image card ![Orange worker](/sites/g/files/dvc2391/files/styles/media/public/image/2026/01/CHILI-1-1217.jpg.webp?h=bf27db79&itok=f9dDSMWc) Image card 1 ### Image card 1 ![workers ](/sites/g/files/dvc2391/files/styles/media/public/image/2026/01/chili-2-2295.jpg.webp?h=bff48802&itok=gHQOOPmV) Image card 2 ### Image card 2 ![Image veolia's worker example ](/sites/g/files/dvc2391/files/styles/media/public/image/2024/12/DAGUET_2138.jpg.webp?itok=HKRkNCQ4) Image card 3 ### Image card 3 ### Image card [ ![Image veolia example usine la valette ](/sites/g/files/dvc2391/files/styles/media/public/image/2024/10/Veolia_UsineLaValette_27_3354%20r.jpg.webp?itok=uhCzxI49) ](https://www.sf.userguide.veolia.com/card-component)[Image card](https://www.sf.userguide.veolia.com/card-component) ### [Image card](https://www.sf.userguide.veolia.com/card-component) Add description here... [ ![Image veolia example ](/sites/g/files/dvc2391/files/styles/media/public/image/2024/10/UVE%20SETMI%20Toulouse%2045.jpg.webp?itok=o5MqAeG-) ](https://www.sf.userguide.veolia.com/card-component)[Image card](https://www.sf.userguide.veolia.com/card-component) ### [Image card](https://www.sf.userguide.veolia.com/card-component) Add description here... [ ![Image veolia example ](/sites/g/files/dvc2391/files/styles/media/public/image/2024/10/Rainham_Landfill_Plastic_Recycling_DayTwo_HiRes-62_1.jpg.webp?itok=wSnROHEQ) ](https://www.sf.userguide.veolia.com/card-component)[Image card](https://www.sf.userguide.veolia.com/card-component) ### [Image card](https://www.sf.userguide.veolia.com/card-component) Add description here... ### Activity card [ ![Image veolia example ](/sites/g/files/dvc2391/files/styles/content_push_teaser/public/image/2024/10/DAGUET_2138.jpg.webp?itok=QuC_floO) Water ](https://www.sf.userguide.veolia.com/card-component) This is an **activity card** [ ![Image veolia example ](/sites/g/files/dvc2391/files/styles/content_push_teaser/public/image/2024/10/DAGUET_7478.jpg.webp?itok=IyBLix2O) Energy ](https://www.sf.userguide.veolia.com/card-component) This is an **activity card** [ ![activity sustainibility ](/sites/g/files/dvc2391/files/styles/content_push_teaser/public/image/2024/12/GettyImages-1032517054.jpg.webp?itok=RHMNHPbW) Mixed ](https://www.sf.userguide.veolia.com/card-component) This is an **activity card** [ ![Image veolia example ](/sites/g/files/dvc2391/files/styles/content_push_teaser/public/image/2024/10/Veolia_La%20Veuve_24042024-225.jpg.webp?itok=Vh74FJbn) Waste management ](https://www.sf.userguide.veolia.com/card-component) This is an **activity card** ## Enhance your web pages with components [Discover all the components here](/drupal-essentials/components) [ ![container icon](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Design%20sans%20titre%20%2812%29.jpg.webp?h=b202b291&itok=vmeeKQt-) ](/text)[Text](/text) ### [Text](/text) [ ![Card logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2832%29.png.webp?itok=IkpmBO28) ](/card)[Card](/card) ### [Card](/card) [ ![Quote logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2833%29.png.webp?itok=h2rKsDhF) ](/quote)[Quote](/quote) ### [Quote](/quote) [ ![content carosel icon](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Design%20sans%20titre%20%2811%29.jpg.webp?itok=h0W8b7g1) ](/carousel)[Carousel](/carousel) ### [Carousel](/carousel) [ ![Tab logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2834%29.png.webp?h=ac45851e&itok=iVXOgSle) ](/tab)[Tab](/tab) ### [Tab](/tab) [ ![Employee logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2835%29.png.webp?h=7699e6c3&itok=Po8T6NPm) ](/employees)[Employee](/employees) ### [Employee](/employees) [ ![Iframe logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2836%29.png.webp?h=3089ca13&itok=yg-giCJz) ](/iframe)[Iframe](/iframe) ### [Iframe](/iframe) [ ![Integration Code logo](/sites/g/files/dvc2391/files/styles/media/public/image/2025/02/Design%20sans%20titre%20%2838%29.png.webp?itok=vZx3cgmj) ](/integration-code)[Integration Code](/integration-code) ### [Integration Code](/integration-code) Previous Next ## Ask for support We use ServiceNow to track all of your requests and questions [Create a ticket now](https://veglobal.service-now.com/s3c?id=service_catalog&root=fcec05201b1649504d79dce2b24bcb50) ![](/sites/g/files/dvc2391/files/styles/crop_freeform/public/image/2024/04/image%2014%20%283%29.png.webp?itok=j1xAfftb)