About this block

Line Ribbon is a product hero built around a drawing. Under a transparent navbar, a band of fine strands twists across the page, bunching where it turns edge on and pinching to a point where the brand mark sits on a small capsule node inside a hairline orbit. Three mono callouts hang off dots on the band by leader lines, naming what the product brings together.

Below the art the headline sits on the left, and the lede and two pills sit on the right, starting on the headline's first line. A hairline logo strip with real customer marks closes the hero. The ribbon is generated in the file from three splines, so it is code rather than an image: it scales cleanly, follows the foreground token in light and dark, and fades out at both ends.

When to use

Use it for a product whose value is hard to screenshot, such as a model, an engine or a way of thinking, where a confident abstract image says more than a dashboard would. The callouts let you name the three ideas the product joins without writing a feature list into the hero.

A natural flow around it on a Modern SaaS page:

Before

• Nothing. It carries its own navbar, so it opens the page.

After

• Feature Sections to turn the three callouts into real capabilities
• Testimonials to let the teams in the logo strip speak

What you can customize

• The ribbon. Reshape it with the CENTER, HALF and TWIST control points (center line, half width and twist along x), and change the strand count with STRANDS. The node sits wherever NODE_X points.
• Callouts. Each entry in callouts names a label, a point on the band, a leader length and the side it hangs to. They hide below md, where the art is too small to carry them.
• Copy, actions and logos. Rewrite the headline and lede, point the pills at your flows, and swap the logo strip for your own customers' marks.

Tip: place the node where HALF is smallest. A band that pinches to a point behind the mark reads as one thread passing through it.