Pattern


Skew

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quis id beatae.

<div class="card">
  <img class="card-img-top" src="..." alt="">
  <div class="pattern">
    <div class="pattern-attached text-white pb-10">
      <!-- ./pattern/skew/skew-bottom-1.svg -->
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2440 70" preserveAspectRatio="none">
        <polygon points="0,0 0,70 2440,70" fill="currentColor"/>
      </svg>
    </div>
  </div>
  <div class="card-body pt-4">
    <h2 class="card-title mb-4">Card title</h2>
    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quis id beatae.</p>
  </div>
</div>

Vertical skew

Lorem, ipsum.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, aut!

Lorem, ipsum.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, aut!

<!-- Pattern added to the left side of an image -->
<div class="row bg-primary-light">
  <div class="col-lg-6 my-auto">
    <h1>Lorem, ipsum.</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, aut!</p>
  </div>
  <div class="col-lg-6 py-40" style="background: url(./img/spacex.jpeg); background-size: cover;">
    <div class="pattern pattern-v-left pr-20">
      <div class="pattern-attached text-primary-light">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2440 70" preserveAspectRatio="none">
          <polygon points="0,0 0,70 2440,0" fill="currentColor"></polygon>
        </svg>
      </div>
    </div>
  </div>
</div>

<!-- Pattern added to the right side of an image -->
<div class="row bg-success-light">
  <div class="col-lg-6 py-40" style="background: url(./img/spacex.jpeg); background-size: cover;">
    <div class="pattern pattern-v-right pr-20">
      <div class="pattern-attached text-success-light">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2440 70" preserveAspectRatio="none">
          <polygon points="0,0 2440,0 2440,70" fill="currentColor"></polygon>
        </svg>
      </div>
    </div>
  </div>
  <div class="col-lg-6 my-auto">
    <h1>Lorem, ipsum.</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nulla, aut!</p>
  </div>
</div>

Wave

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quis id beatae.

<div class="card">
  <img class="card-img-top" src="..." alt="">
  <div class="pattern">
    <div class="pattern-attached text-white pb-6">
      <!-- ./pattern/wave/wave-up.svg -->
      <svg>...</svg>
    </div>
  </div>
  <div class="card-body pt-5">
    <h2 class="card-title mb-4">Card title</h2>
    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quis id beatae.</p>
  </div>
</div>

Wave down

Wave up

<div class="bg-primary-light py-10"></div>
<div class="pattern">
  <div class="pattern-attached bg-white text-primary-light pb-12">
    <!-- Include inline: ./pattern/wave/wave-down.svg -->
    <svg>...</svg>
  </div>
</div>
 
<div class="pattern">
  <div class="pattern-attached pattern-attached-top bg-success-light text-white pb-12">
    <!-- Include inline: ./pattern/wave/wave-up.svg -->
    <svg>...</svg>
  </div>
</div>
<div class="bg-success-light py-10"></div>

Blob

<div class="pattern">
  <div class="pattern-item right-0 bottom-0 mr-n20 mb-n20 text-success-light" style="height: 200px; width: 200px;">
    <!-- Include inline: ./img/blob/blob-1.svg -->
    <svg>...</svg>
  </div>
  <img class="img-fluid position-relative" src="./img/porsche.jpeg" alt="">
</div>

Dots

<div class="row">
  <div class="col-md-4 mt-12">
    <div class="pattern">
      <div class="pattern-item top-0 right-0 mr-n16 mt-n16 text-danger">
        <!-- Include inline: ./pattern/dots/dots-1.svg -->
        <svg>...</svg>
      </div>
      <img class="img-fluid" src="./img/porsche.jpeg" alt="">
    </div>
  </div>
  <div class="col-md-4 offset-md-1 mt-12">
    <div class="pattern">
      <div class="pattern-item top-0 right-0 mr-n16 mt-n16 text-success">
        <!-- Include inline: ./pattern/dots/dots-2.svg -->
        <svg>...</svg>
      </div>
      <img class="img-fluid position-relative" src="./img/header.jpg" alt="">
    </div>
  </div>
</div>