Cards

Cards help bring hierarchy and visual consistency to the information displayed on a page, especially when the content is heterogenous. They are excellent ways to display rich media content like images or videos or to highlight action-required elements.

Example

Card image cap

Category | Date | Author

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Updated 17/04/2020
<div class="nj-card mb-3">
    <img class="nj-card__img" src="/assets/img/img-generic.jpg" alt="Card image cap"/>
    <div class="nj-card__body">
      <p class="nj-card__details">Category | Date | Author</p>
      <h4 class="nj-card__title">Card title</h4>
      <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

The vertical format

Card image cap

Category | Date | Author

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Updated 24/01/2017
Card image cap

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque autem, consequuntur dolorum eius, expedita illo minus molestias natus pariatur perferendis, sed tenetur! Cumque magnam qui quis, sequi similique suscipit voluptas.

#tag
#tag
#tag
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="nj-card mb-3">
        <img class="nj-card__img" src="/assets/img/img-generic.jpg" alt="Card image cap"/>
        <div class="nj-card__body">
          <p class="nj-card__details"><span class="text-blue-corporate">Category</span> | Date | Author</p>
          <h4 class="nj-card__title">Card title</h4>
          <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="nj-card nj-card--border mb-3">
        <img class="nj-card__img" src="/assets/img/img-generic.jpg" alt="Card image cap"/>
        <div class="nj-card__body">
          <h4 class="nj-card__title">Card title</h4>
          <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <div class="nj-card__date">Updated 24/01/2017</div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="nj-card mb-3">
        <img class="nj-card__img" src="/assets/img/img-generic.jpg" alt="Card image cap"/>
        <div class="nj-card__body">
          <h4 class="nj-card__title">Card title</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque autem, consequuntur dolorum eius,
            expedita illo minus molestias natus pariatur perferendis, sed tenetur! Cumque magnam qui quis, sequi
            similique suscipit voluptas.</p>
          <div class="mb-2">
            <div class="nj-tag nj-tag--blue-corporate"><span class="nj-tag__text">#tag</span></div>
            <div class="nj-tag nj-tag--green-java"><span class="nj-tag__text">#tag</span></div>
            <div class="nj-tag nj-tag--cerise"><span class="nj-tag__text">#tag</span></div>
          </div>
          <button class="nj-btn nj-btn--primary nj-btn--sm">Small button</button>
        </div>
      </div>
    </div>
  </div>
</div>

The horizontal format

Card image cap
tag
tag

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

15/04/2020
<div class="mb-4">
    <div class="nj-card nj-card--horizontal">
      <img class="nj-card__img" src="https://design.engie.com/assets/img/img-generic.jpg" alt="Card image cap"/>
      <div class="nj-card__body d-flex">
        <div class="mb-1">
          <div class="nj-tag nj-tag--filled-blue-corporate"><span class="nj-tag__text">tag</span></div>
          <div class="nj-tag nj-tag--filled-green-java"><span class="nj-tag__text">tag</span></div>
        </div>
        <h4 class="nj-card__subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
        <div class="nj-card__date">15/04/2020</div>
      </div>
    </div>
</div>
<div class="mb-4">
    <a href="#" class="nj-card nj-card--horizontal">
      <img class="nj-card__img" src="https://design.engie.com/assets/img/img-generic.jpg" alt="Card image cap"/>
      <div class="nj-card__body d-flex">
        <div class="mb-1">
          <div class="nj-tag nj-tag--filled-blue-corporate"><span class="nj-tag__text">tag</span></div>
          <div class="nj-tag nj-tag--filled-green-java"><span class="nj-tag__text">tag</span></div>
        </div>
        <h4 class="nj-card__subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
        <div class="nj-card__date">15/04/2020</div>
      </div>
    </a>
</div>

The cover format

Please do not exceed 135 characters for the description text.

<a href="#" class="nj-card nj-card--cover" style="background-image:url(https://assets.design.digital.engie.com/image/bg-harmonyproject.jpg);">
    <div class="nj-card__body">
        <div class="nj-card__overlay">
            <h4 class="nj-card__title">Villes et collectivités</h4>
            <i class="material-icons md--white">arrow_forward</i>
            <p class="nj-card__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        </div>
    </div>
</a>

Other format of cards

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Indicator
7,234,000
check_circle 1,6%
Indicator
7,234,000
change_history 1,6%
Woman

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

PRO
  • 20 users included
  • 10 of storage
  • Priority email support
  • Help center access
