design.stjude.cloud

Wavy Section Svg 

<div class=" bg-primary py-5 wavy-container">
    <div class="container">
        <div class="col-12">
            <h1 class="text-white">This is a wavy container!</h1>
            <p class="text-white">Go ahead and resize your window, you'll notice the wavy shape resizes with the size of the window width. You can change the color of the shape just by changing the <code class="text-white">`background-color: $variable`</code>.</p>
        </div>
    </div>
    <div class="wavy-bottom"></div>
</div>
  • Content: 
    // Wavy Section Shape MIXIN
@mixin wavy-bottom($shape-color: $primary) {
  background-color: $shape-color;
  bottom: -199px;
  mask: url("#{$stjude-images-path}/bottom-shape.svg") no-repeat;
  -webkit-mask: url("#{$stjude-images-path}/bottom-shape.svg") no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-type: alpha;
  -webkit-mask-type: alpha;
  min-height: 200px;
  position: absolute;
  width: 100%;

  @include media-breakpoint-up(xl) {
    mask-size: cover;
    -webkit-mask-size: cover;
  }
}


// Wavy SCSS
.wavy-container {
  position: relative; // This allows the wavy SVG shape to sit at the bottom of, and be the entire width of the container.

  .wavy-bottom {
    @include wavy-bottom($primary); // just change the color variable to match that of the container above.
  }
}
  • URL: /components/raw/wavy-section-svg/wavy.scss
  • Filesystem Path: components/wavy-section-svg/wavy.scss
  • Size: 807 Bytes

No notes defined.