Cacher is the code snippet organizer for pro developers

> 1%
last 2 versions

.card-grid
  .card
    .card-header
    .card-media
      img(src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e")
    .card-content
      .title
        h2 Card title
      .subtitle
        | My card subtitle
      .description
        | Card description , la description peut être un texte très long et parfois peut intéressant
    .card-footer
  .card
    .card-header
    .card-media
      img(src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e")
    .card-content
      .title
        h2 Card title
      .subtitle
        | My card subtitle
      .description
        | Card description , la description peut être un texte très long et parfois peut intéressant
    .card-footer
  .card
    .card-header
    .card-media
      img(src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e")
    .card-content
      .title
        h2 Card title
      .subtitle
        | My card subtitle
      .description
        | Card description , la description peut être un texte très long et parfois peut intéressant
    .card-footer
  .card
    .card-header
    .card-media
      img(src="https://images.unsplash.com/photo-1485871811272-aa71f1f55124")
    .card-content
      .title
        h2 Card title, le titre peut parfois passer sur plusieures lignes
      .subtitle
        | My card subtitle, plus court
      .description
        | Card description , la description peut être un texte très long et parfois peut intéressant
    .card-footer
        | some actions

<!--
.card-list - vue de l'objet card en mode liste
.card-list.media-right - le visuel est à droite
.card-list.media-left - le visuel est à gauche 
.card-list.media-alternate - alterne les visuels gauche/droite
.card-grid - vue de l'objet card en grille
.card-grid.media-top - visuels en haut
.card-grid.media-bottom - visuel en bas
-->
<div class="card-list">
  <div class="card">
    <div class="card-header"></div>
      <div class="card-media"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e"/></div>
    <div class="card-content">
      <div class="title">
        <h2>Card title</h2>
      </div>
      <div class="subtitle">My card subtitle</div>
      <div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
    </div>
    <div class="card-footer"></div>
  </div>
  <div class="card">
    <div class="card-header"></div>
    <div class="card-media"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e"/></div>
    <div class="card-content">
      <div class="title">
        <h2>Card title</h2>
      </div>
      <div class="subtitle">My card subtitle</div>
      <div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
    </div>
    <div class="card-footer"></div>
  </div>
  <div class="card">
    <div class="card-header"></div>
    <div class="card-media"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e"/></div>
    <div class="card-content">
      <div class="title">
        <h2>Card title</h2>
      </div>
      <div class="subtitle">My card subtitle</div>
      <div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
    </div>
    <div class="card-footer"></div>
  </div>
  <div class="card">
    <div class="card-header"></div>
    <div class="card-media"><img src="https://images.unsplash.com/photo-1485871811272-aa71f1f55124"/></div>
    <div class="card-content">
      <div class="title">
        <h2>Card title, le titre peut parfois passer sur plusieures lignes</h2>
      </div>
      <div class="subtitle">My card subtitle, plus court</div>
      <div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
    </div>
    <div class="card-footer">some actions</div>
  </div>
</div>

@charset "UTF-8";
/** # Cards

https://www.nngroup.com/articles/cards-component/

Definition:
A card is container for a few short, related pieces of information.
It roughly resembles a playing card in size and shape, and is intended as a linked,
short representation of a conceptual unit.


Card actions   : https://material.io/guidelines/components/cards.html#cards-actions


## Cards Bootstrap V4 revisited


Markup:
<div class="card" style="width:300px;">
  <img class="card-thumbnail top" width="300" />
  <div class="card-content">
    <h4 class="title">Card title</h4>
    <p class="subtitle"></p>
    <p class="description">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>
<h3>Card with Caps : Header & Footer</h3>
<div class="card" style="width:300px;">
  <div class="card-header">
    Featured
  </div>
  <div class="card-content">
    <h4 class="title">Card title</h4>
    <p class="subtitle"></p>
    <p class="description">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
  <div class="card-footer">
    <a href="#" class="action">Button</a>
    Card footer
  </div>
</div>
<h3>Card with Images Caps</h3>
<div class="card" style="width:300px;">
  <img class="card-thumbnail top" width="300" />
  <div class="card-content">
    <h4 class="title">Card title</h4>
    <p class="description">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="description"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card" style="width:300px;">
  <div class="card-content">
    <h4 class="title">Card title</h4>
    <p class="description">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="description"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-thumbnail top" width="300" />
</div>

@see - <http://v4-alpha.getbootstrap.com/components/card/>
@see - https://vitalcss.com/layouts/ Exemple de structure et de declinaisons pour le card component
@see - http://zurb.com/article/1456/5-common-mistakes-designers-make-when-usi
@see - https://www.nngroup.com/articles/cards-component/
@see - http://line25.com/inspiration/card-grid-layouts-websites
@see - https://designshack.net/articles/layouts/the-complete-guide-to-an-effective-card-style-interface-design/
@see - https://codepen.io/sdthornton/pen/wBZdXq - MaterialDesigns shadow boxs
@bug - Sur l'élément title, le text overflow flex-childs https://css-tricks.com/flexbox-truncated-text/
@param $card-border-radius (3px !default)  -
@param $card-spacer-x (1em !default)  -
@param $card-spacer-y (1em !default)  -
@param $card-bg  (white !default)  -
@param $card-border-width (1px !default)  -
@param $card-border-color (silver !default)  -
@param $card-cap-bg (lighten($black, 80)!default)  -
@param $card-cap-color (white !default)  -
@param $unstyled-components (false !default)  -

Styleguide addons.uikit.cards
*/
* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  font-size: 1rem;
  line-height: 1.5;
}

.card {
  position: relative;
  width: 100%;
  display: block;
  margin-bottom: 2.5641%;
  background-color: white;
  border-width: 1px;
  border-style: solid;
  border-color: silver;
  border-radius: 3px;
}

.card-media {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 15em;
  overflow: hidden;
}

.card-media img {
  min-width: 100%;
  height: 100%;
}

.card-content {
  display: table;
  width: 100%;
  min-height: 4.5em;
  padding: 0 1em;
}

.card-content .title, .card-content .subtitle, .card-content .description {
  display: inline-block;
  width: 100%;
}

.card-content .title {
  height: 6em;
  padding: .5em 0;
  min-width: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-content .title > * {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0;
  padding: 0;
}

.card-content .subtitle {
  position: relative;
  margin-top: -15px;
  margin-bottom: 0.75em;
}

.card-content .description:last-child {
  margin-bottom: 0;
}

.card-header {
  padding: 0.75em;
  background-color: white;
  color: black;
  border-bottom: 1px solid silver;
}

.card-header:first-child {
  border-radius: 3px 3px 0 0;
}

.card-footer {
  padding: 0.75em;
  background-color: white;
  color: black;
  border-top: 1px solid silver;
}

.card-footer:last-child {
  border-radius: 0 0 3px 3px;
}

.card-list-legacy {
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;
}

.card-list-legacy:after {
  content: " ";
  display: block;
  clear: both;
}

head {
  display: block;
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 999;
  color: #333;
  background: rgba(255, 255, 255, 0.25);
}

head:before {
  content: "|||";
  display: block;
  padding: 5px 10px;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
}

head:hover {
  background: rgba(255, 255, 255, 0.5);
  color: red;
}

head:hover ~ .card-list-legacy,
head:hover ~ body .card-list-legacy {
  position: relative;
}

head:hover ~ .card-list-legacy:before,
head:hover ~ body .card-list-legacy:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: " ";
  z-index: 998;
  background-image: -webkit-linear-gradient( left , rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%), -webkit-linear-gradient( top , #000 1px, transparent 1px);
  background-image: -webkit-linear-gradient(left, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%), -webkit-linear-gradient(top, #000 1px, transparent 1px);
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%), linear-gradient(to bottom, #000 1px, transparent 1px);
  background-size: 12.82051%, 100% 1.5em;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}

.card-list-legacy > .card {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}

.card-list-legacy > .card .card-media {
  width: 37.5%;
  float: left;
  padding-left: 1.25%;
  padding-right: 1.25%;
}

.card-list-legacy > .card .card-content {
  width: 62.5%;
  float: left;
  padding-left: 1.25%;
  padding-right: 1.25%;
}

/** # Cards layouts

.card-list - vue de l'objet card en mode liste
.card-list.media-right - le visuel est à droite
.card-list.media-left - le visuel est à gauche
.card-list.media-alternate - alterne les visuels gauche/droite
.card-grid - vue de l'objet card en grille
.card-grid.media-top - visuels en haut
.card-grid.media-bottom - visuel en bas

Markup
<div class="$modifierClass">
  <div class="card">
    <div class="card-media"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e"/></div>
    <div class="card-content">
      <div class="title">
        <h2>Card title</h2>
      </div>
      <div class="subtitle">My card subtitle</div>
      <div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
    </div>
    <div class="card-footer"></div>
  </div>
  <div class="card">
    <div class="card-media"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e"/></div>
    <div class="card-content">
      <div class="title">
        <h2>Card title</h2>
      </div>
      <div class="subtitle">My card subtitle</div>
      <div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
    </div>
    <div class="card-footer"></div>
  </div>
  <div class="card">
    <div class="card-media"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e"/></div>
    <div class="card-content">
      <div class="title">
        <h2>Card title</h2>
      </div>
      <div class="subtitle">My card subtitle</div>
      <div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
    </div>
    <div class="card-footer"></div>
  </div>
  <div class="card">
     <div class="card-media">
       <img src="https://images.unsplash.com/photo-1485871811272-aa71f1f55124"/>
      </div>
    <div class="card-content">
      <div class="title">
        <h2>Card title, le titre sur plusieures lignes</h2>
      </div>
      <div class="subtitle">My card subtitle, plus court</div>
      <div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
    </div>
    <div class="card-footer"></div>
  </div>
</div>

Styleguide cards.layouts
*/
.card-list {
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;
}

.card-list:after {
  content: " ";
  display: block;
  clear: both;
}

head:hover ~ .card-list,
head:hover ~ body .card-list {
  position: relative;
}

head:hover ~ .card-list:before,
head:hover ~ body .card-list:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: " ";
  z-index: 998;
  background-image: -webkit-linear-gradient( left , rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%), -webkit-linear-gradient( top , #000 1px, transparent 1px);
  background-image: -webkit-linear-gradient(left, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%), -webkit-linear-gradient(top, #000 1px, transparent 1px);
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%), linear-gradient(to bottom, #000 1px, transparent 1px);
  background-size: 12.82051%, 100% 1.5em;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}

.card-list > .card {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row;
      -ms-flex-flow: row;
          flex-flow: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}

.card-list > .card .card-header,
.card-list > .card .card-footer {
  width: 100%;
  float: left;
  padding-left: 1.25%;
  padding-right: 1.25%;
}

@media (min-width: 431px) {
  .card-list > .card .card-media {
    width: 37.5%;
  }
  .card-list > .card .card-content {
    width: 62.5%;
    padding: 2.5641%;
  }
}

@media (min-width: 431px) {
  .card-list.media-right > .card .card-content,
  .card-list > .card.media-right .card-content,
  .card-list.media-alternate > .card:nth-child(2n) .card-content {
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
        -ms-flex-order: 3;
            order: 3;
  }
  .card-list.media-right > .card .card-media,
  .card-list > .card.media-right .card-media,
  .card-list.media-alternate > .card:nth-child(2n) .card-media {
    -webkit-box-ordinal-group: 5;
    -webkit-order: 4;
        -ms-flex-order: 4;
            order: 4;
  }
  .card-list.media-right > .card .card-footer,
  .card-list > .card.media-right .card-footer,
  .card-list.media-alternate > .card:nth-child(2n) .card-footer {
    -webkit-box-ordinal-group: 6;
    -webkit-order: 5;
        -ms-flex-order: 5;
            order: 5;
  }
}

.card-list > .card.media-left {
  -webkit-flex-flow: row;
      -ms-flex-flow: row;
          flex-flow: row;
}

.card-grid {
  max-width: 1050px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1.5em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.card-grid:after {
  content: " ";
  display: block;
  clear: both;
}

head:hover ~ .card-grid,
head:hover ~ body .card-grid {
  position: relative;
}

head:hover ~ .card-grid:before,
head:hover ~ body .card-grid:before {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: " ";
  z-index: 998;
  background-image: -webkit-linear-gradient( left , rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%), -webkit-linear-gradient( top , #000 1px, transparent 1px);
  background-image: -webkit-linear-gradient(left, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%), -webkit-linear-gradient(top, #000 1px, transparent 1px);
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%), linear-gradient(to bottom, #000 1px, transparent 1px);
  background-size: 12.82051%, 100% 1.5em;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}

.card-grid > .card {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (min-width: 431px) and (max-width: 780px) {
  .card-grid > .card {
    width: 46.66667%;
    float: left;
    margin-left: 1.66667%;
    margin-right: 1.66667%;
  }
}

@media (min-width: 781px) {
  .card-grid > .card {
    width: 31.11111%;
  }
}

.card-grid.media-bottom > .card,
.card-grid .card.media-bottom {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

.card-grid.media-top > .card,
.card-grid .card.media-top {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

// ----
// libsass (v3.5.0.beta.2)
// ----

/** # Cards

https://www.nngroup.com/articles/cards-component/

Definition:
A card is container for a few short, related pieces of information.
It roughly resembles a playing card in size and shape, and is intended as a linked,
short representation of a conceptual unit.


Card actions   : https://material.io/guidelines/components/cards.html#cards-actions


## Cards Bootstrap V4 revisited


Markup:
<div class="card" style="width:300px;">
  <img class="card-thumbnail top" width="300" />
  <div class="card-content">
    <h4 class="title">Card title</h4>
    <p class="subtitle"></p>
    <p class="description">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>
<h3>Card with Caps : Header & Footer</h3>
<div class="card" style="width:300px;">
  <div class="card-header">
    Featured
  </div>
  <div class="card-content">
    <h4 class="title">Card title</h4>
    <p class="subtitle"></p>
    <p class="description">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
  <div class="card-footer">
    <a href="#" class="action">Button</a>
    Card footer
  </div>
</div>
<h3>Card with Images Caps</h3>
<div class="card" style="width:300px;">
  <img class="card-thumbnail top" width="300" />
  <div class="card-content">
    <h4 class="title">Card title</h4>
    <p class="description">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="description"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card" style="width:300px;">
  <div class="card-content">
    <h4 class="title">Card title</h4>
    <p class="description">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="description"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-thumbnail top" width="300" />
</div>

@see - <http://v4-alpha.getbootstrap.com/components/card/>
@see - https://vitalcss.com/layouts/ Exemple de structure et de declinaisons pour le card component
@see - http://zurb.com/article/1456/5-common-mistakes-designers-make-when-usi
@see - https://www.nngroup.com/articles/cards-component/
@see - http://line25.com/inspiration/card-grid-layouts-websites
@see - https://designshack.net/articles/layouts/the-complete-guide-to-an-effective-card-style-interface-design/
@see - https://codepen.io/sdthornton/pen/wBZdXq - MaterialDesigns shadow boxs
@bug - Sur l'élément title, le text overflow flex-childs https://css-tricks.com/flexbox-truncated-text/
@param $card-border-radius (3px !default)  -
@param $card-spacer-x (1em !default)  -
@param $card-spacer-y (1em !default)  -
@param $card-bg  (white !default)  -
@param $card-border-width (1px !default)  -
@param $card-border-color (silver !default)  -
@param $card-cap-bg (lighten($black, 80)!default)  -
@param $card-cap-color (white !default)  -
@param $unstyled-components (false !default)  -

Styleguide addons.uikit.cards
*/

@import "bourbon/bourbon";
@import "susy";
$susy: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: auto,
  container-position: center,
  columns: 8,
  gutters: .25,
  column-width: false,
  global-box-sizing: border-box,
  last-flow: to,
  debug: (
    image: show baseline,
    color: rgba(#66f, .25),
    output: overlay,
    toggle: top left,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);
@import "include-media";
$breakpoints: (
  'phone': 430px,
  'tablet': 780px,
  'desktop': 960px
);

$global-line-height: 1.5;
$base-line-height: $global-line-height * 1em;
$base-font-size: 1rem;
$base-spacing: $base-line-height !default;
$small-spacing: $base-spacing / 2;
$max-width: 1050px !default;
$card-border-radius: 3px !default;
$card-spacer-x: 1em !default;
$card-spacer-y: 1em !default;
$card-bg : white !default;
$card-border-width: 1px !default;
$card-border-color: silver !default;
$card-cap-bg: white !default;
$card-cap-color: black !default;

$unstyled-components: false !default;

// Reset 
* {
  box-sizing: border-box;
}
html {
  font-size: 100%;
}
body {
  font-size: $base-font-size;
  line-height: $global-line-height;
}
@mixin card(){
  position: relative;
  width: 100%;
  display: block;
  margin-bottom: gutter();

  @if $unstyled-components == false {
    background-color: $card-bg;
    border-width: $card-border-width;
    border-style: solid;
    border-color: $card-border-color;
    border-radius: $card-border-radius;
  }

  &-media {
    position: relative;
    display: inline-block;
    width: 100%;
    height: $base-spacing * 10;
    overflow: hidden;
  
    img {
      min-width: 100%;
      height: 100%;
    }
  }

  &-content {
    display: table;
    width: 100%;
    min-height: $base-spacing * 3;
    padding: 0 $card-spacer-x;
  
    .title,.subtitle, .description {
      display: inline-block;
      width: 100%;
    }
    // 1- ne devrait être défni que pour la grille
    // 2 - dans le theme
    .title {
        height: $base-spacing * 4;
        padding: .5em 0;
        min-width: 0;
        display: flex; // [1]
        align-items: center;
        
        text-align: center;// [2]
        overflow: hidden;
        text-overflow: ellipsis;

        & > * {
          flex:1;
          margin: 0;
          padding: 0;
        }
    }

    .subtitle {
      position: relative;
      margin-top: -15px;
      margin-bottom: $small-spacing;
    }
    
    .description:last-child {
      margin-bottom: 0; // appliqué au dernier paragraphe
    }
  }
  
  //
  // Optional textual caps
  //
  &-header {
    padding: $small-spacing;
  
    @if $unstyled-components == false {
      background-color: $card-cap-bg;
      color: $card-cap-color;
  
      border-bottom: $card-border-width solid $card-border-color;
  
      &:first-child {
        border-radius: $card-border-radius $card-border-radius 0 0;
      }
    }
  }
  &-footer {
    padding: $small-spacing;

    @if $unstyled-components == false {
      background-color: $card-cap-bg;
      color: $card-cap-color;
      border-top: $card-border-width solid $card-border-color;
  
      &:last-child {
        border-radius: 0 0 $card-border-radius $card-border-radius;
      }
    }
  }
  
}
  
.card {
  @include card();
}

// Card image caps
%card-media-top {
  border-radius: $card-border-radius $card-border-radius 0 0;
}
%card-media-bottom {
  border-radius: 0 0 $card-border-radius $card-border-radius;
  img {
    bottom: 0;
  }
}

// layouts
$card-list-layout-s: layout(8 .25 inside) !default;

// With susy
.card-list-legacy {
  @include container($max-width);
  
  & > .card {
    @include span(full);
    .card-media {
      @include span(3 $card-list-layout-s);
    }
    .card-content{
      @include span(5 $card-list-layout-s);
    }
  }
}
/** # Cards layouts

.card-list - vue de l'objet card en mode liste
.card-list.media-right - le visuel est à droite
.card-list.media-left - le visuel est à gauche
.card-list.media-alternate - alterne les visuels gauche/droite
.card-grid - vue de l'objet card en grille
.card-grid.media-top - visuels en haut
.card-grid.media-bottom - visuel en bas

Markup
<div class="$modifierClass">
  <div class="card">
    <div class="card-media"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e"/></div>
    <div class="card-content">
      <div class="title">
        <h2>Card title</h2>
      </div>
      <div class="subtitle">My card subtitle</div>
      <div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
    </div>
    <div class="card-footer"></div>
  </div>
  <div class="card">
    <div class="card-media"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e"/></div>
    <div class="card-content">
      <div class="title">
        <h2>Card title</h2>
      </div>
      <div class="subtitle">My card subtitle</div>
      <div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
    </div>
    <div class="card-footer"></div>
  </div>
  <div class="card">
    <div class="card-media"><img src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e"/></div>
    <div class="card-content">
      <div class="title">
        <h2>Card title</h2>
      </div>
      <div class="subtitle">My card subtitle</div>
      <div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
    </div>
    <div class="card-footer"></div>
  </div>
  <div class="card">
     <div class="card-media">
       <img src="https://images.unsplash.com/photo-1485871811272-aa71f1f55124"/>
      </div>
    <div class="card-content">
      <div class="title">
        <h2>Card title, le titre sur plusieures lignes</h2>
      </div>
      <div class="subtitle">My card subtitle, plus court</div>
      <div class="description">Card description , la description peut être un texte très long et parfois peut intéressant</div>
    </div>
    <div class="card-footer"></div>
  </div>
</div>

Styleguide cards.layouts
*/
.card-list {
  @include container($max-width);

  
  & > .card {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    align-self: center;
    .card-header,
    .card-footer {
      @include span(full $card-list-layout-s);
    }
    @include media('>phone'){
      .card-media {
        width: span(3 $card-list-layout-s);
      }
      .card-content{
        width: span(5 last $card-list-layout-s);
        padding: gutter();
      }
    }
  }
  
  &.media-right > .card,
  & > .card.media-right,
  &.media-alternate > .card:nth-child(2n){
    //flex-flow: row-reverse; // Pose un soucis avec les blocs header/footer, on contoure en spécifiant littéralement l'ordre
    @include media('>phone'){
      .card-content{
        order: 3;
      }
      .card-media {
        order: 4;
      }
      .card-footer {
        order: 5;
      }
    }
  }
  & > .card.media-left{
    flex-flow: row;
  }
  
}




// Layout utility
$card-grid-layout-s: layout(6 split) !default;
$card-grid-layout-l: layout(9 split) !default;
.card-grid {
	@include container($max-width);
  padding-top: $base-spacing;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
  & > .card {
    display: flex;
    flex-direction: column;
		//padding-top: gutter();
		@include media('>phone','<=tablet'){
				@include span(3 $card-grid-layout-s);
		}
		@include media('>tablet'){
			width: span(3 $card-grid-layout-l);
		}
	}
	&.media-bottom > .card,
	& .card.media-bottom {
      flex-direction: column-reverse;
  }
  &.media-top > .card,
	& .card.media-top {
      flex-direction: column;
  }
}

.card-grid
  .card
    .card-media
      img(src="https://images.unsplash.com/photo-1465414829459-d228b58caf6e")
    .card-content
      .title
        | Titre de la card
      .subtitle
        | some sub informations
      .description
        | Description text for the item
    .card-footer