We aim to introduce a small helper component to our design system that enables content to be aligned with each other. We have observed that, for instance, when combining an avatar with content such as text, these elements are often not properly aligned. Currently, developers need to address this manually.
To support developers, we want to introduce the Align component. This component will allow content, such as text, to be automatically arranged with the correct spacing and alignment.
During implementation, it needs to be clarified which component combinations should initially be supported by the Align component and which props are necessary to ensure simple and effective usage.
Description
We aim to introduce a small helper component to our design system that enables content to be aligned with each other. We have observed that, for instance, when combining an avatar with content such as text, these elements are often not properly aligned. Currently, developers need to address this manually.
To support developers, we want to introduce the Align component. This component will allow content, such as text, to be automatically arranged with the correct spacing and alignment.
During implementation, it needs to be clarified which component combinations should initially be supported by the Align component and which props are necessary to ensure simple and effective usage.
Possible Use Cases
Token
--align-spacing: var(--size-s);