Island registry

The platform’s functional islands, the app-block table. A template PLACES an island with {% island ‘name’ %}; the platform renders, hydrates, upgrades and patches it. The stylingApi lists the STABLE class names a template may target with CSS; anything not listed is internal and may change without notice.

Island	Status	Label
`donation_widget`	✅ available	Donation widget
`member_menu`	✅ available	Port60 ID sign-in / account menu
`events_carousel`	✅ available	Events carousel
`whats_on_strip`	✅ available	What’s-on strip
`latest_articles`	✅ available	Latest articles
`course_enrol`	✅ available	Course enrolment widget
`next_prayer`	✅ available	Next worship time
`article_engagement`	✅ available	Article engagement
`article_comments`	✅ available	Article comments
`hero_carousel`	✅ available	Hero image carousel
`newsletter_signup`	✅ available	Newsletter sign-up
`language_switch`	✅ available	Language switch
`search`	✅ available	Site search
`form`	✅ available	Public form
`map`	✅ available	Impact map
`volunteer_signup`	🚧 planned	Volunteer sign-up
`primary_action_widget`	✅ available	Primary action widget

`donation_widget`

Donation widget, available now

The full donation flow for the tenant’s quick-give cause: suggested amounts, custom amount, donor details, Gift Aid opt-in, payment. All payment/compliance behaviour is platform-owned.

{% island 'donation_widget' %}

Styling API, the stable class names your theme.css may target (anything else is internal and may change without notice):

.action-card
.donate-card
.donate-head
.donate-sub
.freq-tabs
.freq-tab
.amount-grid
.amount-option
.amount-list
.amount-row
.giftaid-box
.donate-submit
.donate-note
.donate-success

`member_menu`

Port60 ID sign-in / account menu, available now

The branded Port60 ID entry point: the sign-in button (popup flow) for guests, the account pill (Members area / Sign out) for signed-in members. Renders NOTHING when the tenant doesn’t allow member sign-ups. The identity brand and popup behaviour are platform-owned and identical across every template, place it in your header’s nav; never rebuild it.

{% island 'member_menu' %}

Styling API, the stable class names your theme.css may target (anything else is internal and may change without notice):

.nav-p60-signin
.nav-account
.nav-account-toggle
.nav-account-menu
.p60-mark
.nav-p60-signin-label
.nav-account-name
.nav-account-caret
.nav-account-icon

`events_carousel`

Events carousel, available now

The rotating showcase of published ticketed events. Renders nothing when the tenant has no matching published content.

{% island 'events_carousel' %}

Styling API, the stable class names your theme.css may target (anything else is internal and may change without notice):

.events-carousel
.carousel-slide
.carousel-caption
.carousel-dots
.carousel-dot

`whats_on_strip`

What’s-on strip, available now

The slim banner of upcoming info events. Renders nothing when the tenant has no matching published content.

{% island 'whats_on_strip' %}

Styling API, the stable class names your theme.css may target (anything else is internal and may change without notice):

.info-events-bar
.info-events-inner
.info-event-chip

`latest_articles`

Latest articles, available now

A strip of the most recent published articles. Renders nothing when the tenant has no matching published content.

{% island 'latest_articles' %}

Styling API, the stable class names your theme.css may target (anything else is internal and may change without notice):

.article-grid
.article-card
.article-card-body
.article-strip-cta

`course_enrol`

Course enrolment widget, available now

The member-gated course enrolment journey (schedule options, household picker, payment, seat holds) for the course the page addresses. Only meaningful on the course page template (pages/course.liquid), place it where your layout wants the purchase column (left rail, right rail, or below the content); position in your source is position on the page. Everything inside is platform-owned; it renders a standard sold-out note when no places remain (branch on course.soldOut if you want your own tag elsewhere).

{% island 'course_enrol' %}

Styling API, the stable class names your theme.css may target (anything else is internal and may change without notice):

.course-enrol
.course-variant-list
.course-subject-list
.course-summary
.course-pay-panel
.course-soldout-note

`next_prayer`

Next worship time, available now

A live countdown to worship.next for the tenant’s schedule. Renders nothing when no next time is available. The platform owns the clock; the template owns presentation through the stable classes.

{% island 'next_prayer' %}

Styling API, the stable class names your theme.css may target (anything else is internal and may change without notice):

.next-prayer
.next-prayer-label
.next-prayer-name
.next-prayer-time
.next-prayer-countdown

`article_engagement`

Article engagement, available now

The platform-owned article views, likes and sharing bar for the article page being rendered.

{% island 'article_engagement' %}

Styling API, the stable class names your theme.css may target (anything else is internal and may change without notice):

.article-engage
.article-views
.article-share-group
.article-share-btn
.article-share-word
.article-share-copied

`article_comments`

Article comments, available now

The identity-aware article conversation for the article page being rendered. Renders the closed state when comments are disabled.

{% island 'article_comments' %}

Styling API, the stable class names your theme.css may target (anything else is internal and may change without notice):

.article-comments
.article-comment-list
.article-comment
.article-comment-head
.article-comment-form
.article-comments-gate
.article-comments-note

`hero_carousel`

Hero image carousel, available now

