Cards

stablev1.0.0

Little bits of information.

Overview

Use this component to highlight, separate or layout small chunks of information that have value on their own (informative or functional).

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea accusantium voluptas vero minus, totam deserunt, placeat facere, molestias nemo cupiditate enim, earum laborum!

Usage

Dependencies

To get the card component working, include the dependencies in your project in the following order:

  1. npm
  2. Sass
  3. JS
  4. Pug
"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

// Basic call
@import 'design-system/src/scss/03-organisms/card/card';

// Optional calls
@import 'design-system/src/scss/03-organisms/card/list-card';
@import 'design-system/src/scss/03-organisms/card/card--article';
@import 'design-system/src/scss/03-organisms/card/card--article-lead';
@import 'design-system/src/scss/03-organisms/card/card--aside';
@import 'design-system/src/scss/03-organisms/card/card--link';
@import 'design-system/src/scss/03-organisms/card/card--main-service';
@import 'design-system/src/scss/03-organisms/card/card--offer';
@import 'design-system/src/scss/03-organisms/card/card--review';

// Optional calls for related elements
@import 'design-system/src/scss/02-molecules/marquee';
@import 'design-system/src/scss/03-organisms/list-summary';

// Optional call
import initMarquee from '../../../src/js/02-molecules/marquee';

// Optional call
include /node_modules/design-system/src/pug/03-organisms/card/card--article--lead.pug
include /node_modules/design-system/src/pug/03-organisms/card/card--article
include /node_modules/design-system/src/pug/03-organisms/card/card--faq
include /node_modules/design-system/src/pug/03-organisms/card/card--link
include /node_modules/design-system/src/pug/03-organisms/card/card--offer

Basic code

To get a basic card element, you just need to add the card class to a div element, and it will get the appropriate styles applied to it.

  1. Pug
  2. HTML
.card
  p Praesent commodo

<div class="card">
  <p>Praesent commodo </p>
</div>

Types

Basic card

The component in its most basic form.

Fringilla Parturient Porta

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea accusantium voluptas vero minus, totam deserunt, placeat facere, molestias nemo cupiditate enim, earum laborum!

Elements

Title

Fringilla Parturient Porta

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea accusantium voluptas vero minus, totam deserunt, placeat facere, molestias nemo cupiditate enim, earum laborum!

To get the title of your card properly styled, add the class card__title to the heading tag inside your card element.

  1. Pug
  2. HTML
.card
  h3.card__title Fringilla Parturient Porta
  p.card__paragraph Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea accusantium voluptas vero minus, totam deserunt, placeat facere, molestias nemo cupiditate enim, earum laborum!

<div class="card">
  <h3 class="card__title">Fringilla Parturient Porta</h3>
  <p class="card__paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea accusantium voluptas vero minus, totam deserunt, placeat facere, molestias nemo cupiditate enim, earum laborum! </p>
</div>
Paragraph

Fringilla Parturient Porta

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea accusantium voluptas vero minus, totam deserunt, placeat facere, molestias nemo cupiditate enim, earum laborum!

To add blocks of text to your card, use the p tag, with the class card__paragraph to apply the correct styles to it.

  1. Pug
  2. HTML
.card
  h3.card__title Fringilla Parturient Porta
  p.card__paragraph Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea accusantium voluptas vero minus, totam deserunt, placeat facere, molestias nemo cupiditate enim, earum laborum!

<div class="card">
  <h3 class="card__title">Fringilla Parturient Porta</h3>
  <p class="card__paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea accusantium voluptas vero minus, totam deserunt, placeat facere, molestias nemo cupiditate enim, earum laborum! </p>
</div>
Image
16/9 image example

Fringilla Parturient Porta

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea accusantium voluptas vero minus, totam deserunt, placeat facere, molestias nemo cupiditate enim, earum laborum!

To add images to your card, you need an img tag with the class card__img applied to it. But, in order to avoid a bug caused by the implementation of lazy-loading in masonry layouts, this element needs to be wrapped in another element with the card__img-wrapper class. Depending on the ratio of the image, this element will need a modifier to give it the correct amount of space. Right now, only a 16:9 modifier is available: card__img-wrapper--16-9.

  1. Pug
  2. HTML
.card
  h3.card__title Fringilla Parturient Porta
  .card__img-wrapper.card__img-wrapper--16-9
    img.card__img(src='source' alt="16/9 image example")
  p.card__paragraph Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea accusantium voluptas vero minus, totam deserunt, placeat facere, molestias nemo cupiditate enim, earum laborum!

<div class="card">
  <h3 class="card__title">Inceptos Amet Dapibus</h3>
  <div class="card__img-wrapper card__img-wrapper--16-9">
    <img class="card__img" src="source" alt="16/9 image example">
  </div>
  <p class="card__paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea accusantium voluptas vero minus, totam deserunt, placeat facere, molestias nemo cupiditate enim, earum laborum!</p>
