5. Custom render

When variables aren't enough, build the card yourself. You get the data; you return the markup.

Your own card

Pass a render function. It receives the extracted data — title, description, image, favicon, url — and the link element. Return an HTML string and vexy-hrefc drops it into the popup.

Hrefc({
  render: function (data) {
    var host = data.url;
    try { host = new URL(data.url).hostname.replace(/^www\./, ''); } catch (e) {}
    return (
      '<div style="max-width:280px">' +
        '<div style="font-weight:600;margin-bottom:2px">' + data.title + '</div>' +
        '<div style="font-size:12px;opacity:.7">' + host + ' →</div>' +
      '</div>'
    );
  },
});

Hover templating for the compact card.

Or the DOM on MDN.

Or Node.js.

A string sets innerHTML

title and description come from the target page, so a returned string is trusted as-is. Escape anything you don't control, or return a real DOM Node instead and skip innerHTML altogether:

Hrefc({
  render: function (data) {
    var el = document.createElement('div');
    el.textContent = data.title; // text, never parsed as HTML
    return el;
  },
});