Choose a layout
Font family

Beams

Multiple background beams that follow a path of SVG, makes a good hero section background.

Report an Issue

Table of contents

  • Join the waitlist

    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro, repellat officiis.

PR

Installation

To install, just include the following JavaScript somewhere on your page: 

<!-- Load the core file first -->
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/ft-core.iife.js"
></script>


<!-- Load the component -->
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/ft/bg-beams.iife.js"
></script>

Important notes

  • Make sure your project is using either Frankenstyle or FrankenstyleKit.
  • The order of JavaScript loading is important. The ft-core.iife.js file must be loaded before any other components.
  • When using multiple Frankternity components, the core file only needs to be loaded once.

Props

To pass props, include them as JSON inside a <script> tag with the data-fn="props" attribute.

Note The data-ft-* attribute determines which Frankternity component is mounted and should be replaced with the component name.

Prop NameTypeDefaultDescription
classNamestringAdditional CSS classes to be applied to the outer container.
stlobject{}Additional inline styles to be applied to the outer container.