</div>
SEO/Accesibility link text

Fringilla Parturient Porta

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea accusantium voluptas vero minus, totam deserunt, placeat facere, molestias nemo cupiditate enim, earum laborum!

If you want to make your whole card a clickable link, you add an a element at the beginning of your card, and assign it the card__link class, to make the whole card clickable. This works very well alongside the hover modifier.

For accessibility and SEO reasons, you can put a text inside this a element. Just add a span element inside the link, with the class card__link-text and it will get visually hidden, but available for bot crawlers and reading devices.

  1. Pug
  2. HTML
.card
  a.card__link(href='#basic-card')
    span.card__link-text SEO/Accesibility link text
  h3.card__title Fringilla Parturient Porta
  p.card__paragraph Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea accusantium voluptas vero minus, totam deserunt, placeat facere, molestias nemo cupiditate enim, earum laborum!

<div class="card">
  <a class="card__link" href="#basic-card">
    <span class="card__link-text">SEO/Accesibility link text</span>
  </a>
  <h3 class="card__title">Fringilla Parturient Porta</h3>
  <p class="card__paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea accusantium voluptas vero minus, totam deserunt, placeat facere, molestias nemo cupiditate enim, earum laborum!</p>
</div>
List

Add a list of items to your card element, using either ul or ol list elements, with the class card__list added to it, and the class card__list-item added to the child.

Fringilla Parturient Porta

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea accusantium voluptas vero minus, totam deserunt, placeat facere, molestias nemo cupiditate enim, earum laborum!

  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  • Lorem ipsum dolor sit amet.
  1. Pug
  2. HTML
.card
  h3.card__title Fringilla Parturient Porta
  p.card__paragraph Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea accusantium voluptas vero minus, totam deserunt, placeat facere, molestias nemo cupiditate enim, earum laborum!
  mark.cp-render__mark
    ul.card__list
      li.card__list-item Lorem ipsum dolor sit amet.
      li.card__list-item Lorem ipsum dolor sit amet.
      li.card__list-item Lorem ipsum dolor sit amet.

<div class="card">
  <h3 class="card__title">Elit Condimentum</h3>
  <p class="card__paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ea accusantium voluptas vero minus, totam deserunt, placeat facere, molestias nemo cupiditate enim, earum laborum!</p>
  <ul class="card__list">
    <li class="card__list-item">Lorem ipsum dolor sit amet.</li>
    <li class="card__list-item">Lorem ipsum dolor sit amet.</li>
    <li class="card__list-item">Lorem ipsum dolor sit amet.</li>
  </ul>
</div>
Header
  1. Pug
  2. HTML
.card
  .card__header [...]
  h5.card__title Ornare Elit
  p.card__paragraph Cras justo odio, dapibus ac facilisis in, egestas eget quam.

<div class="card">
  <div>[...]</div>
  <h5 class="card__title">Ornare Elit</h5>
  <p class="card__paragraph">Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
</div>

This element act as a wrapper in the topmost region of the card. It's normally used to add images on the top of the card, that you need to hide when on small screens (below md breakpoint). This wrapper will hide its contents by default, and update the display property when the md breakpoint is reached.

This element is most helpful when used in conjunction with header elements from the card__aside class.

Marquee
  1. Pug
  2. HTML
  3. JS
.card
  h5.card__title Vulputate Elit
  p.card__paragraph Nulla vitae elit libero, a pharetra augue.
  .card__marquee
    #marquee-id.marquee
      ul.marquee__list
        li.marquee__item
          img.marquee__img(src='img-src', alt="Marquee Alt")
          [...]

<div class="card">
  <h5 class="card__title">Vulputate Elit</h5>
  <p class="card__paragraph">Nulla vitae elit libero, a pharetra augue.</p>
  <div class="card__marquee">
    <div class="marquee" id="marquee-ex-1">
      <ul class="marquee__list">
        <li class="marquee__item">
          <img class="marquee__img" src="img-src" alt="Marquee Alt">
          [...]
        </li>
      </ul>
    </div>
  </div>
</div>

initMarquee({
  marqueeId: 'marquee-id',
});

This elements lets you insert a marquee element inside your card, adjusting the styles to it. To get this component working, simply add an element with the class card__marquee that will wrap the normal code for a marquee as seen in its documentation page.

Info
  1. Pug
  2. HTML
article.card.card--article
  header.card__info
    span.card__taxonomy
      +icon([...])
      | Taxonomie
    time.card__date(datetime="[...]")
      | [...]

  .card__img-wrapper.card__img-wrapper--16-9
    img.card__img(src='[...]', alt='16/9 image example')

