So you are considering making a web component for a project, what should you consider before you code a single line? How should much you consider making the component specific to the application or general? In this post, I will go over my team's design considerations for a display card component we are developing for class.
Our card should look like the card below and it will be used in online-course websites for Math or Science courses. Each card regardless of type has two titles, an icon, and a large section meant to put bulleted text. When deciding how to attack this project we asked a series of questions:
- What are the characteristics of the card?
- What design considerations must we take into account?
- What accessibility concerns do we potentially have?
- What security concerns do we potentially have?
- What "states" does this card have?
- What do we call it?
- Do we have room for additional reusable atoms to be produced? Let's go and answer some of these questions. I broke it down already but we have a header and sub-header text, an icon, a content area for a bulleted list, and a colorized banner in the header. Looking at the example card it is possible to imagine someone may have a long title or have a smaller icon or several other exceptions. In general, we must consider scaling of text for the header and list; the color of the banner based on content, changeable icons, and consistency of the margins and padding just to name a few. When it comes to accessibility we need to ensure that the text inside of the card is accessible to a screen reader; the font on the card is a reasonable size; have a high contrast option; ensure the text inserted can be for any language, and ensure the card can be "tabbed" through. Security for us is boiled down to SVG file vulnerabilities and content modification most of the content is loaded in via an API. A card can be clicked, disabled, and focused/hovered. Cards also have a state based on if they are a Math or Science card. To keep this card abstract we can have a colored banner, Icon, Skeletal Card which outlines a header and body subcomponent, and the entire card itself to help with margins. What difficulties do I expect to experience? Mainly how to adjust font size and padding based on the length of the text and slotted content. I do not have a lot of experience with CSS so learning to dynamically change it will be difficult for me. This component will be practicing encapsulation from other languages except in HTML. Planning of the slot values will also be difficult. Considering how four components do need to work with one another, planning these values will be more difficult than coding them.
Top comments (0)