DEV Community

Bailey Pardee
Bailey Pardee

Posted on

Considerations for Building a Web Component and Its API

Class Project

The web component we are beginning to work on is a card (shown below). Some things to consider when creating a card are: What elements can it be broken into? What "states" does the card have? What accessibility concerns should we consider? What flexible content should we consider? And more.
Card Example
For our project, we will be breaking the card down into 4 main elements:

  • icon
  • header/banner
  • body
  • card scaffolding

Potential Difficulties

A potential difficulty I anticipate is determining how exactly we want the user to be able to interact with the card and making it happen. My group has discussed the concept of a card that slides to the side or up and down to allow for more information or icons. This is not a state that we handled with the button we built, so I expect new challenges with it.

What's Manageable

Having already made a web component that was a button, there are a few aspects to this card that I hope to be more manageable. One of these is the ability to apply basic states to the card. These include hovering and focusing. I also hope that getting started with the card will be more manageable than with the button as we are beginning with a template to follow and expand from.

Top comments (0)