The figma spec linked in the description says that the file is not found (perhaps it needs to be made public?)

Hi @Sgs! Thanks for sharing your use case. We had doubts regarding the need to incorporate this component into Codex. I originally thought that this could be introduced as a styled, reusable <hr> element. Nevertheless, like in the example you shared, these "dividers" are actually implemented as border in most cases (e.g. Wikipedia titles). A far as I can see, we have three alternatives:

1. Do not abstract dividers to Codex and instead use individual design tokens to properly style these borders in context
2. Create and distribute a "divider" mixin with all needed styles that apply to the border (border: 1px solid @border-color, width: 100%)
3. Introduce an <hr> divider component to Codex (Some examples from other libraries: Google's Material UI, Microsoft's Fluent UI, Adobe's Spectrum, Elastic UI– please excuse the Reactness).

Of course, moving forward with the last alternative would involve changing the current implementation approach. It would be great to hear your opinion on what sounds more convenient for the Growth team. Would also like to hear what @Catrope, @AnneT and @Volker_E would have to say.

Thanks @Sarai-WMDE, the alternatives rundown makes sense to me.
Additionally I don't see any of these as mutually exclusive. Creating 2. could also be applied to most cases in 1. for example. A divider mixin might make sense in general IMO as soon as we identify two use cases in different components.
And 3. I'd defer to introduce right now, as it's low priority, but for page structure semantics we might want to pick it up in future again.

Thanks for breakdown @Sarai-WMDE. In the implementation of the mentor dashboard with Vue ( gerrit 778997 ) I have created a HorizontalDivider component because it made sense to me. It's not polished for a generic use, I did the MVP to fit my case.

As @Volker_E mentions I find alternatives (2) and (3) interesting to explore. Also if they are developed in order Growth team could use the mixin in instead of ad-hoc styles until the final component is created so our code is already "in-sync".

Personally I like the flexibility and options Google's Material and Elastic UI provide. If there's a Figma spec or even some draft to follow I can happily work on this.

Hey Sergio. That sounds really good in my opinion, but I should get back at the Design system team for alignment in order to provide a uniform answer. Will do that asap.

We do have draft design specifications for the Divider component (the Figma file is linked in the task description), but these are still pending to be reviewed by the team.