Choose a layout
Font family

Boxes

A full width background box container that highlights on hover

Report an Issue

Table of contents

  • Frankternity

    The HTML port of Aceternity UI

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-boxes.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.

CSS variables

All CSS variables prefixed with --ft-* can be used to customize layout, spacing, colors, and sizing of this component.

Container

VariableDefaultDescription
--ft-border-colorvar(--color-slate-700)Border color of the grid