<article class="card card--article">
  <header class="card__info">
    <span class="card__taxonomy">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="[...]"></use>
      </svg>
      Taxonomie
    </span>
    <time class="card__date" datetime="[...]">[...]</time>
  </header>
  <div class="card__img-wrapper card__img-wrapper--16-9">
    <img class="card__img" src="[...]" alt="16/9 image example">
  </div>
</article>

This element is used in article cards, but could be used in other situations. It aligns correctly the date of the article and the taxonomy/category it falls into. To lay out the card__taxonomy and card__time elements, wrap them inside a card__info element.

Call to action
  1. Pug
  2. HTML
// card__cta-mobile & card__cta example:
.card
  h5.card__title Mattis Fringilla
  p.card__paragraph Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  // Overlay element
  a.card__cta-overlay(href='#' tabindex='0')
    span.btn.btn--md.btn--block.btn--secondary Awesome!

  // Mobile element
  a.card__cta-mobile(href='#' aria-label='aria-label')
    +icon('arrow-right-3', '', '', '', '')

// card__cta-mobile & card__cta-overlay example:
.card
  h5.card__title Fringilla Inceptos
  p.card__paragraph Nullam id dolor id nibh ultricies vehicula ut id elit.

  // Button element
  a.card__cta.btn.btn--md.btn--block.btn--secondary(href='#') Call to action

  // Mobile element
  a.card__cta-mobile(href='#' aria-label='aria-label')
    +icon('arrow-right-3', '', '', '', '')

<!-- card__cta-mobile & card__cta example: -->
<div class="card">
  <h5 class="card__title">Mattis Fringilla</h5>
  <p class="card__paragraph">Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>

  <!-- Overlay element -->
  <a class="card__cta-overlay" href="#" tabindex="0">
    <span class="btn btn--md btn--block btn--secondary">Awesome!</span>
  </a>

  <!-- Mobile element -->
  <a class="card__cta-mobile" href="#" aria-label="aria-label">
    <svg class="icon" aria-hidden="true">
      <use xlink:href="[...]"></use>
    </svg>
  </a>
</div>

<!-- card__cta-mobile & card__cta example: -->
<div class="card">
  <h5 class="card__title">Fringilla Inceptos</h5>
  <p class="card__paragraph">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

  <!-- Button element -->
  <a class="card__cta btn btn--md btn--block btn--secondary" href="#">Call to action</a>

  <!-- Mobile element -->
  <a class="card__cta-mobile" href="#" aria-label="aria-label">
    <svg class="icon" aria-hidden="true">
      <use xlink:href="[...]"></use>
    </svg>
  </a>
</div>

This element consist on three sub-elements: one for mobile, and two different options for desktop.

Target Class Description
Mobile card__cta-mobile This makes the card containing it clickable in all of its area, perfect for mobile environments where the fingers are the input. Disappears on md breakpoint.
Desktop card__cta Displayed only from md breakpoint. Usually, this button will follow the same link the previous one does, and they work in conjunction (interchanging at md breakpoint).
Desktop card__cta-overlay Instead of a single button along the contents of the card, we can use an overlay that will partially hide the contentes of the card to display a centered button that will follow the link. Used instead of the previous one, works in conjunction with the mobile version as well.

Modifiers

Hover
Fermentum Tortor

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

  1. Pug
  2. HTML
.card.card--hover
  h5.card__title Fermentum Tortor
  p.card__paragraph Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.

<div class="card card--hover">
  <h5 class="card__title">Fermentum Tortor</h5>
  <p class="card__paragraph">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
</div>

Add the card--hover modifier class to the card element to get an animated border property on the card when hovering it.

Aligned Check
Aenean Vestibulum

Aenean lacinia bibendum nulla sed consectetur.

Quam Ultricies

Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo.

Tortor Pharetra

Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor.

  1. Pug
  2. HTML
.card.card--aligned
  h5.card__title Aenean Vestibulum
  p.card__paragraph Aenean lacinia bibendum nulla sed consectetur.

<div class="card card--aligned">
  <h5 class="card__title">Aenean Vestibulum</h5>
  <p class="card__paragraph">Aenean lacinia bibendum nulla sed consectetur.</p>
</div>

Isn't this card missing a flex-grow: 1 on the card__paragraph class to make the elements distribute correctly?

This modifier makes all the cards the same height, and aligns their content properly along the card. Works in conjunction with classes from list-card.

Full-width images Check

I don't really know what this is for...

Aenean Vestibulum
  1. Pug
  2. HTML
.card.card--fw-img
  img.card__img(src='https://via.placeholder.com/512x120')
  h5.card__title Aenean Vestibulum

<div class="card card--fw-img">
  <img class="card__img" src="https://via.placeholder.com/512x120">
  <h5 class="card__title">Aenean Vestibulum</h5>
</div>

