I’ve been trying to create a similar web component for my personal portfolio, but I’m not sure what they’re called. Are these called badges? Or are these called cards?
The reference webpage I’m looking at is eggsy.xyz.
in material design those would be cards, like here
What about non-interactive chip component? Those look like the closest thing to me, but their sizes are small.
First thing that came to mind was badges.
Even I had the same thought-process, but normal and pill badges don’t have images, as shown here. Cards may not have image and card body, so in a way, it can resemble what I was looking at, like this example minus the body, sub-heading and image. But this component looks and acts like a large badge list, because cards are decently sized components, and this one is comparatively smaller.
I’d probably call them menu items, or small cards.
chippy cards
Icons?
Like others have said, these are Card components. Usually you’d create an empty low-level Card component that has basic props for different styles (rounded, flat, error, etc.), slots for the content inside, and event handlers for interaction. Then, if you wish, you could make another CardGroup component that can contain Card components and position them using flexbox or grid like the example you provided.
Another possible name for these components would be List or ListItem