Reference

Everything the widget accepts and everything it renders. The embed builder writes the attributes for you; this page is for when you want to hand-edit a snippet or restyle the result.

Data attributes

The order of the cards

The widget orders opportunities the way needs.kanuhawaii.org does:

• Soonest first. Dated opportunities are listed by the next day they meet.
• Rarer first within a day. On any one day, an opportunity that happens once comes before one that meets every week, and that comes before one that meets every day. A Saturday beach cleanup leads a daily food-bank shift on that Saturday, instead of being buried under it.
• Ongoing ones sprinkled in. Open-ended opportunities have no date to sort by, so every fifth card is one of them (change or turn this off with data-open-ended-every). Which ones come first changes once a day, so each gets its turn near the top.

Making it match your site

The widget uses class names prefixed kanu-w-, scoped under a .kanu-widget-root container. Override any of them by adding CSS after the widget script loads. All the class names below are stable and safe to target.

The widget injects its own styles as a <style id="kanu-widget-styles"> tag in the document head, so your site’s CSS naturally wins when it comes after. If you need to replace the defaults entirely, remove that element once the script has loaded.

CSS classes

Example: match your brand colours

/* Add this to your site, after the widget loads */
.kanu-widget-root {
  font-family: 'Your Brand Font', sans-serif;
}
 
/* The accent: search focus, active tab, CTA */
.kanu-w-search input:focus {
  border-color: #your-brand-color;
  box-shadow: 0 0 0 3px rgba(your-r, your-g, your-b, 0.1);
}
.kanu-w-tab--active {
  background: #your-brand-color;
  border-color: #your-brand-color;
}
.kanu-w-cta a {
  color: #your-brand-color;
}
 
/* The grid */
.kanu-w-grid {
  grid-template-columns: repeat(2, 1fr); /* always two columns */
  gap: 12px;
}
 
.kanu-w-card {
  border-radius: 8px;
}

Example: a dark background

.kanu-widget-root {
  color: #e0e0e0;
}
.kanu-w-card {
  background: #1e1e1e;
  border-color: #333;
}
.kanu-w-card-org {
  color: #aaa;
}
.kanu-w-card-desc {
  color: #ccc;
}
.kanu-w-search input {
  background: #2a2a2a;
  border-color: #444;
  color: #e0e0e0;
}
.kanu-w-tab {
  background: #2a2a2a;
  border-color: #444;
  color: #ccc;
}

Mālama Hawaiʻi is a complete worked example: a full theme measured off a live WordPress site, in one snippet.