Back

updated — june 10

code component

code component

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Display Grid

new

This code component allows you to use 4 different display styles resulting in multiple different grid layout patterns. Combined with Framer's 3D Transform properties and the Mask styles you can achieve some interesting perspective planes as you can see in the example on the left side. Best part is that it's fully responsive, meaning the spacing will adjust based on the width/height of the component.

Display Grid

This code component allows you to use 4 different display styles resulting in multiple different grid layout patterns. Combined with Framer's 3D Transform properties and the Mask styles you can achieve some interesting perspective planes as you can see in the example on the left side. Best part is that it's fully responsive, meaning the spacing will adjust based on the width/height of the component.

Adjustable properties

Fully responsive

Show/Hide rows and columns

Hide outter edges

Adjustable row & columns amount

Thickness

Color

Adjustable properties

Fully responsive

Show/Hide rows and columns

Hide outter edges

Adjustable row & columns amount

Thickness

Color

How do I use it?

You need to copy the component and then simply paste it in your Framer project. It will automatically import and appear in your left sidebar in the Assets tab under components - Eleveight Supply folder. From there you can drag it into your canvas for a new instance.

How do I use it?

You need to copy the component and then simply paste it in your Framer project. It will automatically import and appear in your left sidebar in the Assets tab under components - Eleveight Supply folder. From there you can drag it into your canvas for a new instance.

Get notified

Stay updated with the newest additions to our digital assets library, upcoming promotions or discounts.

A product by

made by Fabian Albert.

© 2024 - Eleveight Supply™

Follow us on x.com

Get notified

Stay updated with the newest additions to our digital assets library, upcoming promotions or discounts.

A product by

made by Fabian Albert.

Follow us on x.com

© 2024 - Eleveight Supply™

Get notified

Stay updated with the newest additions to our digital assets library, upcoming promotions or discounts.

A product by

made by Fabian Albert.

© 2024 - Eleveight Supply™

Follow us on x.com