Self-coloring dashboard cards

I had a lot of fun designing these little fellas. Or should I say fella? It's actually one component fed with six different combinations of icons, content and props.

As usual, these were shot in the browser. What's interesting about this component from BB-Team's design system is it can be re-colored using a single prop: the developer simply has to pass a color property for the whole card and the two types of buttons + the stripe re-color themselves.

Initially, this happened quite accidentally: I was building the surface area for coloring the stripe and passing icons when I realized the buttons are adapting to their parents' props automatically. One of those moments when having a proper atomic design structure makes you smile. 😎

PS: I'm aware some of those buttons don't have proper contrast ratings, the final version is updated to reflect that.