Authentic Client UI Components

Parish UI Sections Design System

Interactive, pixel-perfect development of the 7 parish sections requested by the client: Photo Gallery, Nearby Churches in Colombo 02, At a Glance, Today at the Church, Weekly Devotions, Location, and Friday Novena and Mass.

Filter:
Section 1 • Liturgical Schedule UI

Friday Novena and Mass

Interactive Feature: Filter masses below by language (English, Sinhala, Tamil, Benediction) or see the live NEXT MASS badge indicator!
Filter by Language:
Friday Novena Crucifix and Candles
Friday Novena and Mass
6.30 a.m.–Sinhala & Tamil
7.30 a.m.–English
8.30 a.m.–English
9.30 a.m.–Sinhala
10.30 a.m.–Tamil
11.30 a.m.–English
12.30 p.m.–English
4.30 p.m.–Benediction
5.30 p.m.–English
6.30 p.m.–English
7.30 p.m.–English
Section 2 • Parish Snapshot UI

At a Glance

Interactive Features: Click address to copy, click phone to call, click statue photo to view high-res in Lightbox, plus real-time operating status pill!

At a Glance

55, Justice Akbar Mawatha,
Slave Island, Colombo 02, Sri Lanka
The Golden Shrine of the Infant Jesus (Catholic Shrine)
Archdiocese of Colombo
Visitor Hours: 6:00 AM – 8:30 PM Open Now
Statue of Infant Jesus of Prague
Section 3 • Daily Liturgy Card UI

Today at the Church

Interactive Feature: Test any day of the week to see the live liturgical schedule adapt dynamically!

Today at the Church

Please check the Mass Times section for today's schedule.

Section 4 • Devotions Card UI

Weekly Devotions

Devotion Schedule: Wednesday Perpetual Help Novena & Friday All-Day Masses with calendar reminder integration.

Weekly Devotions

Our Lady of Perpetual Help Icon
Wednesday 5.30 p.m.

Holy Rosary followed by Our Lady of Perpetual Help Novena & Mass (Sinhala & Tamil)

Friday Novena Candles
Friday

Novena and Mass throughout the day (See full schedule on the left)

Section 5 • Map & Navigation UI

Location

Interactive Navigation: Slave Island map crop with one-click direct Google Maps navigation link.

Nearby Churches in Colombo 02

St. Peter's Church Colombo 04

St. Peter's Church

Colombo 04
2.1 km
View Church
St. Lucia's Cathedral Colombo 02

St. Lucia's Cathedral

Colombo 02
2.3 km
View Church
St. Joseph's Church Slave Island

St. Joseph's Church

Slave Island
1.5 km
View Church
All Saints' Church Colombo 02

All Saints' Church

Colombo 02
2.8 km
View Church