I’m working on a multi-brand design system with one shared component library. My header component is also located in this library. My goal is to be able to change the logo in this header since it is going to be used for multiple brands.
I have made another component which holds the logo’s of all the different brands. This logo component is nested in my header component.
However, when I change the logo variant it keeps sticking to the aspect ratio of the default property.
I do not prefer to make a header component for each different website since that breaks my main library. Is there a way around to achieve this goal?
In your example the component adapts to the size of the parent component.
in my case i was a looking for an answer so the component adapts to the space provided in the header.
actually the other way around.
for example:
in the header i provide a container
in the container i set the component height to fill container, the width to hug.
in my perception the component should scale with the aspect ratio of the parent component.
The height provided in the header is set, but the width varies because the aspect ratio of the main components are different.
i tried several ways, but can’t get it to work so the component automatically adapts to the space provided.
The way I worked around this was to make sure all of the logos are in an auto layout frame set to hug - then nested in a fixed width frame that lives in the header. I like this route bc you can set it up so swapping logos doesn’t change the height or spacing in the header.