Pseudo Product Flags

For a recent client Project I had to create Product Flags that are displayed at the top of each product. The Flags should have different colors and different values (which also have different lengths). The values are applied via the data Attribute and the colors are also controlled via a data Attribute. The “Problem” with this task was that it’s not only a few different length, it’s a multi-language system and therefore can end up in a lot of different width of the product flags - a “fixed” solution, like applying a max-width of let’s say 20em, isn’t the best solution for this so I ended up creating a flexible solution.