Height Harmony

import heightHarmony from 'height-harmony';

// Equalize heights of all matching elements
heightHarmony('.card');

// Returns an instance with refresh() and destroy()
const hh = heightHarmony('.feature-box');
hh.refresh();   // manually re-trigger
hh.destroy();   // remove observers & restore heights

import heightHarmony from 'height-harmony';

heightHarmony('.card', {
  // Debounce ResizeObserver callbacks (ms)
  debounce: 100,

  // Disable below 768px — let mobile stack naturally
  breakpoint: 768,

  // Use min-height so items can still grow taller
  minHeight: true,

  // Smooth CSS transition on height changes
  transitions: true,

  // Set false to disable auto-watching (manual only)
  watch: true
});

<!-- Mark groups with data-hh-group in your HTML -->
<div data-hh-group="cards">Card 1</div>
<div data-hh-group="cards">Card 2</div>
<div data-hh-group="cards">Card 3</div>

<!-- Multiple groups on the same page -->
<div data-hh-group="sidebar">Widget A</div>
<div data-hh-group="sidebar">Widget B</div>

/* Then auto-init all groups with one call */
import heightHarmony from 'height-harmony';
heightHarmony.autoInit();   // scans the whole document

<!-- UMD / script tag — exposes window.heightHarmony -->
<script src="https://unpkg.com/height-harmony@2/dist/height-harmony-min.js"></script>
<script>
  heightHarmony('.card');
</script>

<!-- ES Module via CDN -->
<script type="module">
  import heightHarmony from
    'https://unpkg.com/height-harmony@2/dist/height-harmony.es.js';
  heightHarmony('.card');
</script>