Implement Badge related components

[aurelticot]

Implement the components displaying the Badge and list of Badges (hexagonal mosaic, ...).

[cmcWebCode40]

@aurelticot ,

after I have done some research on how to implement the hexagon shape with a border-radius, that will accept an image (badge)

• I was unable to generate a clip-path-only shape with a border-radius
• It is possible to create this shape using the CSS pseudo selectors but it has a downside I find it difficult to easily clip an image into the filled border.

I think a better approach to this is to use the SVG tag directly in the markup to get the exact shape.

I found a solution for the SVG on StackOverflow but seems like the use of the image tag has been deprecated according to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/image

see commit

I will look up a modern way to add an image to an SVG

here is a link to stack overflow where similar questions were asked
https://stackoverflow.com/questions/48500945/how-can-you-join-css-hexagon-elements-in-a-custom-layout

i have not implemented the honeycomb grid yet.