I made a little badge custom component.
Those who are interested, can download it here.
1 Like
This is awesome, was just playing around with it and thought it could use a padding option around the type maybe?
Also, link and hover colour would be cool 
Now this is funny : the developers are making suggestions to the users to expand and further develop components 
. Who would have thought that? But the suggestions are welcome. I’ll see what I can make of them. Of course, others are welcome to work on it as well if they want.
the hover colour option is in this new version
Badge CC 1.1
1 Like
Would also be cool if it had a dropzone for an SVG so you could use an icon for the content of the badge.
New version with Alignment and padding option for the badge added.
2 Likes
Wow, Bart is flying with these components!
What’s really impressing me is how quickly changes can be made by users - a good indication of the inherit, underlying power in Elements.
1 Like
You ask, we deliver: 
I’ve added a dropzone where you can then add an SVG component. The image can then be perfectly styled further within the SVG component.
Badge CC 1.4
3 Likes
Awesome!
What’s really impressing me is how quickly changes can be made by users - a good indication of the inherit, underlying power in Elements.
Indeed. I would never have thought this was possible. In my daily life, I’m a lawyer, so I have nothing to do with web development. I made this component today in just a few hours. I happened to come across something about badges in Tailwind. Then I experimented a bit using the manual and AI.
The great thing is that someone can create a basic version, and others can then suggest ideas to further develop the component. The additions were again implemented using the manual and AI. Of course, this only works to a certain extent. When more complex elements are involved, it will mainly be up to specialists to develop and offer components.
But based on my experiences so far, the possibilities with Elements are endless. I’m really looking forward to seeing what components will appear once the first official release of Elements is available.
3 Likes
isn’t this just the same as creating a button using an elements component without coding???
You could look at it that way. And it’s certainly not high-level coding. I’m simply trying to get an understanding of how Tailwind and Elements work so I can create things myself that might not be immediately achievable with the standard components. I share them so others can use them if they want or work on them themselves. You definitely shouldn’t read more into it than that, and for advanced users, this will surely come across as quite simple.
not meaning to rain on your parade just couldn’t understand what your badges do…they dont do anything and to make em do something it would need code to link to something? otherwise to me its just an image and thats it
@Bartje Agree with you, my take learning how to to create your own components is both fun and a learning experience. It shows the power of Elements for everyone to use at what ever level, drag and drop, create your own components (which is very cool, well done Realmac) and up to Dev level selling specialist components or even free. Sharing components etc will become big I think especially as all can share and develop together perhaps, the cloud addition brilliant addition, a huge step up from just sharing how to set up something. My opinion anyway, I would never have even thought to start learning tailwind, css and html if Elements had not made it so simple (if simple is the right word).
Nothing like creating something and it working then seeing it on a page, and being able to share your journey with others on the forum is another bonus.
Apologies for the long post but I think Elements is developing into a great web building app, I have a new hobby for my own development, learning every day, my wife only allows me a few hours week, I sneak the odd 15 mins here and there, additive and addicted.
Small update that I think can be useful : you can now choose to show or hide the SVG icon.
If the icon is hidden there’s too much white space on the left of the text, so that the text doesn’t look centered.
@RapidBase : Here’s an update with a padding option for the icon. So now the text should be in the correct place, with or without the icon.
3 Likes
3 Likes
Thanks @Bartje for sharing that with us 
Shows clearly one of the advantages of Elements! And motivates me to probably try also creating a custom component.
1 Like
You really should, it’s awesome! But be warned, it gets very addictive
1 Like