Card: Multi

Same as 2018

HTML
View
Context
Assets
Info
Notes


        
        <div class="c-card o-card c-card--multi " aria-label="">

    <img src="../../images/svgs/personal-data.svg" class="o-card__img" alt="Utente privato" aria-hidden="true">
    <span class="c-card__text o-card__text">
        Privato
    </span>
    <a href="" class="c-card__text o-card__text " aria-controls="">

    </a>

</div>


        <div class="c-card o-card c-card--multi {{ modifier }}" aria-label="{{ aria-label }}">

  <img src="{{ path img-path }}" class="o-card__img" alt="{{ img-alt }}" aria-hidden="true">
  <span class="c-card__text o-card__text">
    {{{ text }}}
  </span>
  <a href="{{ url }}" class="c-card__text o-card__text {{ linkModifier }}" aria-controls="{{ opens-dialog }}">
    {{{ link }}}
  </a>

</div>


        
            
            {
  "img-path": "/images/svgs/personal-data.svg",
  "img-alt": "Utente privato",
  "text": "Privato"
}

File:

Content:


                                .c-card {
  border-radius: remify(12px);
  background-color: #fff;
  @include shadow(medium);
  padding: remify(24px) remify(24px) remify(32px) remify(24px);
  height: 100%;

  .c-form--youfirst & {
    padding: remify(16px);
    @include min-screen(bp(tablet)) {
      padding: remify(24px) remify(24px) remify(32px) remify(24px);
    }
  }
  
  img {
    width: remify(100px);
    .c-cards--payment-type & {
      width: remify(160px);
    }
    .c-form--new-reclaim &,
    .c-form--signup-flights & {
      width: remify(80px);
    }
  }

  .c-form--tight & p {
    margin-bottom: 0;
  }
  
  .c-cards--helpdesk & {
    border-radius: 0;
    box-shadow: none;
  }
  
  .c-cards--vertically-centered & {
    padding: remify(24px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

}

.c-card__text {
  color: primary(night, 100);

  .c-form--new-reclaim & {
    font-size: 82%;
  }

}

.c-card__price-note {
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    text-transform: uppercase;
    font-size: 80%;

    @include min-screen(bp(tablet)) {
      font-size: 100%;
    }
  }

  strong {
    font-size: 100%;

    @include min-screen(bp(tablet)) {
      font-size: 120%;
    }
  }
}

/*------------------------------------*\
  Help modifier
\*------------------------------------*/

.c-card--help {
  padding: remify(16px);
  @include min-screen(bp(tablet)) {
    padding: remify(24px) remify(24px) remify(32px) remify(24px);
  }
  img {
    display: none;
    @include min-screen(bp(tablet)) {
      display: block;
    }
  }
  a {
    color: primary(sky, 120);
    @include min-screen(bp(tablet)) {
      font-size: 125%;
      line-height: 1.4;
    }
  }
}

/*------------------------------------*\
  Geeky modifier
\*------------------------------------*/

.c-card--geeky {

  .c-card__text {
    font-size: 150%;
    line-height: 1.333;
    margin-bottom: remify(16px);
  }
  
  .c-card__list {
    text-align: center;
    li {
      margin-bottom: remify(8px);
    }
  }

  .c-card__description {
    text-align: center;
  }

  .c-card__link {
    display: block;
    margin-top: remify(16px);
    text-align: center;
  }

}

/*------------------------------------*\
  Art modifier
\*------------------------------------*/

.c-card--art {
  padding: 0;
  border-radius: remify(12px);
  @include shadow(higher);
  overflow: hidden;

  .c-tutorial & {
    flex: 1;
  }

  .l-travel-home__organize &,
  .c-main--transports &,
  .c-main--shopping-home & {
    @include shadow(higher);
    background-color: secondary(soft, 100);
  }

  .c-card__image {
    img {
      width: 100%;
      max-height: remify(160px);
      @supports (object-fit: cover) {
        object-fit: cover;
      }
      @include min-screen( bp(tablet)) {
        max-height: remify(240px);
      }
    }
    img.shortest {
      @include min-screen( bp(tablet)) {
        // height: remify(160px);
      }
    }
  }

  .c-card__text {
    padding: remify(24px) remify(24px) remify(36px);
    color: primary(night, 100);
    
    .title {
      text-transform: uppercase;
      display: block;
      margin-bottom: remify(16px);
    }
  }
  
  .c-card__footer {
    padding: 0 remify(24px) remify(24px) remify(24px);
    a {
      // color: primary(night, 100);
      margin-right: remify(24px);
    }
    img {
      width: auto;
      max-width: remify(90px);
      max-height: remify(36px);
    }

    .is-lonely & { 
      text-align: left; 
      @include max-screen(bp(tablet)) {
        img { margin-bottom: 1rem; margin-right: 1rem;}
        a { margin-left: 0;}
      }
    }

    .c-link svg {
      vertical-align: middle;
    }
    
  }
}

/*------------------------------------*\
  Only img modifier
\*------------------------------------*/

.c-card--onlyimg {
  padding: remify(32px);
  .c-carousel & {
    @include shadow(small);
  }
  .c-carousel--equalH & {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  img {
    margin-bottom: 0;
    max-width: remify(145px);
  }
  .c-card__text {
    display: none;
  }
}

/*------------------------------------*\
  Card linked modifier
\*------------------------------------*/

.c-card--linked {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  &>* {
    flex: 1 1 auto;
  }
  .c-card__footer {
    flex: 0 0 auto;
  }

  .c-card__footer--super {
    text-align: initial;

    @include min-screen(bp(phone-p)) {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
    }

    a {
      margin-left: 0;

      @include min-screen(bp(phone-p)) {
        margin-left: remify(16px);
      }

    }

  }

  .c-card__select {
    margin-bottom: remify(16px);
    @include min-screen(bp(phone-p)) {
      flex: 1 1 auto;
      margin-bottom: 0;
    }
  }

  label {
    font-weight: fw(bold);
    display: block;
    color: primary(night, 100);
    margin-bottom: remify(4px);
    text-transform: uppercase;
    text-align: left;
    font-size: 75%;
  }
  
  select {
    width: 100%;
    border: 0;
    @include shadow(small);
    background-color: #fff;
    background-image: url(../images/svgs/arrow-down-blue.svg);
    background-repeat: no-repeat;
    background-position: 96% center;
    border-radius: remify(4px);
    height: remify(48px);
    padding: remify(8px) remify(16px);
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
  }

}

/*------------------------------------*\
  Sewing modifier
\*------------------------------------*/

.c-card--sewing {
  padding: remify(16px);

  a {
    font-size: 100%;
    border-top: 1px dashed primary(sky, 20);
    padding-top: remify(16px);
  }

}

/*------------------------------------*\
  Mobile App modifier
\*------------------------------------*/

.c-card--mobileApp {

  .c-card__footer {
    display: flex;
  }

  .c-card__footer img {
    width: 100%;
    max-width: initial;
    max-height: remify(48px);
  }

}

/*------------------------------------*
    Ticket modifier
*------------------------------------*/

.c-card--ticket {
  padding: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  flex-direction: column;
  display: flex;

  h2 {
    font-size: 100%;
    text-align: center;
    margin-bottom: remify(16px);

    @include min-screen(bp(tablet)) {
      font-size: 120%;
    }
  }

  .c-card__text {
    padding: remify(24px) remify(24px) remify(32px);
    background-color: #fff;
    border-radius: remify(4px) remify(4px) 0 0;
  }

  .c-card__rip {
    min-height: remify(20px);
    margin: 0 remify(10px);
    background-color: #fff;
    position: relative;
    background-image: url(../images/svgs/ticket-dashed.svg);
    background-repeat: no-repeat;
    background-position: center;
      
    &:before,
    &:after {
      content: '';
      position: absolute;
      width: remify(20px);
      height: remify(20px);
      top: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      box-sizing: initial;
      border: 5px solid transparent;
      border-top-color: #fff;
      border-right-color: #fff;
      border-radius: 100%;
      pointer-events:none;
    }
      
    &:before {
      left: -10px;
    }
    
    &:after {
      transform: translate(-50%, -50%) rotate(225deg);
      right: -40px;
    }
    
  }

  .c-card__footer {
    text-align: center;
    padding: remify(24px) remify(24px) remify(32px);
    background-color: #fff;
    border-radius: 0 0 remify(4px) remify(4px);
  }

  .c-card__footer--full {
    height: 100%;
  }

  p {
    display: block;
    font-size: 80%;
    color: primary(night, 80);
    margin-top: remify(16px);
  }

  label {
    margin-top: remify(16px);
    display: inline-block;
    font-size: 80%;
    color: primary(sky, 120);
    text-decoration: underline;
    position: relative;

    &:after {
      content: '\25BC';
      display: block;
      position: absolute;
      top: remify(5px);
      font-size: 60%;
      right: remify(-12px);
    }

  }

  img {
    width: remify(180px);
    margin-top: remify(16px);
  }
  
  .u-chkbx-toggle:checked + label:after {
    content: '\25B2';
  }

  .c-card__description {
    margin-top: remify(24px);
  }

}

/*------------------------------------*\
  Baloon modifier
\*------------------------------------*/

.c-card--baloon {

  .c-status {
    margin-top: 2rem;
  }

}


/*------------------------------------*\
  Card Multi in Product
\*------------------------------------*/

.c-product .c-card--multi {


  box-shadow: none;
  border-radius: remify(0px);
  padding: remify(24px) remify(12px) remify(32px) remify(12px);
  height: auto;
  margin-top: remify(24px);
  width: 100%;

  @include min-screen(bp(tablet-p)) {
    max-width: remify(194px);
    margin-top: 0;
  }

  .o-card__img { max-width: remify(60px); }
  .c-card__text {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: remify(8px); ;

    strong {
      display: block;
      font-size: 16px;
    }
  }

  a.c-card__text {
    margin-bottom: 0;;
    color: primary(sky, 100);
  }

}

/*------------------------------------*\
  Card Multi in Product
\*------------------------------------*/
.c-carousel--value-points {
  .c-card {
    border: 1px solid primary(night, 10);
    margin: remify(32px) 0 ;
    @include shadow(high);
  }
}

/*------------------------------------*
  Art responsive
*------------------------------------*/
.c-card--responsive {
  padding: 0;
  box-shadow: none;
  overflow: hidden;

   @include min-screen(bp(tablet)) {
    display: flex;
    flex-wrap: wrap;
   }

  .c-card__image {
    flex: 0 0 325px;
  }

  img {
    width: 100%;

    @include min-screen(bp(phablet)) {
      width: auto;
    }
  }

  .c-card__content {
    padding: remify(24px);
    flex: 1;

    ul {
      margin-block: remify(16px);
    }

    p + p {
      margin-top: remify(16px);
    }

  }

  .title {
    @include font-scale(level-3);
    font-weight: fw(bold);
    margin-bottom: remify(4px);
  }

  * + .title {
    margin-top: remify(24px);
  }
  
  .c-card__footer {
    margin-top: remify(24px);
  }

}

URL: /components/raw/card/_card.scss
Filesystem Path: src/views/02-molecules/card/_card.scss
Size: 10.2 KB

Content:


                                (function($) {

  var cardCheck = $('.c-card--ticket label');

  $(cardCheck).click(function() {
    $(this).parents('.c-card__footer').toggleClass('c-card__footer--full');
  });
  
})(jQuery);

URL: /components/raw/card/card.js
Filesystem Path: src/views/02-molecules/card/card.js
Size: 193 Bytes

Handle: @card--multi
Preview:
- With layout
- Component only
Filesystem Path: src/views/02-molecules/card/card--multi.hbs
Referenced by (1): @product--pop

No notes defined.