Card

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 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%
<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--sm">Button</button>
  </div>
</div>

<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>

Some vertical format examples

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-6 col-lg-4">
      <div class="nj-card mb-3">
        <img class="nj-card__img" src="https://design.engie.com/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-6 col-lg-4">
      <div class="nj-card nj-card--border mb-3">
        <img class="nj-card__img" src="https://design.engie.com/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-6 col-lg-4">
      <div class="nj-card mb-3">
        <img class="nj-card__img" src="https://design.engie.com/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--brand"><span class="nj-tag__text">#tag</span></div>
            <div class="nj-tag nj-tag--green"><span class="nj-tag__text">#tag</span></div>
            <div class="nj-tag nj-tag--pink"><span class="nj-tag__text">#tag</span></div>
          </div>
          <button class="nj-btn nj-btn--sm">Small button</button>
        </div>
      </div>
    </div>
  </div>
</div>

Some horizontal format examples

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">
      <div class="mb-2">
        <div class="nj-tag nj-tag--brand"><span class="nj-tag__text">tag</span></div>
        <div class="nj-tag nj-tag--green"><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">
      <div class="mb-2">
        <div class="nj-tag nj-tag--brand"><span class="nj-tag__text">tag</span></div>
        <div class="nj-tag nj-tag--green"><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>

Cover format examples

Please do not exceed 135 characters for the description text.

<div class="container">
  <div class="row">
    <div class="col-lg-4 p-2">
      <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">arrow_forward</i>
                <p class="nj-card__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>
      </a>
    </div>
    <div class="col-lg-4 p-2">
      <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">arrow_forward</i>
                <p class="nj-card__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>
      </a>
    </div>
    <div class="col-lg-4 p-2">
      <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">arrow_forward</i>
                <p class="nj-card__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>
      </a>
    </div>
    <div class="col-lg-4 p-2">
      <a href="#" class="nj-card nj-card--cover" style="background-image:url(https://www.engie.com/sites/default/files/assets/images/2019-11/page_client_particuliers.jpg);">
        <div class="nj-card__body">
            <div class="nj-card__overlay">
                <h4 class="nj-card__title">Particuliers</h4>
                <i class="material-icons">arrow_forward</i>
                <p class="nj-card__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>
      </a>
    </div>
  </div>
</div>

Other format of cards

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
Offer details
<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <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="https://design.engie.com/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--sm">See profile</button>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <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>
          <div style="display: flex; flex-direction: column; align-items: center">
            <button role="button" class="nj-btn mb-2">Sign for free</button>
            <a href="#" class="nj-link">Offer details</a>
          </div>
        </div>
      </div>
    </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="https://design.engie.com/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--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--sm">Button</button>
      </div>
    </div>
    <div class="nj-card">
      <img class="nj-card__img" src="https://design.engie.com/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--brand"><span class="nj-tag__text">tag</span></div>
        <div class="nj-tag nj-tag--green"><span class="nj-tag__text">tag</span></div>
        <a href="#" class="nj-tag nj-tag--purple"><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="https://design.engie.com/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="https://design.engie.com/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--sm">Button</button>
      </div>
    </div>
    <div class="nj-card">
      <img class="nj-card__img" src="https://design.engie.com/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--brand"><span class="nj-tag__text">tag</span></div>
        <div class="nj-tag nj-tag--green"><span class="nj-tag__text">tag</span></div>
        <a href="#" class="nj-tag nj-tag--purple"><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--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--sm">Button</button>
        <button role="button" class="nj-btn nj-btn--sm">Button</button>
      </div>
    </div>
    <div class="nj-card">
      <img class="nj-card__img" src="https://design.engie.com/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--brand"><span class="nj-tag__text">tag</span></div>
        <div class="nj-tag nj-tag--green"><span class="nj-tag__text">tag</span></div>
        <a href="#" class="nj-tag nj-tag--purple"><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;
  }
}