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.
Storybook documentations
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
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" style="gap: var(--nj-semantic-size-spacing-4);"><span aria-hidden="true" class="material-icons nj-icon-material nj-icon-material--green">check_circle</span> 1,6%</div>
</div>
</div>Some vertical format examples
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 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 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
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
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-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.
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.
5 - Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
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.
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!
<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;
}
}