hi there!
I saw the colabs header in the inspiration - i totally love this layout!
Does somebody know how this could be reached with webflow(relume)/css? '
https://library.relume.io/inspiration
the link goes to the inspiration page and the header.
Thanks in advance!
Hey mate! I'd probably use the component below and adjust padding around the image etc 🙂
Does that help?
I had to read this a couple of times to understand but I think I do now.
https://colabs.com.au/services/innovation-facilitation
The header here - how to do that.
I've done something similar in the past - its not the most fun thing to build to be honest.
Basically you have a normal hero image container with rounded corners.
Then you have an SVG that is transparent on the radius and white on the border. Here is their SVG code specifically so you can see what I mean.
<svg xmlns="<a target="_blank" rel="noopener noreferrer" href="http://www.w3.org/2000/svg">http://www.w3.org/2000/svg</a>" viewBox="0 0 100 100"><path d="m100,0H0v100C0,44.77,44.77,0,100,0Z" fill="#F9F8F6"></path></svg>And then you have a wrapper div for the buttons with a top right border radius and some padding.
What would you call this design style? I'm also interested in making slightly different shapes and am curious about how to recreate this in Figma/Webflow
yeah the trickiest part about this layout are the hidden SVGs that make up some of the "inner border radius" (see screenshot). But totally doable.
In figma, its mostly just using some masking.
here is a really quick figma file I just published to the Figma community, that you can start from.
https://www.figma.com/community/file/1311483683781630650/quick-hero-shapes
yeah, I technically ended up not even using a mask - I just created two squares, the same size, and made the top square have a border radius on one corner and then I subtracted the top square from the bottom square.
thanks for your answers! - will have a closer look on this, and let you know if i run into some issues!
