Novicell Frontend

Primary Boxes 

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-4">
            <!--  
SVG DUOTONE FILTERS
1. feColorMatrix to grayscale the image 
2. feComponentTransfer to calculate the RGB values of the two colors in the gradient map
   ex: #01283c == R(1) G(40) B(60). Divide each RGB value by 255 to get the matrix value

   <feFuncR type="table" tableValues="(1/255 = 0.003921568627) 0.007843137255"></feFuncR>
   <feFuncG type="table" tableValues="(40/255 = 0.1568627451) 0.3803921569"></feFuncG>
   <feFuncB type="table" tableValues="(60/255 = 0.2352941176) 0.5725490196"></feFuncB>
   <feFuncA type="table" tableValues="0 1"></feFuncA>
-->
            <article class="box-image-duotone">
                <svg class="duotone-filters" xmlns="http://www.w3.org/2000/svg">	
        <filter id="duotone_1" class="duotone-filter" data-light-color="#B3153E" data-dark-color="#c0e3de">
            <feColorMatrix type="matrix"  result="gray" values="
                    1 0 0 0 0
                    1 0 0 0 0
                    1 0 0 0 0
                    0 0 0 1 0">
            </feColorMatrix>

            <feComponentTransfer class="duotone-color-change" color-interpolation-filters="sRGB" result="duotone">
                <feFuncR class="duotone-red" type="table" tableValues=""></feFuncR>
                <feFuncG class="duotone-green" type="table" tableValues=""></feFuncG>
                <feFuncB class="duotone-blue" type="table" tableValues=""></feFuncB>
                <feFuncA type="table" tableValues="0 1"></feFuncA>
            </feComponentTransfer>
        </filter>
    </svg>
                <div class="box-image-duotone__image-container">
                    <div class="box-image-duotone__image" style="background-image: url(https://images.unsplash.com/photo-1498206005704-36d87df55231?ixlib&#x3D;rb-0.3.5&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;s&#x3D;f85ad7268a727c31aae1ac78ef399677&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1986&amp;q&#x3D;80); filter: url(#duotone_1);"></div>
                    <div class="box-image__content">
                        <h2 class="heading heading--column ">Column header</h2>

                        <p>Box Image Duotone content.</p>
                    </div>
                </div>
            </article>

        </div>
        <div class="col-xs-12 col-sm-4">
            <!--  
SVG DUOTONE FILTERS
1. feColorMatrix to grayscale the image 
2. feComponentTransfer to calculate the RGB values of the two colors in the gradient map
   ex: #01283c == R(1) G(40) B(60). Divide each RGB value by 255 to get the matrix value

   <feFuncR type="table" tableValues="(1/255 = 0.003921568627) 0.007843137255"></feFuncR>
   <feFuncG type="table" tableValues="(40/255 = 0.1568627451) 0.3803921569"></feFuncG>
   <feFuncB type="table" tableValues="(60/255 = 0.2352941176) 0.5725490196"></feFuncB>
   <feFuncA type="table" tableValues="0 1"></feFuncA>
-->
            <article class="box-image-duotone">
                <svg class="duotone-filters" xmlns="http://www.w3.org/2000/svg">	
        <filter id="duotone_2" class="duotone-filter" data-light-color="#510035" data-dark-color="#c0e3de">
            <feColorMatrix type="matrix"  result="gray" values="
                    1 0 0 0 0
                    1 0 0 0 0
                    1 0 0 0 0
                    0 0 0 1 0">
            </feColorMatrix>

            <feComponentTransfer class="duotone-color-change" color-interpolation-filters="sRGB" result="duotone">
                <feFuncR class="duotone-red" type="table" tableValues=""></feFuncR>
                <feFuncG class="duotone-green" type="table" tableValues=""></feFuncG>
                <feFuncB class="duotone-blue" type="table" tableValues=""></feFuncB>
                <feFuncA type="table" tableValues="0 1"></feFuncA>
            </feComponentTransfer>
        </filter>
    </svg>
                <div class="box-image-duotone__image-container">
                    <div class="box-image-duotone__image" style="background-image: url(/dist/images/placeholder-images/hero--mona-eendra-313518.jpg); filter: url(#duotone_2);"></div>
                    <div class="box-image__content">
                        <h2 class="heading heading--column ">Column header</h2>

                        <p>Box Image Duotone content.</p>
                    </div>
                </div>
            </article>

        </div>
        <div class="col-xs-12 col-sm-4">
            <!--  
