Shapes

Landkit only

Multiple shapes to use as separators for sections or as background images.

Curves

Smooth curves that can be used at the top, bottom or right side of an element. Use text color utilities to control their coloring.

...
...
...
...
...
... 
<div class="shape shape-bottom shape-fluid-x text-white">
  {{> curves/curve-1}}
</div>

<div class="shape shape-bottom shape-fluid-x text-white">
  {{> curves/curve-2}}
</div>

<div class="shape shape-bottom shape-fluid-x text-white">
  {{> curves/curve-3}}
</div>

<div class="shape shape-bottom shape-fluid-x text-white">
  {{> curves/curve-6}}
</div>

<div class="shape shape-end shape-fluid-y text-white">
  {{> curves/curve-4}}
</div>

<div class="shape shape-start shape-fluid-y text-white">
  {{> curves/curve-5}}
</div>

Wave

Wave shape that can be used at the top of an element.

... 
<div class="shape shape-top shape-fluid-x text-white">
  {{> waves/wave-1}}
</div>

Angles

Angle shapes that can be used at the top, right, bottom, and left sides of an element.

...
...
...
...
...
... 
<div class="shape shape-top shape-fluid-x text-white">
  {{> angles/angle-top}}
</div>

<div class="shape shape-top shape-fluid-x shape-flip-x text-white">
  {{> angles/angle-top}}
</div>

<div class="shape shape-bottom shape-fluid-x text-white">
  {{> angles/angle-bottom}}
</div>

<div class="shape shape-bottom shape-fluid-x shape-flip-x text-white">
  {{> angles/angle-bottom}}
</div>

<div class="shape shape-end shape-fluid-y text-white">
  {{> angles/angle-end}}
</div>

<div class="shape shape-start shape-fluid-y text-white">
  {{> angles/angle-start}}
</div>

Blurs

Blur shapes that can be used as background images for elements.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque reprehenderit rem veniam accusamus mollitia minus esse, aut voluptates provident, labore ab, eos vel nemo error cum similique nulla dignissimos animi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque reprehenderit rem veniam accusamus mollitia minus esse, aut voluptates provident, labore ab, eos vel nemo error cum similique nulla dignissimos animi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque reprehenderit rem veniam accusamus mollitia minus esse, aut voluptates provident, labore ab, eos vel nemo error cum similique nulla dignissimos animi.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque reprehenderit rem veniam accusamus mollitia minus esse, aut voluptates provident, labore ab, eos vel nemo error cum similique nulla dignissimos animi. 

<div class="shape shape-blur-1 text-gray-200">
  {{> blurs/blur-1}}
</div>

<div class="shape shape-blur-2 text-gray-200">
  {{> blurs/blur-2}}
</div>

<div class="shape shape-top shape-fluid-x text-dark">
  {{> blurs/blur-3}}
</div>

<div class="shape shape-blur-4 text-gray-200">
  {{> blurs/blur-4}}
</div>

Creating New Shapes

You can create new shapes easily by exporting an SVG from your preferred editor (Sketch, Figma, etc.), but you will have to make a handful of modifications for the shape to work:

  • Remove the width and height attributes
  • Add preserveAspectRatio="none" to the top level svg element
  • Replace all fill values that aren't "none" with "currentColor"

A few other important things to note...

  • Make sure your vector points line up on whole pixels in your design tool
  • Make sure your Artboard/Frame is setup on whole pixels
Jump to