NFB Balmoral

This site uses Just the Docs, a documentation theme for Jekyll.

Search

Cards & vignettes

WIP

Please see working versions on nfb.ca (authorization requierd)

  1. Vignettes
    1. Types
      1. Film for sale
      2. Modifiers
    2. Horizontal Formats
    3. Playlist
    4. User’s medias / Complex vignettes

Vignettes

...
Vignette gratuite avec un texte de titre vraiment beaucoup trop long pour tester qu'il est bien tronqué campus
Claude Cloutier
2010 | 5 min 
<div class="m-carousel-thumbnails">
<div class="vignetteGratuite vignette">
  <a href="#" class="containerScreenshot">
    <img src="cover.jpg" class="img-responsive" alt="...">
  </a>
  <div class="bottomThumbnail">
    <!-- Object Title -->
    <a href="#" class="titre">Object Title</a>
    <!-- Object Status / Type -->
    <span class="filmRestriction">
      <i class="icon-cash-o"></i>
      <span class="campus-label">label</span>
    </span>
    <!-- Object Details -->
    <div class="infosSecondaires">
      <div class="creator"><a href="#">Object Creator</a></div>
      2010 <span class="dash">|</span> 5 min
    </div>
  </div>
</div>
</div>

todo:

need to rename top wrapper (m-carousel-thumbnails) so that the card can be used in other context (maybe a size class…)

Types

Diffrent types of media can be displayed as cards. Using .application or .interactif on the .vignette wrapper will change the CTA icon that appears on roll over.

 <div class="vignetteGratuite vignette interactif">
  [...]
</div>

Film for sale

todo fix this, image need to stretch

Modifiers

 <div class="vignetteGratuite vignette not-available">
  [...]
</div>
class result
.not-available Card is greyed out, overlay still visible
.no-play CTA icon overlay disabled
.no-click Link deactivated, no “click” cursor

These class can be combine to create the desired effect.

Horizontal Formats

<div class="m-carousel-thumbnails thumbnail-horizontal">
 <div class="vignette">
  [...]
 </div>
</div>
En dernier recours
En dernier recours
Jacques Godbout
1987 | 71 min

Playlist

  • Exemple vignette playlist curateur
    The Pan American and Parapan American Games are the world’s third largest international multi-sport event and one of the most important summer sport competitions in the Americas. They are held every four years for athletes residing in the...
  • La tranchée
    The Pan American and Parapan American Games are the world’s third largest international multi-sport event and one of the most important summer sport competitions in the Americas. They are held every four years for athletes residing in the...
  • La tranchée
    1 film

User’s medias / Complex vignettes


<div class="vignetteLesson vignette">
  <!-- Main Visual -->
  <a href="#" class="containerScreenshot">
    <img src="main_visual.jpg" class="img-responsive" alt="object_title">
  </a>
  <div class="bottomThumbnail">
    <!-- Object Title -->
    <a href="#" class="titre">Vignette - variante</a>
    <!-- Object Status -->
    <span class="filmRestriction">
      <i class="icon-eye"></i> public
    </span>
    <!-- Object Details -->
    <div class="infosSecondaires  titreDotDotDot" style="overflow-wrap: break-word;">
      <span class="creator"><a href="#">Bill Gastro</a></span>
      2017
    </div>
    <!-- Tools -->
    <div class="dropdown more-menu bottomRight">
      <a data-target="#" class="tool" data-original-title="more options" data-placement="left" data-toggle="dropdown" role="button"><i class="icon-more-menu-vert"></i></a>
      <ul class="dropdown-menu">
        <li><a href="#" class="btn btn-link" data-original-title="edit"><i class="icon-edit-o"></i> edit</a></li>
        <li><form action="#" method="post">
          <button type="submit" class="btn btn-link disable" data-original-title="share lesson" id="submit" name="share"><i class="icon-share-lesson"></i> Share</button>
        </form></li>
        <li><form action="#" method="post"><button type="submit" class="btn btn-link disable" id="submit" name="duplicate"><i class="icon-duplicate-lesson"></i> duplicate</button></form></li>
        <form action="#" method="post">
          <button type="submit" class="btn btn-link" id="submit" name="unpublish"><i class="icon-eye-blocked"></i> unpublish</button>
        </form>
      <li><a href="#" class="btn btn-link disable"> <i class="icon-delete-o"></i> delete</a> </li>
    </ul>
  </div>
  </div>
</div>