[Attribute description]

Review

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Vestibulum Cras Pellentesque

  1. Pug
  2. HTML
.card.card--review
  p.card-review__testimonial Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
  p.card-review__author Vestibulum Cras Pellentesque

<div class="card card--review">
  <p class="card-review__testimonial">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
  <p class="card-review__author">Vestibulum Cras Pellentesque</p>
</div>

Use this modifier to add a review by a customer or expert, indicating the comment and the author with the classes card-review__testimonial and card-review__author respectively.

This modifier is intended to use within a carousel of reviews, along with other comments.

Main service

Ultricies Bibendum

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla.

  • Ridiculus Egestas
  • Tortor Commodo
  • Dapibus Vehicula
  • Marquee Alt
  • Marquee Alt
  • Marquee Alt
  • Marquee Alt
  • Marquee Alt
  1. Pug
  2. HTML
.card.card--main-service
  p.card__title Ultricies Bibendum
  p.card__paragraph Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla.
  ul.card__list
    li.card__list-item Ridiculus Egestas
  .card__marquee
    [...]

<div class="card card--main-service">
  <p class="card__title">Ultricies Bibendum</p>
  <p class="card__paragraph">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla.</p>
  <ul class="card__list">
    <li class="card__list-item">Ridiculus Egestas</li>
  </ul>
  <div class="card__marquee">
    [...]
  </div>
</div>

Specifically designed for home or landing pages, the card--main-service modifier updates the styles of the common card element to display it in the hero of the page, with more visually prominent properties, bigger paddings, etc...

Article card

Use this modifier when the card is representing a link or a preview of an article (for example, in blog listing pages). It updates the styles of the title and the global margins to adequate the design to the purpose of the card.

As this card is heavily used, and in highly automatizable situations, it is defined as a different type from the basic card, and has its own pug mixin.

The pug mixin admits the following variables:

Argument Kind Description
articleLink text URL to the article the card links to.
articleTitle text Used for the accessibility elements that needs the information about the article.
articleTaxonomy text Category for the article.
articleDate text (dd/mm/yy) The date of the article
articleImg text URL of the image to show.
articleImgAlt text Alternative text when the image is not rendered and for screen readers.
  1. Pug
  2. HTML
