coveo-search-ui/templates/YouTube/CardYouTubePlaylist.html

Coveo JavaScript Search Framework

<div class="coveo-result-frame" style="padding: 0">
  <div class="CoveoBackdrop coveo-result-row" data-image-field="@ytthumbnailurl" data-overlay-color="rgb(38, 62, 85)" data-overlay-gradient="true">
    <div style="padding: 20px">
      <div class="coveo-result-row" style="margin-bottom: 15px">
        <div class="coveo-result-cell" style="width: 32px; flex-grow:0">
          <span class="CoveoIcon" data-small="true" data-with-label="false"></span>
        </div>
        <div class="coveo-result-cell" style="padding-left: 10px; " role="heading" aria-level="2">
          <span class="CoveoResultLink" style="color: white"></span>
        </div>
      </div>
      <div class="coveo-result-row" style="margin-bottom: 20px">
        <div class="coveo-result-cell" style="padding-top:5px; padding-bottom:5px">
          <div class="CoveoExcerpt" style="color: white;"></div>
        </div>
      </div>
    </div>
    <div class="coveo-result-row" style="display: flex; justify-content: space-between; margin: 0; color: white;">
      <div class="coveo-result-cell" style="background-color: rgba(255, 255, 255, 0.8); padding: 10px 20px 10px 10px; display: inline-block;">
        <span class="CoveoFieldValue" data-field="@filetype"></span>
      </div>
      <div class="coveo-result-cell" style="background-color: rgba(38, 62, 85, 0.8); padding: 10px 10px 10px 20px; display: inline-block;">
        <span class="CoveoFieldValue" data-field="@ytitemcount" data-helper="number" data-helper-options-format="n"></span>
        <span class="CoveoText" data-value="Videos"></span>
      </div>
    </div>
  </div>

  <div class="coveo-result-row" style="padding: 20px">
    <div class="coveo-result-cell">
      <div class="CoveoText" data-value="Date" data-weight="bold" style="margin-bottom: .5em"></div>
      <div class="CoveoFieldValue" data-field="@date" data-helper="emailDateTime" data-helper-options-always-include-time="true"></div>
    </div>
  </div>
  <div class="coveo-result-row">
    <div class="coveo-result-cell">
      <div class="CoveoMissingTerms"></div>
    </div>
  </div>
  <div class="CoveoCardActionBar" style="margin: auto 0 0 0">
    <div class="CoveoCardOverlay" data-title="Show Playlist" data-icon="video">
      <span class="CoveoResultFolding" data-result-template-id="CardYouTubePlaylistItem"></span>
    </div>
    <div class="CoveoCardOverlay" data-title="Details" data-icon="search">
      <table class="CoveoFieldTable" data-allow-minimization="false">
        <tbody>
          <tr data-field="@author" data-caption="Author">
          </tr>
          <tr data-field="@source" data-caption="Source">
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>