Community forum for knowledge and support

Updated last year

Reaching the Colabs Header Layout in Webflow/CSS

At a glance

The community member posted about a header layout they saw on the Relume inspiration page and asked how to achieve a similar look using Webflow or CSS. Other community members provided suggestions, including using an SVG with a transparent border radius and a wrapper div with a top right border radius. They discussed the design style and how to recreate it in Figma and Webflow, with one community member sharing a Figma file as a starting point. There was no explicitly marked answer, but the community members provided helpful guidance on how to approach the design.

Useful resources

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!

1
K
M
W
8 comments

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.

In other words, its totally doable - try it out, pop back in here if you run into issues trying to get it to work.

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

Ok this is just what I was looking for--thank you!

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!

Add a reply
Sign up and join the conversation on Slack