+card-article('#url-to-article', 'Lire l'article : Ullamcorper Nullam Pellentesque', 'Taxonomie', '26/04/17', 'url-to-image', '16/9 image example')

<article class="card card--article">
  <a class="card__link" href="#" title="Lire l'article : Ullamcorper Nullam Pellentesque">
    <span class="card__link-text">Ullamcorper Nullam Pellentesque</span>
  </a>
  <header class="card__info">
    <span class="card__taxonomy">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="../../img/sprite.svg#icon-cubes"></use>
      </svg>
      Taxonomie
    </span>
    <time class="card__date" datetime="2016-09-17T17:23:00+02:00">26-04-2017</time>
  </header>
  <div class="card__img-wrapper card__img-wrapper--16-9">
    <img class="card__img" src="url-to-image" alt="16/9 image example">
  </div>
  <div class="card__title">Ullamcorper Nullam Pellentesque</div>
</article>

Article lead card

This modifier is used in conjunction with the previous card--article and offers the posibility to add a "highlighted" article, giving it a different layout to have the spotlight in the layout.

The only difference with the card--article type, is that this one has the possibility to add a excerpt of the article in question, via a paragraph with the class card__chapo.

This type of card also has its own pug mixin:

Argument Kind Description
articleLink text URL to the article the card links to.
articleTitle text Used for the accessibility elements that needs the information about the article.
articleTaxonomy text Category for the article.
articleDate text (dd/mm/yy) The date of the article
articleImg text URL of the image to show.
articleImgAlt text Alternative text when the image is not rendered and for screen readers.
Bibendum Sem Vulputate
Taxonomie
16/9 image example
Bibendum Sem Vulputate
Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  1. Pug
  2. HTML
+card-article-lead('#', 'Bibendum Sem Vulputate', 'Taxonomie', '26/04/17', 'https://via.placeholder.com/512x288', '16/9 image example')


<article class="card card--hover card--article card--article-lead">
  <a class="card__link" href="#" title="Read: Bibendum Sem Vulputate">
    <span class="card__link-text">Bibendum Sem Vulputate</span>
  </a>
  <header class="card__info">
      <span class="card__taxonomy">
        <svg class="icon icon--left" aria-hidden="true">
          <use xlink:href="img/sprite.svg#icon-cubes"></use>
      </svg>
      Taxonomie
    </span>
    <time class="card__date" datetime="2016-09-17T17:23:00+02:00" aria-hidden="true">26/04/17</time>
  </header>
  << class="card__img-wrapper card__img-wrapper--16-9">
    <img class="card__img" data-src="https://via.placeholder.com/512x288" alt="16/9 image example">
  </<>
  <h3 class="card__title">Bibendum Sem Vulputate</h3>
  <p class="card__chapo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa a ea, fuga deleniti illum officia. Quidem dolore recusandae eligendi dolores nisi accusantium, repellat eius, distinctio, quas, dicta architecto earum soluta?</p>
</article>

Use this type of card to create a button-like card that acts as a link. Use the mixin to automatize your workflow:

Argument Kind Description
img text URL to the main image to show.
srcset text The srcset argument to get all the images media queried.
link text URL to the place the card links to.
title text Text to display and for accessibility reasons.
altImg text Alternative text when the image is not rendered and for screen readers.
Sollicitudin
Image alternative text
  1. Pug
  2. HTML
+card-link( 'https://via.placeholder.com/277x62', '', '#', 'Sollicitudin', 'Image alternative text')

<a class="card card--hover card--link u-anim--wobble" href="#" title="Read: Sollicitudin">
  <span class="card__title">
    Sollicitudin
    <svg class="icon icon--16 icon--primary icon--right" aria-hidden="true">
      <use xlink:href="img/sprite.svg#icon-caret-right"></use>
    </svg>
  </span>
  <div class="card--link__img-container">
    <img class="card--link__img" data-src="src" data-srcset="src-set" alt="Image alternative text">
  </div>
</a>

Offer card

Specially designed for the comparator, it can be used to compare any kind of offer.

# Argument Kind Description
1 ad boolean To indicate whether the option shown is an advert or not with an orange outline and an informative badge before the name of the offer.
2 comparable boolean If set to 1, the card will have a space on the left side, with a checkbox, so we can select this offer to make a further detailed comparison with any other selected offer.
3 providerName string Used as the alternative text for the provider's logo.
4 providerLogo string URL of the provider's logo image.
5 offerId string String used to give an ID and value to the checkbox in case the offer is comparable.
6 offerName string Name of the offer to use as title of the card.
7 offerType array A list of the characteristics of the offer (check the list after this table).
8 offerSavings mixed ('TR', 'NR', or quantity in currency) The quantity of money you save with this offer, or if it's a regulated tariff (TR), or it's not referenced in the comparator ('NR'). Positive values are rendered in green, while negative one are red.
9 offerBudget string A number representing the annual cost of this offer.
10 offerHeading string Optional: If present, the card get's rendered with a blue outline and header, with the title on it.
11 offerAheadType array Optional: If either 1, 2 or both are present in an array and passed as an argument, the card will display a badge for "Green energy" or "Prix selectra" respectively.
12 svgUrl string Optional: The URL for the sprite.

Types of offer:

  • Offre 100% en ligne
  • Offre 100% verte
  • Prix fixes 1 an
  • Prix fixes 2 ans
  • Prix fixes 3 ans
  • Prix indexés
  • Tarifs réglementés
  • Elu service client de l\'année 2016
  • Choose me!

    Offer 01

    Provider 01
    Prix Selectra du meilleur fournisseur
    Prix indexés
    Offre 100% en ligne
    • Lorem ipsum dolor sit amet, consectetur adipisicing elitomaip...
    • In condimentum facilisis porta. Sed nec diam eu diam mattis viverra...
    Prix Selectra 2018
    Meilleur fournisseur
    09 87 67 54 76Plus d'infos
    Vous économisez
    114€/an
    Budget : 1594€/an
  • Annonce

    Tarifs réglementés

    Provider 02
    Tarifs réglementés
    • Lorem ipsum dolor sit amet, consectetur adipisicing elitomaip...
    • In condimentum facilisis porta. Sed nec diam eu diam mattis viverra...
    09 87 67 54 76Plus d'infos
    Tarifs
    réglementés
    Budget TTC : 1708€/an

  • Offer 03

    Provider 03
    Energie verte
    Prix fixes 3 ans
    • Lorem ipsum dolor sit amet, consectetur adipisicing elitomaip...
    • In condimentum facilisis porta. Sed nec diam eu diam mattis viverra...
    Energie verte
    Offre 100% renouvelable
    09 87 67 54 76Plus d'infos
    Surcoût TTC
    -32€/an
    Budget : 1740€/an

  • Offer 04

    Provider 04
    Prix fixes 2 ans
    • Lorem ipsum dolor sit amet, consectetur adipisicing elitomaip...
    • In condimentum facilisis porta. Sed nec diam eu diam mattis viverra...
    09 87 67 54 76Plus d'infos
    Offre non référencée par le comparateur
    En savoir plus
  1. Pug
  2. HTML
// Example #1
+card-offer(false, false, 'Provider 01', 'https://via.placeholder.com/512x288', '01', 'Offer 01', ['Prix indexés', 'Offre 100% en ligne'], 114, 1594, 'Choose me!', [2], `${basedir}/img/sprite.svg`)

// Example #2
+card-offer(true, false, 'Provider 02', '/img/cards/logo-tr.png', '02', 'Tarifs réglementés', ['Tarifs réglementés'], 'TR', 1708, '', '', `${basedir}/img/sprite.svg`)

// Example #3
+card-offer(false, false, 'Provider 03', 'https://via.placeholder.com/512x288', '03', 'Offer 03', ['Prix fixes 3 ans'], '-32', 1740, '', [1], `${basedir}/img/sprite.svg`)

// Example #4
+card-offer(false, false, 'Provider 04', 'https://via.placeholder.com/512x288', '04', 'Offer 04', ['Prix fixes 2 ans'], 'NR', 1702, '', '', `${basedir}/img/sprite.svg`)

<!-- Example 1 -->

FAQ card

This card does not depend on a modifier, but on a combination of classes and elements already presented, to create a reusable design that we can use for small cards, much like the link cards, but without the image that goes along. Perfect for FAQ links.

  1. Pug
  2. HTML
+card-faq('link-url', 'text-to-display')

<article class="card card--hover card--article">
  <a class="card__link" href="#" target="_blank" title="Read: Quam Tortor ">
    <span class="card__link-text">Quam Tortor </span>
  </a>
  <h3 class="card__title">Quam Tortor</h3>
</article>

Helpers

List card

When using the cards as a group, and not as as a standalone element (think about showing several offers with the comparison behavior, a group of links, or any other kind or group) you can wrap them all with the class list-card (applied to a standalone div element, or to the row wrapper, in case it's present), and the list-card__item to each children (usually the columns definitions).

  1. Pug
  2. HTML
.row.list-card
  .col-xs-12.col-md-4.list-card__item
    .card
      [...]
  .col-xs-12.col-md-4.list-card__item
    .card
      [...]
  .col-xs-12.col-md-4.list-card__item
    .card
      [...]

<div class="row list-card">
  <div class="col-xs-12 col-md-4 list-card__item">
    <div class="card">
      [...]
    </div>
  </div>
  <div class="col-xs-12 col-md-4 list-card__item">
    <div class="card">
      [...]
    </div>
  </div>
  <div class="col-xs-12 col-md-4 list-card__item">
    <div class="card">
      [...]
    </div>
  </div>
</div>

Promo XS

This class is used to modify the order of the cards in mobile environments. The card that has this class applied, will render first in mobile devices, no matter what. Starting in MD breakpoint, it will revert to the default behavior.

Apply the list-card__item--promo-xs modifier to the list-card__item element (usually the col-* class) to apply this behavior.

Element 1

Element 2

Promotional element

  1. Pug
  2. HTML
.list-card
  .row
    .col-xs-6.list-card__item
      .card
        p.card__title Element 1
    .col-xs-6.list-card__item
      .card
        p.card__title Element 2
  .row
    .col-xs-12.list-card__item.list-card__item--promo-xs
      .card
        p.card__title Promotional element

<div class="list-card">
    <div class="row">
      <div class="col-xs-6 list-card__item">
        <div class="card">
          <p class="card__title">Element 1</p>
        </div>
      </div>
      <div class="col-xs-6 list-card__item">
        <div class="card">
          <p class="card__title">Element 2</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-12 list-card__item list-card__item--promo-xs">
        <div class="card">
          <p class="card__title">Promotional element</p>
        </div>
      </div>
    </div>
  </div>

Comparison

Use the list-card--comparison modifier along with the proper configuration of your offer card to apply the necessary styles for the left-hand checkboxes used to select offers for comparison.

  • Provider 1

    Provider 01
    Prix Selectra du meilleur fournisseur
    Prix fixes 1 an
    Offre 100% en ligne
    • Lorem ipsum dolor sit amet, consectetur adipisicing elitomaip...
    • In condimentum facilisis porta. Sed nec diam eu diam mattis viverra...
    Prix Selectra 2018
    Meilleur fournisseur
    09 87 67 54 76Plus d'infos
    Vous économisez
    150€/an
    Budget : 1500€/an

  • Provider 2

    Provider 02
    Prix fixes 2 ans
    • Lorem ipsum dolor sit amet, consectetur adipisicing elitomaip...
    • In condimentum facilisis porta. Sed nec diam eu diam mattis viverra...
    09 87 67 54 76Plus d'infos
    Vous économisez
    100€/an
    Budget : 1000€/an

  • Provider 3

    Provider 03
    Energie verte
    Prix fixes 3 ans
    Offre 100% verte
    • Lorem ipsum dolor sit amet, consectetur adipisicing elitomaip...
    • In condimentum facilisis porta. Sed nec diam eu diam mattis viverra...
    Energie verte
    Offre 100% renouvelable
    09 87 67 54 76Plus d'infos
    Vous économisez
    50€/an
    Budget : 500€/an
  1. Pug
  2. HTML
.row
  .col-xs-12
    ul.list-card.list-card--comparison
      li.list-card__item
        +card-offer( [...] )
      li.list-card__item
        +card-offer( [...] )
      li.list-card__item
        +card-offer( [...] )

<ul class="list-card list-card--comparison">
  <li class="list-card__item">
    <article class="card card-offer card-offer--comparable">
      [...]
    </article>
  </li>
  <li class="list-card__item">
    <article class="card card-offer card-offer--comparable">
      [...]
    </article>
  </li>
  <li class="list-card__item">
    <article class="card card-offer card-offer--comparable">
      [...]
    </article>
  </li>
</ul>

Stretch

This modifier forces all the card elements to occupy the 100% of height of the parent.

Nibh Nullam

Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla.

Euismod Etiam

Cras mattis consectetur purus sit amet fermentum.

Aenean Lorem

Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  1. Pug
  2. HTML
.row.list-card.list-card--stretch
  .col-xs-12.col-md-4
    .card
      p.card__title Nibh Nullam
      p.card__paragraph [...]

  .col-xs-12.col-md-4
    .card
      p.card__title Euismod Etiam
      p.card__paragraph [...]

  .col-xs-12.col-md-4
    .card
      p.card__title Aenean Lorem
      p.card__paragraph [...]

<div class="row list-card list-card--stretch">
  <div class="col-xs-12 col-md-4">
    <div class="card">
      <p class="card__title">Nibh Nullam</p>
      <p class="card__paragraph">[...]</p>
    </div>
  </div>
  <div class="col-xs-12 col-md-4">
    <div class="card">
      <p class="card__title">Euismod Etiam</p>
      <p class="card__paragraph">[...]</p>
    </div>
  </div>
  <div class="col-xs-12 col-md-4">
    <div class="card">
      <p class="card__title">Aenean Lorem</p>
      <p class="card__paragraph">[...]</p>
    </div>
  </div>
</div>

Spaced

Use the list-card--spaced modifier on the list-card wrapper element to give extra bottom margin to its children. Remember that by default, the list-card__item has already a margin, with this modifier you're just making it bigger.

Bibendum

Mollis Egestas Elit

Bibendum

Mollis Egestas Elit

Bibendum

Mollis Egestas Elit

Bibendum

Mollis Egestas Elit

Bibendum

Mollis Egestas Elit

Bibendum

Mollis Egestas Elit

  1. Pug
  2. HTML
.row.list-card.list-card--spaced
  .col-xs-12.col-md-4.list-card__item
    .card
      p.card__title Bibendum
      p.card__paragraph Mollis Egestas Elit

  .col-xs-12.col-md-4.list-card__item
    .card
      p.card__title Bibendum
      p.card__paragraph Mollis Egestas Elit

  .col-xs-12.col-md-4.list-card__item
    .card
      p.card__title Bibendum
      p.card__paragraph Mollis Egestas Elit

  .col-xs-12.col-md-4.list-card__item
    .card
      p.card__title Bibendum
      p.card__paragraph Mollis Egestas Elit

  .col-xs-12.col-md-4.list-card__item
    .card
      p.card__title Bibendum
      p.card__paragraph Mollis Egestas Elit

  .col-xs-12.col-md-4.list-card__item
    .card
      p.card__title Bibendum
      p.card__paragraph Mollis Egestas Elit

<div class="row list-card list-card--spaced">
  <div class="col-xs-12 col-md-4 list-card__item">
    <div class="card">
      <p class="card__title">Bibendum</p>
      <p class="card__paragraph">Mollis Egestas Elit</p>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 list-card__item">
    <div class="card">
      <p class="card__title">Bibendum</p>
      <p class="card__paragraph">Mollis Egestas Elit</p>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 list-card__item">
    <div class="card">
      <p class="card__title">Bibendum</p>
      <p class="card__paragraph">Mollis Egestas Elit</p>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 list-card__item">
    <div class="card">
      <p class="card__title">Bibendum</p>
      <p class="card__paragraph">Mollis Egestas Elit</p>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 list-card__item">
    <div class="card">
      <p class="card__title">Bibendum</p>
      <p class="card__paragraph">Mollis Egestas Elit</p>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 list-card__item">
    <div class="card">
      <p class="card__title">Bibendum</p>
      <p class="card__paragraph">Mollis Egestas Elit</p>
    </div>
  </div>
</div>

Asides

This special cards are specifically designed to work in lateral aside elements.

Call block

There are two versions of this block, depending on the status of the call-center: open and closed. When the call-center is not accepting calls, we should display the closed version.

Title

Lorem ipsum dolor sit amet.

09 87 67 54 76Free call back
Our call is actually closed

We recommend Direct Energy's offer

Online subscription

Call block - Open

The first option is to display the block when the call-center is open.

The pug mixin accepts the following arguments:

Argument Kind Description
title string The title to display, "Title" by default.
paragraph string The paragraph to display, "Lorem ipsum dolor sit amet" by default.
phone string The phone to display in the button, "09 8 67 54 76" by default.
phoneTitle string The ARIA title for the phone button, "Free call" by default.
callback string The text to display on the second button, "Free call back" by default.
callbackTitle string The ARIA title for the second button, "Free call back" by default.
imgUrl string The path for the header image.

Call block - Closed

The other option is to display the block when the call-center is not available.

The pug mixin accepts the following arguments:

Argument Kind Description
header string The text to display on the header, "Our call is actually closed" by default.
imgUrl string The path for the header image.
imgAlt string The alternative text to show when the image is not available, "Direct Energie" by default.
title string The main text to display on the card, "We recommend Direct Energy's offer" by default.
link string The text to display on the card's button, "Online subscription" by default.
linkTitle string The ARIA title for the card's button, "Subscribe to Direct Energy's offer" by default.

Most read block

This block is used to generate a list of the most read articles.

The pug mixin accepts the following arguments:

Argument Kind Description
title string The title to display, "Most read this month" by default.
links array An array containing the links to display (the text shown to the user).
linksTitle array An array containing the ARIA titles for the links provided in previous array.

Most read

  1. Cras Magna Etiam
  2. Sem Dolor Ipsum
  3. Ipsum Risus Mattis
  1. Pug
  2. HTML
+aside-most-read-this-month('Most read', ['Cras Magna Etiam', 'Sem Dolor Ipsum', 'Ipsum Risus Mattis'], ['Title 01', 'Title 02', 'Title 03'])

<section class="card card--aside">
  <p class="card__title">Most read</p>
  <ol class="list-numbered">
    <li class="list-numbered__item">
      <a href="#" title="Title 01">Cras Magna Etiam</a>
    </li>
    <li class="list-numbered__item">
      <a href="#" title="Title 02">Sem Dolor Ipsum</a>
    </li>
    <li class="list-numbered__item">
      <a href="#" title="Title 03">Ipsum Risus Mattis</a>
    </li>
  </ol>
</section>

Summary block

Use this card to create a contextual menu that shows links to the different parts of the contents, acting as a summary.

The pug mixin accepts the following arguments:

Argument Kind Description
title string The title to display, "Summary" by default.
links array An array containing the links to display (the text shown to the user).
hook boolean If set to true the summary will be hooked to the top of the page. Thus, when the user scrolls down, the summary will be kept in place.
  1. Pug
  2. HTML
+aside-summary('Summary', ['Tellus Nibh', 'Fringilla Ullamcorper', 'Mattis Porta', 'Pellentesque Tellus'], false)

<nav class="card card--aside">
<!-- This line in case we need the hooked version: -->
<!-- <nav class="card card--aside" data-hook="data-hook"> -->
  <p class="card__title">Summary</p>
  <ol class="list-summary">
    <li class="list-summary__item"><a class="list-summary__link" href="#" title="Tellus Nibh">Tellus Nibh</a></li>
    <li class="list-summary__item"><a class="list-summary__link" href="#" title="Fringilla Ullamcorper">Fringilla Ullamcorper</a></li>
    <li class="list-summary__item"><a class="list-summary__link" href="#" title="Mattis Porta">Mattis Porta</a></li>
    <li class="list-summary__item"><a class="list-summary__link" href="#" title="Pellentesque Tellus">Pellentesque Tellus</a></li>
  </ol>
</nav>

Generic text block

Use this card to show a headered block (with an image) that contains a title, paragraph and a CTA button at the bottom.

The pug mixin accepts the following arguments:

Argument Kind Description
imgUrl string The path for the image to show on the header.
title string The title to display, "We are hiring" by default (works as an example).
paragraph string The block of text that will work as the main paragraph on the card, "Lorem ipsum" by default (works as an example).
link string The text shown on the CTA button.
linkTitle string The ARIA title for the CTA button.

We are hiring!

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora, doloremque!

  • Lorem, ipsum dolor.
  • Lorem, ipsum dolor.
  • Lorem, ipsum dolor.
See offers
  1. Pug
  2. HTML
+aside-text-generic('imgUrl', 'title', 'paragraph', 'link', 'linkTitle')

<section class="card card--aside card--aside-headered">
  <header class="card__header">
    <img class="card__header-img u-img--fluid" data-src="imgUrl">
  </header>
  <p class="card__title">title</p>
  <p>paragraph</p>
  <a class="btn btn--md btn--secondary btn--block" href="#" title="linkTitle">link</a>
</section>