Create KCard Component

[marcellamaki]

Overview

Creation of a flexible KCard component for increased visual consistency, clear information architecture, and built-in accessibility requirements.

What is this feature? What problem is it solving?

Design goals addressed:

• Updated, streamlined card design patters
• Improved card interactions with clear "zones" for things like interactive elements, information display, etc.
• Clear information architecture on card components
• Flexibility/customizability when changing cards or adding new cards
• Consistent user experience

Developer goals addressed:

• Reduce tech debt and the number of custom card components used - particularly across Kolibri, but ultimately across all of our products
• Provide out-of-the-box responsive cards
• Provide out-of-the-box accessible cards, to limit the dev hours put into "reinventing the wheel" or having inconsistently accessible cards across our products

Why are we doing this now?

It will be used in the coming months as we continue to improve on our Kolibri UI, particularly for learners and coaches

What feedback, requests, insights and/or concerns are shaping this feature?

Include specific comments from partners, clearinghouse, or teammates as relevant. Related issues/discussions: https://github.com/learningequality/kolibri-design-system/issues/264 https://github.com/learningequality/kolibri-design-system/issues/263

Contributors

• Technical lead: @MisRob
• Technical planning support: @akolson
• Shadowing technical planning: @LianaHarris360
• Designer: @tomiwaoLE

Goals

We know this component is successful if:

• We receive feedback from the dev team that the card is easy to use, whether in refactors or in new feature work
• We receive feedback from the designers that this card is able to be used and/or extended easily when new design work is created
• We receive feedback from partners and/or users that the information presented on the card is clear and relevant
• We receive feedback from partners and/or users that the cards are easy to interact with (including on technologies like screen readers)

Target Quarter and Due date

Release with KDS end of 2023. This due date is flexible, and does not reflect integration into Kolibri, but the release of the component and accompanying design and dev documentation into KDS.

Product Issues

[Sujal267]

Hii, i want to work on this issue, this is my first time working on an open source project, I have set up a local environment, can you help me how should I proceed with this issue.

[MisRob]

Hi @Sujal267, this is our product management issue rather than specification. The specification is in progress. As soon as we have planned the component, we will eventually open some related issues and some of them may be suitable for contributions, however it will take some time. Meanwhile, I'd recommend searching for "good first issue" in this repository, or alternatively in Kolibri or Studio.

[MisRob]

Specification #528

Issues for implementation

• 529

• 530

[MisRob]

Closed by https://github.com/learningequality/kolibri-design-system/issues/528