Skip to content
Vuukle Docs

Customize recommendation card styles

The Newsfeed, Emote (after a reaction is selected), and Comments widgets show a row of article recommendations. You can override their look with a small CSS injection.

Where to put your CSS

Add a style tag anywhere on the page before cdn.vuukle.com/platform.js loads — or inject it via your CMS theme. Selectors target the Vuukle widget shadow boundaries.

<style>
  /* Wide vs square thumbnails */
  .vuukle-recommendation-card {
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }


  .vuukle-recommendation-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }


  .vuukle-recommendation-card .title {
    font-weight: 600;
    color: #1f2933;
  }
</style>

Wide vs square cards

Set the JS variable to switch between the wide and square layouts:

var VUUKLE_CONFIG = {
  recommendationsWideImages: true,  // wide cards
  // recommendationsWideImages: false, // square cards (default)
};
Was this page helpful?
Help us improve — drop a note or open the dashboard.
Email support Open dashboard ↗ Suggest an edit ↗