Shape Block

Use Shape with a clear purpose

Decorative shapes with theme colors. This guide covers the settings exposed by the current LunaSites block, the Style Panel areas that can be customized, and the checks that keep the result dependable across breakpoints.

Add a Shape

1. Open Add block and choose Shape from the Decorative category.

2. Start with the content or data source and confirm that the block communicates one clear role.

3. Configure layout and behavior before applying local visual overrides.

4. Use the Style Panel only for intentional block-specific differences; reuse a preset when the same treatment appears repeatedly.

5. Preview the real result at desktop, tablet, and mobile widths, including hover, focus, active, empty, and error states when relevant.

Configure the Shape

Shape Settings

Shape The default is rectangle. Stretch The default is false. Rotation The default is 0. Fade Style The default is none. Fade Strength The default is 50.

Additional settings

Custom Shape Path The default is . [REVIEW] THIS IS WIERD FROM NOW ON REMOVE THIS KIND OF FORMULATION

[REVIEW] ADD PHOTO AND EXPLAIN AVAILABLE AND CUSTOM SHAPES

[REVIEW] EXPLAIN THAT YOU CAN USE GROUPS AND USE SHAPE AS A BACKGROUND TO MAKE A CARD

INSERT A SECTION WITH THIS KIND OF EXAMPLE

Style Panel

The available styling areas are Block. Complete the default state first, then add hover or active differences only where the target supports them. Keep text, borders, controls, and bounded surfaces readable against the effective page background.

Responsive behavior

Shape is a grid-section block using the frame-driven sizing model with a documented starting frame of 5 columns by 4 rows. Author the desktop composition first, then tune tablet and mobile only where automatic reflow does not preserve hierarchy.

Tips & tricks

1. Use the block to support hierarchy, never as the only carrier of meaning.

2. Keep decorative contrast restrained so content remains dominant.

3. Check that the effect does not create clipping or horizontal overflow.

4. Test the shortest, longest, empty, and most complex realistic content before considering the design finished.

Accessibility checklist

• Give every meaningful control, image, region, or data value an understandable name or text alternative.

• Preserve keyboard access, visible focus, logical reading order, and sufficient contrast.

• Do not rely on color, motion, shape, or position alone to communicate meaning.

• Check reduced-motion preferences and mobile touch targets whenever the block is interactive.

Common mistakes

• Styling before the content, source, and behavior are correct.

• Oversized frames, accidental empty space, weak contrast, or missing responsive checks.

• Adding decorative or interactive complexity without a clear visitor benefit.

Quick recipe

Add one Shape, use the documented defaults as a starting point, replace them with real content, refine only the necessary settings, then verify the rendered block at all three responsive breakpoints.