SVG DUOTONE FILTERS
1. feColorMatrix to grayscale the image 
2. feComponentTransfer to calculate the RGB values of the two colors in the gradient map
   ex: #01283c == R(1) G(40) B(60). Divide each RGB value by 255 to get the matrix value

   <feFuncR type="table" tableValues="(1/255 = 0.003921568627) 0.007843137255"></feFuncR>
   <feFuncG type="table" tableValues="(40/255 = 0.1568627451) 0.3803921569"></feFuncG>
   <feFuncB type="table" tableValues="(60/255 = 0.2352941176) 0.5725490196"></feFuncB>
   <feFuncA type="table" tableValues="0 1"></feFuncA>
-->
            <article class="box-image-duotone">
                <svg class="duotone-filters" xmlns="http://www.w3.org/2000/svg">	
        <filter id="duotone_3" class="duotone-filter" data-light-color="#A0113B" data-dark-color="#d7d7d7">
            <feColorMatrix type="matrix"  result="gray" values="
                    1 0 0 0 0
                    1 0 0 0 0
                    1 0 0 0 0
                    0 0 0 1 0">
            </feColorMatrix>

            <feComponentTransfer class="duotone-color-change" color-interpolation-filters="sRGB" result="duotone">
                <feFuncR class="duotone-red" type="table" tableValues=""></feFuncR>
                <feFuncG class="duotone-green" type="table" tableValues=""></feFuncG>
                <feFuncB class="duotone-blue" type="table" tableValues=""></feFuncB>
                <feFuncA type="table" tableValues="0 1"></feFuncA>
            </feComponentTransfer>
        </filter>
    </svg>
                <div class="box-image-duotone__image-container">
                    <div class="box-image-duotone__image" style="background-image: url(https://images.unsplash.com/photo-1483125078247-1a358ff363d3?ixlib&#x3D;rb-0.3.5&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;s&#x3D;63dd38e6be26093f5a96e80e4ceabf24&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1950&amp;q&#x3D;80); filter: url(#duotone_3);"></div>
                    <div class="box-image__content">
                        <h2 class="heading heading--column ">Column header</h2>

                        <p>Box Image Duotone content.</p>
                    </div>
                </div>
            </article>

        </div>
    </div>
</div>
 
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-4">
            {{ render '@box-image-duotone' duotone1 }}
        </div>
        <div class="col-xs-12 col-sm-4">
            {{ render '@box-image-duotone' duotone2  }}
        </div>
        <div class="col-xs-12 col-sm-4">
            {{ render '@box-image-duotone' duotone3 }}
        </div>
    </div>
</div>
 
{
  "duotone1": {
    "heading": {
      "text": "Box Image Duotone"
    },
    "boxImage": {
      "url": "https://images.unsplash.com/photo-1498206005704-36d87df55231?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f85ad7268a727c31aae1ac78ef399677&auto=format&fit=crop&w=1986&q=80",
      "content": "Box Image Duotone content.",
      "filter": {
        "id": "1",
        "colorLight": "#B3153E",
        "colorDark": "#c0e3de"
      }
    }
  },
  "duotone2": {
    "heading": {
      "text": "Box Image Duotone"
    },
    "boxImage": {
      "url": "/dist/images/placeholder-images/hero--mona-eendra-313518.jpg",
      "content": "Box Image Duotone content.",
      "filter": {
        "id": "2",
        "colorLight": "#510035",
        "colorDark": "#c0e3de"
      }
    }
  },
  "duotone3": {
    "heading": {
      "text": "Box Image Duotone"
    },
    "boxImage": {
      "url": "https://images.unsplash.com/photo-1483125078247-1a358ff363d3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=63dd38e6be26093f5a96e80e4ceabf24&auto=format&fit=crop&w=1950&q=80",
      "content": "Box Image Duotone content.",
      "filter": {
        "id": "3",
        "colorLight": "#A0113B",
        "colorDark": "#d7d7d7"
      }
    }
  }
}

There are no notes for this item.