← all demos

2. Content toggles

Decide what goes on the card. The title always shows; everything else is a switch.

The defaults

Out of the box you get the title and a description. That's the card on the previous page.

Hrefc(); // title + description

Drop the description

Want just the title? Turn the description off. The card shrinks to a single line.

Hrefc({
  content: { description: false },
});

Add a favicon

Switch on favicon and the site's little icon sits before the title, so you can tell at a glance where the link goes.

<script src="https://cdn.jsdelivr.net/npm/vexy-hrefc/dist/hrefc.global.min.js"></script>

<script>
  Hrefc({
    content: { favicon: true }, // description stays on
  });
</script>

Hover the entry on the favicon and watch its own favicon turn up on the card.

Same on MDN's link element page.

And on this project.

Trim long descriptions

Descriptions get cut to descriptionMaxLength characters (350 by default) so a chatty meta tag can't grow the card forever. Lower it for terser cards.

Hrefc({
  content: { descriptionMaxLength: 140 },
});