This blog post is brought to you by a lingering cough and frustration towards machines.
Cards
We're going to be continuing our web components journey with making a multi-element card. Cards, while ambiguous, are bordered elements containing useful information or action links. By wanting to make a multi-part card, with a header banner, icon, and content, we need a multi-component project. Each piece will be it's own stand-alone web-component with the card wrangling them all together in the end.
Considerations
Before delving any deeper, we are going to look at the steps I never take when tackling a programming project; low level planning. I do a lot of high level planning in general structure and ideal functionality, but for this one we're going to get more granular. We're copying some other card examples we've seen online, which were broken down into the icon, header, and content of the card. Sometimes, you just have to section off parts of a project to get started.
Icon
Icons grab the user's attention and give them an idea of the subject without any words. Alignment in this project is going to be difficult when splicing all the components together, and the Icon may cause the most difficulty. Words are easy to work with, but images are a pain sometimes.
Header Banner
One of the easier components in the project, it consists of a main header and a possible sub-header. The main difficulties here lie in the variability and user input. We have to dynamically shift content around with page resizing, scrolling, and deal with whatever headers the designer wants to add.
Content
The easiest component, but also the one with the greatest variability. Bulleted lists, different fonts, and a possible collapsable option are all possibilities in the component.
Card
The final element that wraps all the previous together. That wrapping graphically is going to be the worst part. But after baking a call to action button, handling action events and state changes should be a breeze. That's for one element though; for multiple elements, we may have to use bubbling events and event listeners to capture what we need for reactivity. That'll be a story for another day once we start implementing and testing unknown code.
What fun.
Top comments (0)