<div class="container">
  <div class="row">
  <div class="col-md-4">
        <div class="nj-card mb-3">
          <div class="nj-card__body">
            <h4 class="nj-card__title">Card title</h4>
            <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <button role="button" class="nj-btn nj-btn--primary nj-btn--sm">Button</button>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="nj-card mb-3">
          <div class="nj-card__body">
            <strong>Indicator</strong>
            <div class="nj-card__number mt-5 mb-1">7,234,000</div>
            <div class="nj-card__growth"><i class="material-icons md--green mr-1">check_circle</i> 1,6%</div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="nj-card bg-gradient-primary mb-3">
          <div class="nj-card__body text-on-gradient-primary">
            <strong>Indicator</strong>
            <div class="nj-card__number mt-5 mb-1">7,234,000</div>
            <div class="nj-card__growth"><i class="material-icons text-on-gradient-primary mr-1">change_history</i> 1,6%</div>
          </div>
        </div>
      </div>
    <div class="col-md-4">
      <div class="nj-card mb-3">
        <div class="nj-card__header">
          <div class="nj-avatar nj-avatar--lg">
            <div class="nj-avatar__picture"><img src="/assets/img/customer.svg" alt="Woman"></div>
          </div>
        </div>
        <div class="nj-card__body text-center">
          <h4 class="nj-card__title">Card title</h4>
          <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <button role="button" class="nj-btn nj-btn--primary nj-btn--sm">See profile</button>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="nj-card mb-3">
        <div class="nj-card__header">
          PRO
        </div>
        <div class="nj-card__body text-center">
          <div class="nj-card__price"></div>
          <ul class="list-unstyled">
            <li>20 users included</li>
            <li>10 of storage</li>
            <li>Priority email support</li>
            <li>Help center access</li>
          </ul>
          <button role="button" class="nj-btn nj-btn--primary d-block mx-auto mb-2">Sign for free</button>
        </div>
      </div>
    </div>
  </div>
</div>

Card decks

Need a set of equal width and height cards that aren’t attached to one another? Use card decks.

Card image cap

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="nj-card-deck">
  <div class="nj-card">
    <img class="nj-card__img" src="/assets/img/img-generic.jpg" alt="Card image cap">
    <div class="nj-card__body">
      <h4 class="nj-card__title">Card title</h4>
      <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="nj-card">
    <img class="nj-card__img" src="/assets/img/img-generic.jpg" alt="Card image cap">
    <div class="nj-card__body">
      <h4 class="nj-card__title">Card title</h4>
      <p>This card has supporting text below as a natural lead-in to additional content.</p>
      <p><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="nj-card">
    <img class="nj-card__img" src="/assets/img/img-generic.jpg" alt="Card image cap">
    <div class="nj-card__body">
      <h4 class="nj-card__title">Card title</h4>
      <p>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Card columns

Cards can be organized into Masonry-like columns with just CSS by wrapping them in .nj-card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right.

Card image cap

1 - Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

2 - Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

3 - Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card image cap

4 - Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque autem, consequuntur dolorum eius, expedita illo minus molestias natus pariatur perferendis, sed tenetur! Cumque magnam qui quis, sequi similique suscipit voluptas.

tag
tag
tag tag
Card image cap

5 - Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card image cap

5 Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

6 - Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card image cap

7 - Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque autem, consequuntur dolorum eius, expedita illo minus molestias natus pariatur perferendis, sed tenetur! Cumque magnam qui quis, sequi similique suscipit voluptas.

tag
tag
tag tag

8 - Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

9 - Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aspernatur dolorum earum harum, hic illum ipsa molestias nam odit quis quo quos repellat, repudiandae similique soluta veniam veritatis vero voluptatum!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aspernatur dolorum earum harum, hic illum ipsa molestias nam odit quis quo quos repellat, repudiandae similique soluta veniam veritatis vero voluptatum!

Card image cap

10 - Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque autem, consequuntur dolorum eius, expedita illo minus molestias natus pariatur perferendis.

