Blob decorations

How to position, scale and color decorative SVG elements.

Basic Usage

Blobs are provided through SVG embedded in Jumpstart's CSS and can be invoked by simply adding class blob blob-(1-5) to a div element.

You must add valid Bootstrap h-## and w-## utility classes to control the height and width of the blob.

Other utility classes such as bg-*, opacity-##, and positioning / transform classes can be added to further customize the blob color, shape and position. For more information, see the Utility Classes page.

<div class="position-relative min-vh-30 rounded o-hidden bg-primary-3">
    <div class="blob blob-1 w-50 h-50 bg-gradient"></div>
</div>
.blob

Add to a <div> to invoke a blob graphic

.blob-(1-5)

Add to <div.blob> to select the blob style

Note: Blobs have position: absolute; by default

Colors

<div class="row">
  <div class="col-3">
    <div class="position-relative min-vh-30 rounded o-hidden bg-primary-3">
      <div class="blob blob-1 w-75 h-75 bg-gradient top left"></div>
    </div>
  </div>
  <div class="col-3">
    <div class="position-relative min-vh-30 rounded o-hidden bg-primary-3">
      <div class="blob blob-2 w-75 h-75 bg-primary top right"></div>
    </div>
  </div>
  <div class="col-3">
    <div class="position-relative min-vh-30 rounded o-hidden bg-primary-3">
      <div class="blob blob-3 w-75 h-75 bg-primary-2 bottom right"></div>
    </div>
  </div>
  <div class="col-3">
    <div class="position-relative min-vh-30 rounded o-hidden bg-primary-3">
      <div class="blob blob-4 w-75 h-75 bg-white bottom left"></div>
    </div>
  </div>
</div>
.bg-primary

Apply to .blob element to color with Primary color

.bg-primary-2

Apply to .blob element to color with Primary-2 color

.bg-primary-3

Apply to .blob element to color with Primary-3 color

.bg-gradient

Apply to .blob element to color with a gradient color

For a full ist of available color classes, see the Utility Classes page.

Position

<div class="position-relative min-vh-30 rounded o-hidden bg-dark">
    <div class="blob blob-1 w-50 h-50 bg-gradient top left"></div>
    <div class="blob blob-2 w-50 h-50 bg-primary top right"></div>
    <div class="blob blob-3 w-50 h-50 bg-primary-2 bottom right"></div>
    <div class="blob blob-4 w-50 h-50 bg-white bottom left"></div>
</div>
.top

Apply to .decoration element to position at top of parent

.bottom

Apply to .decoration element to position at bottom of parent

.left

Apply to .decoration element to position at left of parent

.right

Apply to .decoration element to position at right of parent

Note: The parent of .blob elements should have position: relative; overflow: hidden; to display correctly. This can be achived by adding position-relative and o-hidden classes

Flip

Due to CSS structure, to flip a blob it must be wrapped in a position-absolute element. The transform-flip-(x/y) class must be applied to that element.

In this example, the first blob is in original position, while the second and third blobs are transformed.

<div class="row">
    <div class="col-3">
        <div class="position-relative min-vh-30 rounded o-hidden bg-primary-3">
            <div class="blob blob-1 w-75 h-75 bg-primary top left"></div>
        </div>
    </div>
    <div class="col-3">
        <div class="position-relative min-vh-30 rounded o-hidden bg-primary-3">
            <div class="h-100 w-100 position-absolute transform-flip-x">
                <div class="blob blob-1 w-75 h-75 bg-primary top left"></div>
            </div>
        </div>
    </div>
    <div class="col-3">
        <div class="position-relative min-vh-30 rounded o-hidden bg-primary-3">
            <div class="h-100 w-100 position-absolute transform-flip-y">
                <div class="blob blob-1 w-75 h-75 bg-primary top left"></div>
            </div>
        </div>
    </div>
</div>
.transform-flip-x

Apply to .blob element to flip on along its X axis

.transform-flip-y

Apply to .blob element to flip on along its Y axis