DEV Community

Kathryn Simpson
Kathryn Simpson

Posted on • Updated on

Event Badge Project


For this project we needed to make a web component of an event badge, that could be reusable for all events that would use a photo on their badge. We also needed to wire it up to HAX.

Getting Started

Image description
For this project we were given the comp shown above. For this component my group and I decided to brake in down into the following elements:

  • Event-Badge
  • Event-Header
  • Event-Photo
  • Event-Name
  • Event-Logo

We also decided that we would want to make it hockey themed instead of the media theme that was in the original comp.


Image description
As shown above this is how our comp currently looks. We still have some things to work on before it is due, but so far we have made our own banner for the header area. How I did this was by taking 4 different svg's and mixing them up in different patterns. Liz is the main developer for our project so she has do the majority of the coding. Our professor commented on how the code shown below was a cool way for solving the hole punch that we needed at the top of our badge.

.holePunch {
  margin: auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: white;
Enter fullscreen mode Exit fullscreen mode

We still need to <slot> in the content, add support for an image, as well as add support for the name, title, company properties. When we are finished I will add in screenshot of the badge below.


As I mentioned earlier we needed to wire our component to HAX. What is HAX you may ask, well HAXTheWeb is an open source collection of web components that are reusable on all platforms. This is achieved by using a tag structure that is very semantic. The web components can be used with or without HAX after it has been created as well. As our professor is a main part of HAX, we were asked to do this project based off of issue that had been added to the HAX GitHub account.



Top comments (0)