Shapes

Goodkit Exclusive

Responsive shape component.

There are a number of ways to control the appearance of the shape component:

  • The color of the shape can be controled with the .text- utility classes (e.g. <div class="shape ... text-white">...</div>). The default value is currentColor.
  • The angle of the shape can be controlled with the responsive padding utility classes (e.g. <div class="shape-img pb-5">...</div>). The more the padding value the steeper the angle. The default value is 0.
  • The size of the colored area below (above) the shape is also controlled with the responsive padding utility classes (e.g. <div class="shape ... pb-9 pb-md-15">...</div>). The more the padding value the higher the colored area is. The default value is 0.
  • The vertical direction of the shape is controlled with the .shape-top and .shape-bottom classes.
  • The horizontal direction of the shape is controlled with the corresponding SVG images:
    • {{> angles/angle-top-end}}
    • {{> angles/angle-top-start}}
    • {{> angles/angle-bottom-end}}
    • {{> angles/angle-bottom-start}}
...

Build a culture where everyone designs.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.

<div class="position-relative">
  <div class="shape shape-fluid-x shape-top text-white pb-3">
    <div class="shape-img pb-5">
      {{> angles/angle-top-end}}
    </div>
  </div>
</div>