Arbitrary props or styles for structural components

[robcostello1]

In our designs, our sections are divided by graphics like the following:

In case that's difficult to see there's a sweeping graphic at the transition point between the two background colours.

We could define our own sections but then there would be two sections and our content editors would have to nest sections within sections, which is confusing.

Ideally we'd like to be able to use our own section component in place of the existing structural component, or to be able to configure the structural component how we see fit. Maybe it would be possible to configure a "variant" variable (or any arbitrary variables) to apply these styles, through the options argument in defineComponents.

And/or the ability to pass in our own replacement components (based on a strict schema) as an option?

[primeinteger]

Hey @robcostello1, my apologies for the delayed response.

Where the sweeping graphics merges the two sections together, would it be possible to add a small section there that contains only the bottom slice of the sweeping graphic as an image? Something like this is what I have in mind to help illustrate:

If the sweeping graphic was a PNG of just the white curved portion and the rest of the PNG was transparent (where the squiggly line is), then you could fill in the gray area with Background Color. Would something like that work for you here?

It might also be something that could be saved as a Pattern to make it easier to reuse on multiple Experiences.

Let me know what you think. Thanks!

[elylucas]

@robcostello1 to add another idea on top of the one above, could you have one top level section and add all your components into that one?