How to add one rendering within another rendering in Sitecore SXA

Sitcore SXA's capabilities with regard to composing components/pages are unprecedented. Recently, I had a requirement to build a widget over a banner image. The end-result had to look like this:

As anyone who has worked in Sitecore, I could think of following options:

1. Ditch all wild imaginations of compos-ability and build one component probably forget Experience Editor(XPE) friendliness too in the process - more of a monolithic component although you might already have built banner and widget components separately

2. One component wherein there is a partial written to compose the other - some re-usability in the form of partial view 

3. Build individual components and compose them together with others when need-be but otherwise they act as individual components - most importantly XPE-friendly

I didn't want to go the first route since its the clumsiest and with regard to option 2, it is the most-used/beaten approach when it comes to Sitecore MVC. I also didn't want to miss on XPE compatibility. So, that is when I decided to think in lines of option 3.

Although I had built variant definition involving html tags and sections, it didn't occur to me that you could use that to compose components but with SXA this is so easy.

If you want to use this option, you need to select a base component variant from Site > Presentation and just add variant definition. I did one for Title and it was so simple. Just define a variant and compose with different components:

Needless to say, you can spice up with some html tagging around each of those components. Also, this example has the Title and ResponsiveImage both of which are inbuilt SXA components and then I added a custom component, which is the third one and this is what I got:

I loved the way the composed rendering inherited the XPE-friendliness of the original components. Some people might have reservations about creating this variant under Site > Presentation. In that case, you can create it as part of branch template so that the capability is not localised just to the Site > Presentation. 

Like anything in Sitecore, this is a feature to keep in your back pocket and unleash when need be.

Maybe I would sound like someone from stone-age but this is the advantage of variants: Keep re-usability of components pristine while improving usability or shelf-life. So, you can build something as variants of the same component using different types of compositions.

So, with variants in use, with some front-end markup in the form of divs/styles you could easily compose something like this from the earlier example:

Another example: Two components named billing (address) and payment information can be used to form two different variants (as below) and these two variants can be tested to check which one has a better reach so, the options are end-less with SXA component variants:

With variants it is all about delegating work to front-end and once you get the markup, it is about rearranging your components in various ways. 

Reference: https://doc.sitecore.com/xp/en/developers/sxa/18/sitecore-experience-accelerator/create-a-rendering-variant.html