tag
tag
tag tag
<div class="container">
  <div class="nj-card-columns">
    <div class="nj-card">
      <img class="nj-card__img" src="/assets/img/img-generic.jpg" alt="Card image cap"/>
      <div class="nj-card__body">
        <h4 class="nj-card__title">1 - Card title</h4>
        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    <div class="nj-card">
      <div class="nj-card__body">
        <h4 class="nj-card__title">2 - Card title</h4>
        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <button role="button" class="nj-btn nj-btn--primary nj-btn--sm">Button</button>
      </div>
    </div>
    <div class="nj-card">
      <div class="nj-card__body">
        <h4 class="nj-card__title">3 - Card title</h4>
        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <button role="button" class="nj-btn nj-btn--primary nj-btn--sm">Button</button>
      </div>
    </div>
    <div class="nj-card">
      <img class="nj-card__img" src="/assets/img/img-generic.jpg" alt="Card image cap"/>
      <div class="nj-card__body">
        <h4 class="nj-card__title">4 - Card title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque autem, consequuntur dolorum eius,
          expedita illo minus molestias natus pariatur perferendis, sed tenetur! Cumque magnam qui quis, sequi
          similique suscipit voluptas.</p>
        <div class="nj-tag nj-tag--blue-corporate"><span class="nj-tag__text">tag</span></div>
        <div class="nj-tag nj-tag--green-java"><span class="nj-tag__text">tag</span></div>
        <a href="#" class="nj-tag nj-tag--violet"><span class="nj-tag__text">tag</span></a>
        <a href="#" class="nj-tag nj-tag--orange"><span class="nj-tag__text">tag</span></a>
      </div>
    </div>
    <div class="nj-card">
      <img class="nj-card__img" src="/assets/img/img-generic.jpg" alt="Card image cap"/>
      <div class="nj-card__body">
        <h4 class="nj-card__title">5 - Card title</h4>
        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    <div class="nj-card">
      <img class="nj-card__img" src="/assets/img/img-generic.jpg" alt="Card image cap"/>
      <div class="nj-card__body">
        <h4 class="nj-card__title">5 Card title</h4>
        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    <div class="nj-card">
      <div class="nj-card__body">
        <h4 class="nj-card__title">6 - Card title</h4>
        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <button role="button" class="nj-btn nj-btn--primary nj-btn--sm">Button</button>
      </div>
    </div>
    <div class="nj-card">
      <img class="nj-card__img" src="/assets/img/img-generic.jpg" alt="Card image cap"/>
      <div class="nj-card__body">
        <h4 class="nj-card__title">7 - Card title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque autem, consequuntur dolorum eius,
          expedita illo minus molestias natus pariatur perferendis, sed tenetur! Cumque magnam qui quis, sequi
          similique suscipit voluptas.</p>
        <div class="nj-tag nj-tag--blue-corporate"><span class="nj-tag__text">tag</span></div>
        <div class="nj-tag nj-tag--green-java"><span class="nj-tag__text">tag</span></div>
        <a href="#" class="nj-tag nj-tag--violet"><span class="nj-tag__text">tag</span></a>
        <a href="#" class="nj-tag nj-tag--orange"><span class="nj-tag__text">tag</span></a>
      </div>
    </div>
    <div class="nj-card">
      <div class="nj-card__body">
        <h4 class="nj-card__title">8 - Card title</h4>
        <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <button role="button" class="nj-btn nj-btn--primary nj-btn--sm">Button</button>
      </div>
    </div>
    <div class="nj-card">
      <div class="nj-card__body">
        <h4 class="nj-card__title">9 - Card title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aspernatur dolorum earum harum, hic
          illum ipsa molestias nam odit quis quo quos repellat, repudiandae similique soluta veniam veritatis
          vero voluptatum!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad aspernatur dolorum earum harum, hic
            illum ipsa molestias nam odit quis quo quos repellat, repudiandae similique soluta veniam veritatis
            vero voluptatum!</p>
        <button role="button" class="nj-btn nj-btn--primary nj-btn--sm">Button</button>
        <button role="button" class="nj-btn nj-btn--primary nj-btn--sm">Button</button>
      </div>
    </div>
    <div class="nj-card">
      <img class="nj-card__img" src="/assets/img/img-generic.jpg" alt="Card image cap"/>
      <div class="nj-card__body">
        <h4 class="nj-card__title">10 - Card title</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque autem, consequuntur dolorum eius,
          expedita illo minus molestias natus pariatur perferendis.</p>
        <div class="nj-tag nj-tag--blue-corporate"><span class="nj-tag__text">tag</span></div>
        <div class="nj-tag nj-tag--green-java"><span class="nj-tag__text">tag</span></div>
        <a href="#" class="nj-tag nj-tag--violet"><span class="nj-tag__text">tag</span></a>
        <a href="#" class="nj-tag nj-tag--orange"><span class="nj-tag__text">tag</span></a>
      </div>
    </div>
  </div>
</div>

Card columns can also be extended and customized with some additional code. Shown below is an extension of the .nj-card-columns class using the same CSS we use—CSS columns— to generate a set of responsive tiers for changing the number of columns.

.nj-card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}