Skip to content
Port60 Developers

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
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 Form
map ✅ available Impact map
volunteer_signup 🚧 planned Volunteer sign-up
primary_action_widget ✅ available Primary action widget

donation_widget

Section titled “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

Section titled “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

course_enrol

Section titled “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

Section titled “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

Section titled “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

Section titled “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
Section titled “hero_carousel”

Hero image carousel, available now

Photo-only rotation for homeHero.images (2+): advances every ~6s, pauses on hover and offers persistent Pause/Resume. Keyboard navigation or focus outside that button stops rotation until explicitly resumed. Reduced motion prevents autoplay, including after a live preference change. Supports horizontal touch swipe and direction-aware arrow keys, Home/End, plus optional dot navigation. Templates may hide dots when the .hero-playback control exists. They may reveal playback on photograph hover and keyboard focus, but must retain keyboard reachability, a visible focus indicator and a control that is available without hover on touch devices. This is separate from campaign/content carousels. The platform owns motion; the template styles the frame and the empty .hero-slide-scrim tonal layer using its palette. Fewer than 2 images render nothing: the template owns single/no-image states.

{% 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
  • .hero-playback

newsletter_signup

Section titled “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

Section titled “language_switch”

Language switch, available now

Temporarily inactive: currently renders nothing. Localisation supports a site’s language and text direction; translated tenant content and an explicit per-site language choice need a separate opt-in design. The host supplies locale and direction independently. Do not add a replacement visitor selector.

{% 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
Section titled “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

Section titled “form”

Form, available now

The form instance the placing form section names (its formSlug): respondent name and email, the form’s questions, privacy acceptance and submit, with Turnstile and the i18n error contract. Renders nothing without a placement. The platform owns the questions, validation and the response; the template owns placement and documented styling. 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):

  • .p60-form
  • .p60-form--embedded
  • .p60-form-intro
  • .p60-form-respondent
  • .p60-form-field
  • .p60-form-label
  • .p60-form-req
  • .p60-form-control
  • .p60-form-help
  • .p60-form-note
  • .p60-form-error
  • .p60-form-alert
  • .p60-form-heading
  • .p60-form-check
  • .p60-form-check-help
  • .p60-form-checklist
  • .p60-form-radios

map

Section titled “map”

Impact map, available now

The selected map instance, including its own points and resolved public parent content. The platform owns interaction, eligibility and tiles; the template owns placement and documented styling.

{% 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

Section titled “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

Section titled “primary_action_widget”

Primary action widget, available now

The platform-owned action widget selected by site.actions.widget: donate, volunteer or none. Templates place this island and style its documented classes; they never reverse the organisation’s action choice.

{% 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