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.

    • AureumTempus@lemmy.worldOP
      link
      fedilink
      arrow-up
      1
      ·
      1 year ago

      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.

  • silas@programming.dev
    link
    fedilink
    English
    arrow-up
    1
    ·
    1 year ago

    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