In this post, I will discuss some basic considerations to take into account when building web components. Some examples may include accessibility, security, flexibility, and stylistic aspects.
Details
For this project we are creating learning cards (shown in image below). The cards are composed of several elements which can be separated into the following components:
- The Icon
- The Banner
- The Slotted HTML (bottom half of card)
Breaking the components down a little bit more will allow us to continue to reuse/repurpose the components in future projects.
The icon component is an SVG icon that includes the circle surrounding the symbol. The banner component consists of a header and subheader as well as contains the icon SVG. And finally, the entire card can be considered to have a top and bottom half with the top half including the icon/banner portion and the bottom half being open to include text or whatever information is desired to be put there.
Expected Obstacles/Past Experience
I have helped create a button component for a previous project, but I believe that this project will be slightly more challenging. I don't have much personal experience with web components and this has much more content to work with than a button does. I believe stylistically making sure that the header and text fits the learning card in the way that we want it to might be the most difficult.
While we are sure to face some difficulties, I believe that we have also gained valuable knowledge from creating the button which we will carry into this project.
Top comments (0)