Design System: Recommendations for Page Card CSS/HTML Standard #4296
Description
Dependency
- Design System: Audit Page Card CSS/HTML standard #2061
- Design system for Internship
Overview
We need to document recommendations for the .page-card classes so that we can then standardize and implement them for the HfLA Website.
Action Items
- In issue Design System: Audit Page Card CSS/HTML standard #2061, devs created a new spreadsheet noting all instances of a
.*-cardclass and created a write-up with research on accessibility and standard practices. As the developer assigned to this issue, you will: - Go through all of the instances in the spreadsheet of the
.*-cardclasses in the HfLA repo- Review each instance to see how it was coded, and compare it against the standards written in the write-up.
- Write any "relevant methods" pertaining to accessibility and industry standard (i.e. do they use empty alt texts, are they WCAG 2.1 compliant, can they be tab-focused, etc.)
- If a class implements something that is "off" or otherwise non-standard and can be standardized, write specific recommendations on what we can do to make the class more compliant, accessible, etc.
- For each instance, write the in the "Impact" column what the ramifications are for changing/refactoring any instance of the
.*page-cardif it needs to be changed.
Merge Team
- Release dependency on Design System: Standardize Page Cards #2226
Resources/Instructions
/* Current default for page-card*/
.page-card {
border-radius: 20px;
overflow: hidden;
width: 100%;
}- WCAG 2.1
- Design System: Audit Page Card write-up
- First part of the Design System Audit for Page Card CSS/HTML Standard: Design System: Audit Page Card CSS/HTML standard #2061