Tools

Hero builder

Fill in the content, pick a photo, and copy the markup for any of the eight hero variations — three band surfaces with the standard photo layer or the duotone gradient map, plus two plain compositions carried by the signature motif alone.

Eyebrow

Headline

Body copy

Button label (optional — empty for no button)

Button link

Secondary button label (optional)

Secondary button link

Photo

Choose a photo… none chosen — using the demo photo

Photo URL for the copied code

A chosen file previews instantly but lives only in this browser tab. Host the photo with your site and put its path here — the copied code uses this value, and it drives the preview when no file is chosen. Use a site-root-relative or absolute path (e.g. /magma/img/hero.jpg): a relative path inside --icl-hero-image resolves against the design-system stylesheet, not against your page.

Content image (optional — e.g. a publication cover; shows in the body slot, copy to its right)

Choose an image… none chosen

Content image URL for the copied code

Content image alt text

Theme

Preview

The eight variations

Click a panel to see it at hero scale — the panels sit below the 48rem container threshold (quiet card treatment), the modal above it (feature strength). Copy buttons give the full section markup.