Mālama Hawaiʻi embed
A ready-to-paste embed of the Mālama Hawaiʻi volunteer listings, pre-styled to match hta.kanuhawaii.org: Lora throughout, the teal date chip, the island colour band, and a two-up grid. Every value was read off the live site rather than eyeballed, so it lands looking like the page it replaces.
It shows only organizations certified for Mālama Hawaiʻi, and visitors can sign up without leaving the page.
What changes for your visitors
- No more scrollbar inside a box. The listings become part of the page instead of a fixed-height frame, so the page scrolls once.
- Sign-up happens on your site. Choosing a date, confirming an age minimum, acknowledging requirements and answering an organization’s questions all happen in place. No hand-off, no account needed.
- Your fonts and colours. They are in the snippet below.
- All of it, counted. The listing says how many opportunities are coming up in the next six months, and Load more keeps going without leaving the page.
- Every date its own card. A weekly cleanup shows up on each Saturday it meets, soonest first, and opening a card picks that date in the sign-up form.
- Certification at a glance. Every card from a certified organization carries a Mālama Hawaiʻi certified badge under its description. Hovering it explains what Mālama Hawaiʻi is and what certification means.
- Search and dates side by side. The search box and the date picker share one row, so the listings start higher up the page.
- One-off events first. On any day, an opportunity that happens once is listed before ones that meet every day, and an ongoing opportunity fills every fifth card when visitors include them.
- The organization, too. Each opportunity has an Organization tab: who they are, what they do, and their website.
- Real links. Search engines and screen readers see the opportunities as page content, which a frame hides.
How to install
Delete the old block
Edit the Mālama Hawaiʻi page and delete the block holding the current <iframe>.
Add a Custom HTML block
In its place, paste the code below exactly as it is.
Your embed code
One block: the styling, the container and the script. The key is Supabase's public key, safe in page source, and row-level security decides what it can read.
<!-- Mālama Hawaiʻi volunteer opportunities, powered by Kanu Hawaii -->
<style>
/* Mālama Hawaiʻi — Kanu embed styling
Matches hta.kanuhawaii.org: Lora serif throughout, #00688c primary,
and the island colour band. Lora already loads with your theme. */
.kanu-widget-root.kanu-widget-root {
font-family: Lora, serif;
font-size: 18px;
line-height: 1.78;
color: #808080;
}
/* Only the gap is set here, deliberately.
Their site pins two columns, but that was a constraint of the old layout: the
listing sat in an iframe with a filter sidebar beside it. Embedded in the page
there is full width to use, so the widget's own responsive steps apply — one
column on a phone, two on a tablet, three on a desktop. Pinning two would also
outrank those breakpoints and leave a phone showing two ~143px columns under
24px serif headings. */
.kanu-widget-root .kanu-w-grid {
gap: 30px;
}
.kanu-widget-root .kanu-w-card {
border: 0;
border-bottom: 10px solid #ededed;
border-radius: 0;
/* Extra room on top so the date chip can overhang the image, as it does on
hta.kanuhawaii.org (their .teaser-date-box sits at top: -30px). Reserving it
on the card keeps the chip inside the card box, so it cannot collide with
the row above. */
padding: 39px 9px 9px;
transition: border-color 0.2s;
}
.kanu-widget-root .kanu-w-card:hover {
transform: none;
box-shadow: none;
border-bottom-color: #00688c;
}
.kanu-widget-root .kanu-w-card-img {
height: 220px;
/* Unclipped so the date chip can hang over the top edge. The image itself
still fills exactly (100% + object-fit: cover), so nothing else escapes. */
overflow: visible;
}
/* Date chip: teal square clipping the top-left corner of the image, half above
it and half over it, matching their .teaser-date-box */
.kanu-widget-root .kanu-w-dates {
top: -30px;
/* Negative, so the chip hangs off the image's left edge as well as its top.
The card reserves 9px of side padding, so -10px clears it by a hair and the
chip sits flush to the card edge rather than inset from the image. */
left: -10px;
z-index: 2;
}
.kanu-widget-root .kanu-w-date {
width: 60px;
min-width: 60px;
height: 60px;
justify-content: center;
padding: 4px;
border-radius: 0;
background: #00688c;
color: #fff;
backdrop-filter: none;
}
.kanu-widget-root .kanu-w-date-month {
font-size: 10px;
color: #fff;
text-transform: uppercase;
}
.kanu-widget-root .kanu-w-date-day {
font-size: 26px;
font-weight: 700;
color: #fff;
}
.kanu-widget-root .kanu-w-date-year {
font-size: 10px;
color: #fff;
}
/* The word-label chip ("OPEN", "RECURRING") rather than a date.
Sized to the longest label we render: at 11px Lora, "RECURRING" measures 64px
inside a 60px square and spilled out of it (Lora runs wider than the Cabin
this theme used to set). Kept as one line — "RECURRING" is a single word, so
wrapping it would need a mid-word break. overflow-wrap is the backstop if a
longer label is ever added. */
.kanu-widget-root .kanu-w-date--open {
padding: 0 2px;
font-size: 9px;
font-style: italic;
letter-spacing: 0;
line-height: 1.2;
overflow-wrap: anywhere;
color: #fff;
}
/* A one-time opportunity whose date has passed. Muted rather than teal so it
does not read as an active listing; their theme greys its .ended state too. */
.kanu-widget-root .kanu-w-date--ended {
background: #808080;
}
.kanu-widget-root .kanu-w-date--mini {
opacity: 1;
width: 44px;
min-width: 44px;
height: 44px;
background: #00adef;
}
/* Island band: full width across the bottom of the image, one colour each */
.kanu-widget-root .kanu-w-islands {
top: auto;
bottom: 0;
left: 0;
right: 0;
display: block;
}
.kanu-widget-root .kanu-w-island {
display: block;
width: 100%;
/* Their .fwpl-item.el-opp-island is padding: 0 9px — the band's height comes
from the line box, not padding: body type at 18px/1.78 gives a ~32px band.
Ours was 14px with 4px padding, which read as a thin strip by comparison. */
padding: 0 9px;
border-radius: 0;
font-family: Lora, serif;
font-size: 18px;
line-height: 1.78;
font-weight: 400;
letter-spacing: 0.04em;
text-align: center;
text-transform: uppercase;
background: #808080;
}
.kanu-widget-root .kanu-w-island-icon {
display: none;
}
.kanu-widget-root .kanu-w-island--oahu { background: #FFCD00; }
.kanu-widget-root .kanu-w-island--maui { background: #EF4A81; }
.kanu-widget-root .kanu-w-island--kauai { background: #5C068C; }
.kanu-widget-root .kanu-w-island--hawaii { background: #C8102E; }
.kanu-widget-root .kanu-w-island--molokai { background: #046A38; }
.kanu-widget-root .kanu-w-island--lanai { background: #ED8B00; }
.kanu-widget-root .kanu-w-island--remote { background: #808080; }
/* Title, organization, description */
.kanu-widget-root .kanu-w-card-title {
font-family: Lora, serif;
font-size: 24px;
font-weight: 700;
line-height: 1.3;
color: #333333;
max-height: none;
-webkit-line-clamp: 3;
}
.kanu-widget-root .kanu-w-org-logo {
display: none;
}
.kanu-widget-root .kanu-w-card-org {
font-family: Lora, serif;
font-size: 15px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.02em;
color: #808080;
}
.kanu-widget-root .kanu-w-card-desc {
/* Stated rather than inherited: the description is the body text a reader
actually spends time in, so it should not silently follow a host page that
restyles the root. */
font-family: Lora, serif;
font-size: 16px;
line-height: 1.6;
color: #808080;
}
/* The Mālama Hawaiʻi tooltip, squared off and serif like the rest. */
.kanu-widget-root .kanu-w-tip {
border-radius: 0;
font-family: Lora, serif;
font-size: 13px;
}
/* The count line, in the same quiet grey as their filter labels. */
.kanu-widget-root .kanu-w-count {
font-family: Lora, serif;
font-size: 14px;
color: #808080;
}
.kanu-widget-root .kanu-w-count b {
font-size: 16px;
color: #333333;
}
/* Search placeholder reads like their SEARCH field: small caps, tracked. */
.kanu-widget-root .kanu-w-search input::placeholder {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #8a94a8;
}
/* One colour for every tag */
.kanu-widget-root .kanu-w-tag {
border-radius: 0;
font-size: 11px;
letter-spacing: 0.04em;
color: #00688c;
background: #e6f0f4;
}
/* Certification badge: solid HTA blue so it reads as the one thing that is not
a tag, but squared off and tracked like them. */
.kanu-widget-root .kanu-w-malama-badge {
gap: 6px;
margin: 12px 0 12px;
padding: 5px 10px;
border: 0;
border-radius: 0;
background: #00688c;
color: #ffffff;
font-family: Lora, serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
}
/* No tick: the label already says certified, and the tick is what pushes it onto
a second line in a narrow card. */
.kanu-widget-root .kanu-w-malama-badge::before {
display: none;
}
/* Search and date picker share one row; the row carries the spacing. */
.kanu-widget-root .kanu-w-toolbar {
margin-bottom: 20px;
}
/* Date picker, squared off and serif like the rest, in the HTA teal. */
.kanu-widget-root .kanu-w-dp-trigger,
.kanu-widget-root .kanu-w-dp-pop,
.kanu-widget-root .kanu-w-dp-preset,
.kanu-widget-root .kanu-w-dp-day {
border-radius: 0;
font-family: Lora, serif;
}
.kanu-widget-root .kanu-w-dp-trigger {
border-color: #d4d4d4;
color: #333333;
font-weight: 400;
}
.kanu-widget-root .kanu-w-dp-trigger svg,
.kanu-widget-root .kanu-w-dp-preset:hover {
color: #00688c;
}
.kanu-widget-root .kanu-w-dp-trigger:hover,
.kanu-widget-root .kanu-w-dp-trigger[aria-expanded="true"],
.kanu-widget-root .kanu-w-dp-preset:hover {
border-color: #00688c;
}
.kanu-widget-root .kanu-w-dp-preset--active,
.kanu-widget-root .kanu-w-dp-day.kanu-w-dp-day--start,
.kanu-widget-root .kanu-w-dp-day.kanu-w-dp-day--end {
background: #00688c;
border-color: #00688c;
color: #ffffff;
}
.kanu-widget-root .kanu-w-dp-day:hover:not(:disabled),
.kanu-widget-root .kanu-w-dp-day--in {
background: #e6f0f4;
}
.kanu-widget-root .kanu-w-dp-title {
font-family: Lora, serif;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Date-type toggles, serif and uppercase like their FacetWP checkboxes. */
.kanu-widget-root .kanu-w-datetypes {
gap: 24px;
margin-bottom: 20px;
}
.kanu-widget-root .kanu-w-datetype {
font-family: Lora, serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
color: #808080;
}
.kanu-widget-root .kanu-w-datetype input {
width: 14px;
height: 14px;
accent-color: #666666;
}
/* Island tabs across the top. Serif like everything else, with the active tab
underlined in their primary. Each tab also carries .kanu-w-island-tab--<slug>,
so the underline picks up that island's own colour and the tabs read as the
same set of colours as the bands on the cards. */
.kanu-widget-root .kanu-w-island-tabs {
gap: 0;
margin-bottom: 24px;
border-bottom: 1px solid #ededed;
}
.kanu-widget-root .kanu-w-island-tab {
padding: 9px 18px;
border-bottom-width: 4px;
font-family: Lora, serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #808080;
}
.kanu-widget-root .kanu-w-island-tab:hover {
color: #00688c;
}
.kanu-widget-root .kanu-w-island-tab--active {
color: #333333;
font-weight: 700;
border-bottom-color: #00688c;
}
.kanu-widget-root .kanu-w-island-tab:focus-visible {
outline: 2px solid #00688c;
outline-offset: -2px;
}
.kanu-widget-root .kanu-w-island-tab--oahu.kanu-w-island-tab--active { border-bottom-color: #FFCD00; }
.kanu-widget-root .kanu-w-island-tab--maui.kanu-w-island-tab--active { border-bottom-color: #EF4A81; }
.kanu-widget-root .kanu-w-island-tab--kauai.kanu-w-island-tab--active { border-bottom-color: #5C068C; }
.kanu-widget-root .kanu-w-island-tab--hawaii.kanu-w-island-tab--active { border-bottom-color: #C8102E; }
.kanu-widget-root .kanu-w-island-tab--molokai.kanu-w-island-tab--active { border-bottom-color: #046A38; }
.kanu-widget-root .kanu-w-island-tab--lanai.kanu-w-island-tab--active { border-bottom-color: #ED8B00; }
.kanu-widget-root .kanu-w-island-tab--remote.kanu-w-island-tab--active { border-bottom-color: #808080; }
/* Search and filters */
.kanu-widget-root .kanu-w-search input,
.kanu-widget-root .kanu-w-filter-select {
border-radius: 0;
border-color: #d4d4d4;
font-family: Lora, serif;
color: #333333;
}
.kanu-widget-root .kanu-w-search input:focus,
.kanu-widget-root .kanu-w-filter-select:focus {
border-color: #00688c;
box-shadow: none;
}
/* Buttons, links, states */
.kanu-widget-root .kanu-w-btn {
border-radius: 0;
background: #00688c;
font-family: Lora, serif;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.kanu-widget-root .kanu-w-btn:hover {
background: #00adef;
}
.kanu-widget-root .kanu-w-btn--secondary {
background: transparent;
border: 1px solid #00688c;
color: #00688c;
}
.kanu-widget-root .kanu-w-cta a {
color: #00688c;
}
.kanu-widget-root .kanu-w-spinner {
border-top-color: #00688c;
}
.kanu-widget-root .kanu-w-success-title {
font-family: Lora, serif;
color: #00688c;
}
/* Sign-up modal */
.kanu-widget-root .kanu-w-modal {
border-radius: 0;
}
.kanu-widget-root .kanu-w-modal-title {
font-family: Lora, serif;
color: #333333;
}
.kanu-widget-root .kanu-w-modal-org {
font-family: Lora, serif;
text-transform: uppercase;
color: #808080;
}
.kanu-widget-root .kanu-w-label {
font-family: Lora, serif;
color: #333333;
}
.kanu-widget-root .kanu-w-input,
.kanu-widget-root .kanu-w-textarea {
border-radius: 0;
font-family: Lora, serif;
}
.kanu-widget-root .kanu-w-input:focus,
.kanu-widget-root .kanu-w-textarea:focus {
border-color: #00688c;
}
.kanu-widget-root .kanu-w-checkbox input {
accent-color: #00688c;
}
</style>
<div
data-kanu-widget
data-supabase-url="https://qshvdtgsntfkeynqfceu.supabase.co"
data-supabase-key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InFzaHZkdGdzbnRma2V5bnFmY2V1Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODE3MzU1ODQsImV4cCI6MjA5NzMxMTU4NH0.OcH3FLoqjor5h_jXhP_wasezLEyB98ZOQifSCLwqytg"
data-base-url="https://needs.kanuhawaii.org"
data-malama-hawaii="true"
data-show-filters="true"
data-island-tabs="true"
data-date-type-filter="true"
data-date-filter="true"
data-more="load"
data-limit="36"
data-card-per-date="true"
data-show-count="true"
data-open-ended-every="5"
></div>
<script src="https://needs.kanuhawaii.org/widget/kanu-widget.js" defer></script>Save and view the page
Live preview
The real widget with the styling above applied. Open any opportunity to see the sign-up form your visitors get.
Loading preview…
Changing it
Want different filters, a different number of listings, or different colours? The styling and attribute reference has every option, and the builder will write a snippet for you.
Questions: info@kanuhawaii.org
Last updated on