**This procedure will allow you to create and use the Listing component, which uses full width and adjusts display and sorting based on content type. On mobile, all content is shown in a single column.** Editing a "Listing" Component in the Back Office involves two steps: ## Step 1 : Access and edit the Listing ![edition listing component GIF](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Design%20sans%20titre%20%288%29%20%282%29.gif?itok=oqMdq-pr) Once the **title**, **hero banner**, and **content push** of the page have been updated, you can start working on the content by adding a **Listing**. ### Add a Listing: - Click on the arrow next to **"Add Quote to Component."** - From the dropdown menu, select **"Add Listing."** - Assign an **admin title** to the container, visible only in the back office. This makes it easier to organize and manage future edits. ### Choose a Listing Type: Select a **listing type based on the page type** you are generating: Publication, Business Case, Contact, Event, Location, Markets, News, Planet Articles, Press Release, Resource Stories and Solutions. ## Step 2 : Choose the Display ![listing type GIF](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Screen%20recording%202025-01-15%2011.29.37.gif?itok=lCfIsFhX) ### Choose a Display Option Based on the Listing Type - **Publication Listing**: - *Full*: Displays all details with elements as an image, title, and description. - *Compact*: A simplified version with less detail. - **Business Case Listing**: - *Block*: A visually impactful format where the elements (image, title, and description) are hidden for a more compact view. - **Contact Listing**: - *Map*: Displays contacts with a location map, showing where each contact is based. - *Block*: A compact format without images, titles, or descriptions. - **Location Listing**: - *Map*: Highlights locations on an interactive map. - *Block*: Lists locations in a compact, organized layout. - **Market Listing**: - *Block*: Displays content in a visually clean format. - **News Listing**: - *News category as argument*: Organize news items by selected categories. - *Block*: Uses a compact layout for a visually engaging format. - **Planet Article**: - *Block*: Displays articles in a compact, standard format. - *CTA*: Includes a call-to-action button to encourage interaction. - **Press Release**: - *Block*: Displays content in a visually clean format. - **Resource Story**: - *Block*: Displays content in a visually clean format. - **Solutions**: - *All Solutions*: Displays all solutions. - *Category as argument*: Filters solutions by specific categories. - *Activity as argument*: Groups solutions by specific activity. **Save Your Changes and Change the status to "Published".** ## Example: Year of publication2024 Month of publicationJanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember Authored on AscDesc Sort by: ReverseChronological [ ![Seawater Desalination Technology ](/sites/g/files/dvc2391/files/styles/content_push_teaser/public/image/2024/12/Screenshot%202024-12-17%2011.34.14.png.webp?itok=hcnNUODM) ](/listing/news-example-3-veolia-pioneers-advanced-seawater-desalination-technology-tackle-global "News (Example 3) - "Veolia Pioneers Advanced Seawater Desalination Technology to Tackle Global Water Scarcity"") 17 December 2024 [News (Example 3) - "Veolia Pioneers Advanced Seawater Desalination Technology to Tackle Global Water Scarcity"](/listing/news-example-3-veolia-pioneers-advanced-seawater-desalination-technology-tackle-global "News (Example 3) - "Veolia Pioneers Advanced Seawater Desalination Technology to Tackle Global Water Scarcity"") Discover this News [Read more](/listing/news-example-3-veolia-pioneers-advanced-seawater-desalination-technology-tackle-global "Read more") [ ![Sustainable collab image ](/sites/g/files/dvc2391/files/styles/content_push_teaser/public/image/2024/12/Screenshot%202024-12-17%2010.44.12_0.png.webp?itok=RAiJEKDJ) ](/listing/news-example-2-ecological-transformation-veolia-focuses-collaboration-doubling-its-1 "News (Example 2) - "Ecological Transformation: Veolia Focuses on Collaboration by Doubling Its "+1" Collectives and Expanding Globally"") 17 December 2024 [News (Example 2) - "Ecological Transformation: Veolia Focuses on Collaboration by Doubling Its "+1" Collectives and Expanding Globally"](/listing/news-example-2-ecological-transformation-veolia-focuses-collaboration-doubling-its-1 "News (Example 2) - "Ecological Transformation: Veolia Focuses on Collaboration by Doubling Its "+1" Collectives and Expanding Globally"") Discover this News [Read more](/listing/news-example-2-ecological-transformation-veolia-focuses-collaboration-doubling-its-1 "Read more") [ ![Quatar image](/sites/g/files/dvc2391/files/styles/content_push_teaser/public/image/2024/12/Screenshot%202024-12-17%2010.10.38.png.webp?itok=8gxWGi4O) ](/listing/news-example-1-veolia-leads-way-treated-wastewater-reuse-qatar "News (Example 1) - "Veolia ouvre la voie à la réutilisation des eaux usées traitées au Qatar"") 17 December 2024 [News (Example 1) - "Veolia ouvre la voie à la réutilisation des eaux usées traitées au Qatar"](/listing/news-example-1-veolia-leads-way-treated-wastewater-reuse-qatar "News (Example 1) - "Veolia ouvre la voie à la réutilisation des eaux usées traitées au Qatar"") Discover this News [Read more](/listing/news-example-1-veolia-leads-way-treated-wastewater-reuse-qatar "Read more") ## Explore Other Components to Enrich Your Website Pages [Explore all the components here](/drupal-essentials/components) [ ![content with aside icon ](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Design%20sans%20titre%20%2810%29.jpg.webp?itok=HfKGf3A1) ](/content-aside)[Content with Aside ](/content-aside) ### [Content with Aside ](/content-aside) [ ![grid icon](/sites/g/files/dvc2391/files/styles/media/public/image/2025/01/Design%20sans%20titre%20%288%29.jpg.webp?itok=1FG3Iuew) ](/grid)[Grid](/grid) ### [Grid](/grid) [ ![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-) ](/container)[Container](/container) ### [Container](/container) ![](/sites/g/files/dvc2391/files/styles/crop_freeform/public/image/2024/08/HP%20BG%20-%20grey%20very%20pale.png.webp?itok=OY0Zt4pI) ## 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)