Grün Berlin - Module Overview & Developer Testing Environment

How to use this testing page

Developer Testing Environment

This page serves as a central hub for accessing and testing all available modules in the Grün Berlin frontend codebase. Use this environment to:

  • Debug styling and functionality of individual modules
  • Test responsive behavior across various screen sizes
  • Verify consistent implementation of design systems
  • Examine modules in isolation before integration

How to use this testing page:

1. Navigate to any module by clicking on its link below

2. Each module page renders using its corresponding template (module-name.hbs) and JSON data (module-name.json)

URL Pattern: Module pages follow the pattern: https://frontend.gruen-berlin.de/{module-name}/{module-name}.html

Content Modules

Headline Module
Rich text content
REPORT Text Module
Rich text content
REPORT Image Module
Standard and full-width images with captions
Media Text Module
Text with media (images with captions)
Banner Module
Full-width banner with text
Blockquote Module
Styled quotations
DEBUG Highlight Text
Emphasized text sections
Colored Box
Content in colored containers
Table
Structured data in table format
Lists
Structured bullet and numbered lists
Icon List
Lists with icon indicators

Teaser Modules

News Teaser
Draggable news items
Events Teaser
Upcoming events preview
Projects Teaser (Gallery)
Projects in gallery format
Projects Teaser (Grid)
Projects in grid format
Projects Teaser (Draggable)
Draggable projects list
Boxes Slider
Swipeable content boxes with keyvisuals
Focus Projects
Highlighted project teasers
Highlight Boxes
Emphasized content boxes
BUG Related Post
Related content suggestions

Grid Modules

Columns Module
Two and three column layouts with captions
REPORT Gallery Module
Image gallery with captions
News Grid
Grid layout for news items
Events Grid
Grid layout for events
Page Teaser Grid
Grid of page teasers
Key Facts Grid
Grid of important statistics or facts
Key Figures
Important statistics display
Logo Grid
Displays a grid of partner/client logos. Configurable columns.

Special Modules

Video Module
Video player
Map Module
Interactive map
Map List
Map with associated location list
Accordion Module
Collapsible content sections
Section Module
Content section with background
DEBUG Topics Large Module
Featured topics
DEBUG Topics Small Module
Featured topics
Stage Module
Hero/banner area with featured content
Tabs Module
Tabbed content navigation
REPORT-ONLY Quiz Module
Interactive questionnaire
FAQs Module
Frequently asked questions

Form & Input Modules

Form Module
General form container
Input Elements
Form input components
Buttons
Button styles and variations
Filters
Content filtering components
Search Module
Search functionality

Meta & Utility Modules

BUG News Meta
Metadata display for news articles
BUG Event Meta
Metadata display for events
Cookie Layer
Cookie consent interface
Downloads
Downloadable file links
Download Library
Collection of downloadable resources
Newsletter Banner
Newsletter signup promotion

Layout Modules

BUG Header
Site header with navigation
Footer
Site footer

Data Integration Modules

RSS Feed Module
External RSS feed integration with filtering and sorting
Jobs Module
Job listings display
Live Ticker
Real-time updates display
Communication Widget
Interactive communication interface
Contacts Module
Contact information display