How to use this library
Each card below links to a dedicated demo page for that block type. Open the page in the front end to see how the block renders, or open it in the CMS editor to inspect block configuration and field names. All demos use realistic TOMRA content. The library is organised by function — scroll down or use the section headings to navigate.
Hero & Banners
Full-width and section-level blocks that set the visual tone and carry primary or secondary calls-to-action.
Text & Editorial
Core editorial content blocks — from basic rich text and pull quotes to parallax storytelling, accordions and reusable text fragments.
Cards & Lists
Blocks for surfacing related content, products and navigation options as card grids, thumbnail rows and link lists.
Media
Image, video and slideshow blocks — from single editorial images to interactive touchpoint diagrams.
Calls to Action & Navigation
Action-oriented blocks that drive the user journey — CTA sections, button links, tabbed panels, maps and layout columns.
People, Highlights & Media Coverage
Blocks for showcasing people, featured TOMRA stories, customer testimonials and press/media mentions.
Data, Documents & Specifications
Structured data blocks for tabular information, downloadable documents, product specifications and financial reporting.
Developer & Utility Blocks
Specialist blocks for developers and advanced editors — custom HTML, tags, reusable fragments and IR tools.
Complete Block Reference
| Block | Category | Typical use |
|---|---|---|
| HeroBlock | Hero | Primary full-width page hero with heading, image and CTA |
| BannerBlock | Hero | Compact mid-page banner for section intros and secondary CTAs |
| HeaderBlock | Hero | Section-level heading with image, subtitle and optional link |
| HeroWithFiltersBlock | Hero | Hero with integrated filter UI for news/events/insights listings |
| NotificationAlertBlock | Banner | Dismissible alert banner — Info, Success, Warning, Error |
| ContactBannerBlock | Banner | Contact prompt with business-unit routing and optional image |
| RichTextBlock | Editorial | Free-form rich text — headings, paragraphs, lists, tables, quotes |
| ParagraphWithHeaderBlock | Editorial | Two-column label + body layout for key facts and specifications |
| ParallaxRichTextBlock | Editorial | Rich text with parallax scroll effect for campaign pages |
| QuoteBlock | Editorial | Pull quote with author, title and optional portrait |
| AccordionBlock | Editorial | Collapsible FAQ and deep-dive expandable sections |
| TextFragmentBlock | Editorial | Reusable rich-text snippet identified by a stable slug |
| CardListBlock | Cards | 2–4 manually authored image cards with heading, lead and link |
| CardPageListBlock | Cards | Page-driven card grid — auto-synced with referenced pages |
| SingleCardBlock | Cards | Single manually authored featured card |
| SinglePageCardBlock | Cards | Single featured card driven by a page reference |
| CustomerTestimonialCard | Cards | Testimonial card driven by a TestimonialPage reference |
| ThumbnailListBlock | Lists | Three-column thumbnail grid — manually authored items |
| ThumbnailPageListBlock | Lists | Three-column thumbnail grid — page-driven |
| QuickLinksBlock | Lists | Compact text-only navigation link list |
| CompactPageListBlock | Lists | Lightweight text-only page reference list |
| DiscoverMoreBlock | Lists | Related content recommendations at end of articles |
| ImageBlock | Media | Single editorial image with caption, alt text and intro |
| VideoBlock | Media | YouTube, Vimeo or MP4 embed with poster and intro |
| MediaSlideshowBlock | Media | Scrollable image/video carousel |
| InteractiveTouchpointImageBlock | Media | Annotated background image with clickable hotspot overlays |
| CtaBlock | CTA | Section-level CTA with heading, body text, image and button |
| CtaButtonBlock | CTA | Simple standalone CTA button |
| TabbedInformationListBlock | Navigation | Named content tabs for parallel information |
| MapBlock | Navigation | Interactive map with configurable POI markers |
| LayoutBlock | Navigation | Multi-column layout container — 50/50, 67/33, 33/33/33 |
| PersonsBlock | People | People card grid for leadership and contact pages |
| TomraHighlightsBlock | Highlights | TOMRA-branded featured content showcase |
| TomraInTheMediaBlock | Highlights | External press mention list with source and date |
| TableBlock | Data | Structured data table with configurable headers and rows |
| DocumentCentreBlock | Documents | Downloadable document list — reports, brochures, data sheets |
| TechnicalSpecificationBlock | Specs | Text-based product specification row (product pages) |
| UnitOfMeasurementBlock | Specs | Numeric product specification with unit (product pages) |
| QuarterlyReportBlock | IR | Quarterly earnings report with document, presentation and webcast links |
| FinancialCalendarBlock | IR | IR financial event calendar — results, CMD, AGM |
| PressReleaseBlock | IR | Curated press release list for IR and Press pages |
| HtmlCodeBlock | Developer | Raw HTML embed for custom widgets and legacy content |
| CategoryTagsBlock | Developer | Topic/category tag links for filtering and navigation |
| ProductPageListBlock | Products | ProductPage-driven product teaser grid |