Fractal Starter
Project version : 0.1.2
<div class="block-cart" id="cartSummary">
    <ul class="lst__unstyled">
        <li>Modeld Barre Led RVB Ayrton 150</li>
        <li>Modeld Barre Led RVB Ayrton 150</li>
        <li></li>

        <span>et 7 autres produits...</span>
    </ul>

    <a href="#" class="button  button--rounded button--black button--full-width">Finaliser mon devis</a>

</div>
<div class="block-cart" id="cartSummary">
   <ul class="lst__unstyled">
      <li>{{block_cart.articles.0.title}}</li>
      <li>{{block_cart.articles.1.title}}</li>
      <li>{{block_cart.articles.2.title}}</li>

      <span>et 7 autres produits...</span>
   </ul>

   <a href="#" class="button  button--rounded button--black button--full-width">Finaliser mon devis</a>

</div>
{
  "block_cart": {
    "total_product": 2,
    "articles": [
      {
        "title": "Modeld Barre Led RVB Ayrton 150"
      },
      {
        "title": "Modeld Barre Led RVB Ayrton 150"
      }
    ]
  }
}
  • Content:
    .block-cart {
       position: relative;
       padding: $margin-s;
       border-radius: $border-radius-block;
       box-shadow: 0 2px 16px 0 rgba(0,0,0,0.2);
       font-family: $font-primary;
       background: $c-white;
       max-width: 300px;
       margin-top: 13px;
    
       &::after {
          content: '';
          @include absPosition($top: -8px, $right: false, $bottom: false, $left: 50%);
          margin-left: -13px;
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 13px 8px 13px;
          border-color: transparent transparent $c-white; 
       }
    
       & > ul {
          & > li {
             display: block;
             color: $c-font-color;
             text-decoration: none;
             text-transform: uppercase;
             font-family: $font-secondary;
             font-size: rem(16);
             line-height: 1;
             border-bottom: 2px solid $c-background-light;
             padding: $margin-m $margin-s;
          }
       }
    
       span {
          display: block;
          padding: $margin-s $margin-s $margin-m;
          font-size: rem(16);
          font-family: $font-secondary;
          color: $c-gray-60;
       }
    
       .button {
          font-family: $font-secondary;
          font-size: rem(16);
          font-weight: 700;
          border-radius: 5px;
          margin-top: 0;
       }
    }
  • URL: /components/raw/block-cart/block-cart.scss
  • Filesystem Path: components/06-components/02-blocks/04-block-cart/block-cart.scss
  • Size: 1.2 KB

There are no notes for this item.