Component Library

Phase 6.2.2: Film Tiles, Buttons & Language Controls

Streaming service style UI components with hover interactions

Film Tiles

3:2 aspect ratio, borderless design with hover states

✓ Smooth scale-up to 105% on hover
✓ Z-index lift for layered effect
✓ Drop shadow appears on hover
✓ Title and year overlay on hover
✓ Optional category badge

Single Tile

Tuvalu

Grid Layout (Hover to see effects)

Tuvalu

Absurdistan

The Bra

Baikonur

Behind the Couch

Quatsch

Buttons & Controls

Minimalist, icon-driven, monochrome buttons

✓ Icon-driven design with accessible labels
✓ Monochrome color scheme (black/white)
✓ Smooth hover transitions
✓ Focus states for keyboard navigation

Icon Buttons

Button Sizes

Text Buttons

View All Films Learn More Watch Trailer

Language Toggle

Bilingual site navigation (German/English)

✓ Clear active state indication
✓ Smooth transitions on hover
✓ Accessible with ARIA labels

Standard Toggle (German Active)

Standard Toggle (English Active)

Compact Toggle

DE / EN

Combined Example

Film tiles with navigation buttons

Feature Films

Latest releases

The Bra

Absurdistan

Tuvalu

Interactive States

Hover and focus behaviors

Component	Default	Hover Effect	Duration
Film Tile	Scale 100%, No shadow	Scale 105%, Drop shadow, Overlay visible	300ms ease-out
Icon Button	Black bg, White border	White bg, Black text	200ms ease-out
Text Button	Transparent bg, White text	White bg, Black text	200ms ease-out
Language Toggle	60% opacity inactive	100% opacity, Subtle bg	200ms

✅ Phase 6.2.2 Complete

Film Tile Component

✓ 3:2 aspect ratio (as specified)
✓ Borderless design
✓ 105% scale on hover with smooth transition
✓ Z-index lift for layered effect
✓ Drop shadow on hover
✓ Title and year overlay appear on hover
✓ Optional category badge
✓ Accessible with proper ARIA labels

Button Components

✓ Icon-driven design
✓ Monochrome color scheme
✓ Multiple sizes (sm, md, lg)
✓ Invert colors on hover (black → white)
✓ Focus states with ring indicator
✓ Accessible labels and titles

Language Toggle

✓ Standard and compact variants
✓ Clear active state indication
✓ Smooth hover transitions
✓ ARIA labels for accessibility
✓ Current page context support

Component Files:


        src/_includes/macros/filmTile.njk
        src/_includes/macros/buttons.njk
        src/_includes/macros/languageToggle.njk
        src/css/main.css (component styles)