Styling

Tidbits render as neutral <p> elements. Attributions render as <span> elements. By default, the package injects a minimal built-in stylesheet. Disable these styles when using your own CSS:

renderRandomTidbit({
  target: '#tidbit',
  tidbits,
  useDefaultStyles: false,
});

Generated classes:

random-tidbit
random-tidbit__text
random-tidbit__attribution

Preventing Layout Shifts

Use CSS loaded with your page like this one or similar to reserve space for the target:

#tidbit {
  min-block-size: 3lh;
}

@media (max-width: 40rem) {
  #tidbit {
    min-block-size: 5lh;
  }
}