Rotation for the home hero’s photographs (homeHero.images, 2+): auto-advance every ~6s, pauses on hover/focus, honours prefers-reduced-motion (no auto-advance), swipe on touch, dot navigation. The platform owns the motion; the TEMPLATE owns the look, including the tonal treatment: every slide ships an empty .hero-slide-scrim layer over its image, and the template colours it from its OWN palette variables (a colour wash, a blend, a gradient) so any uploaded photo sits inside the template’s tones. Renders nothing with fewer than 2 images, single-image and no-image states are the template’s own renderer, not this island’s.

{% island 'hero_carousel' %}

Styling API, the stable class names your theme.css may target (anything else is internal and may change without notice):

.hero-carousel
.hero-slides
.hero-slide
.hero-slide--active
.hero-slide-img
.hero-slide-scrim
.hero-dots
.hero-dot
.hero-dot--active

`newsletter_signup`

Newsletter sign-up, available now

Explicit email opt-in over the platform’s versioned consent and one-click unsubscribe rail. Templates own placement and presentation; wording, evidence and abuse checks remain platform-owned.

{% island 'newsletter_signup' %}

Styling API, the stable class names your theme.css may target (anything else is internal and may change without notice):

.newsletter-signup
.newsletter-label
.newsletter-fields
.newsletter-email
.newsletter-submit
.newsletter-consent
.newsletter-message

`language_switch`

Language switch, available now

Switches between the platform’s supported public languages while preserving the current route. The host supplies locale and text direction to Liquid and the document element.

{% island 'language_switch' %}

Styling API, the stable class names your theme.css may target (anything else is internal and may change without notice):

.language-switch
.language-switch-label
.language-switch-select

`search`

Site search, available now

The site’s search box: a typeahead over the platform’s search index (articles, events, services, campaigns, appeals, volunteering and public documents; published and live rows only, never member, payment, private media or admin data). Suggestions are the things themselves, grouped by kind, each a direct link, with a matched-text line when the hit was in the body; Enter or the last row goes to the platform’s /search results page. An accessible combobox: the active suggestion carries is-active. Where the box sits is the template’s decision.

{% island 'search' %}

Styling API, the stable class names your theme.css may target (anything else is internal and may change without notice):

.site-search
.site-search-form
.site-search-label
.site-search-fields
.site-search-input
.site-search-submit
.site-search-results
.site-search-result
.site-search-kind
.site-search-link
.site-search-summary
.site-search-empty
.site-search-title
.site-search-context
.site-search-more
.site-search-corrected

`form`

Public form, available now

Renders the tenant’s first published platform form and records its submission with explicit privacy acceptance. Templates cannot handle or redirect submissions themselves.

{% island 'form' %}

Styling API, the stable class names your theme.css may target (anything else is internal and may change without notice):

.public-form
.public-form-head
.public-form-field
.public-form-check
.public-form-privacy
.public-form-submit
.public-form-message

`map`

Impact map, available now

The tenant’s published impact map: a themed, privacy-clean map (platform-served tiles, never a third-party tile CDN) whose points open cards derived from the content they link. The island derives its colours from the template’s tokens; v1 renders the tenant’s first published map.

{% island 'map' %}

Styling API, the stable class names your theme.css may target (anything else is internal and may change without notice):

.impact-map
.impact-map-head
.impact-map-intro
.impact-map-canvas
.impact-map-pin
.impact-map-pin--active
.impact-map-card
.impact-map-card-kind
.impact-map-card-title
.impact-map-card-summary
.impact-map-card-cta
.impact-map-empty

`volunteer_signup`

Volunteer sign-up, planned (declaring it today is a validator warning, placing it renders nothing)

The volunteer sign-up flow: what to help with (general, then the events and campaigns that need people), when (only when the opportunity runs in shifts), a few details, then confirmation by a charity-branded email that also signs the volunteer in. Shares the donation widget’s card vocabulary so a themed donate card themes this too; the vol-* classes cover what is specific to asking for help.

{% island 'volunteer_signup' %}

Styling API, the stable class names your theme.css may target (anything else is internal and may change without notice):

.donate-card
.action-card
.vol-body
.volunteer-card
.vol-card
.vol-chosen
.vol-search
.vol-list
.vol-group
.vol-group-label
.vol-option
.vol-option-main
.vol-option-summary
.vol-option-meta
.vol-needed
.vol-shift-count
.vol-form
.vol-availability
.vol-chips
.vol-chip
.vol-confirm
.vol-optional
.vol-why
.vol-extra
.vol-summary
.vol-signed-in
.vol-summary-needed
.vol-field-error

`primary_action_widget`

Primary action widget, available now

The widget that leads the site. It IS the donation widget when the charity chose giving to lead, the volunteer sign-up when volunteering leads, and nothing when the charity chose no widget in the hero; site.focus tells you which (‘donate’, ‘volunteer’ or ‘none’). Place {% island ‘primary_action_widget’ %} in the home hero’s widget slot INSTEAD of donation_widget whenever your template declares supports.focus: the platform decides which widget renders, the template never does, and the charity’s switch moves it without a template change. Both widgets wear .action-card for shared treatment; .donate-card and .volunteer-card carry kind-specific styling. A template that wants a different layout per kind may branch on section.primary.kind and place donation_widget or volunteer_signup itself, but then it owns the switch.

{% island 'primary_action_widget' %}

Styling API, the stable class names your theme.css may target (anything else is internal and may change without notice):

.action-card
.donate-card
.volunteer-card