Skip to content

feat: Class Card UI/UX updates - #610

Open
NewtonLC wants to merge 2 commits into
freeCodeCamp:mainfrom
NewtonLC:feat/class-card-redesign
Open

feat: Class Card UI/UX updates#610
NewtonLC wants to merge 2 commits into
freeCodeCamp:mainfrom
NewtonLC:feat/class-card-redesign

Conversation

@NewtonLC

@NewtonLC NewtonLC commented Aug 4, 2026

Copy link
Copy Markdown
Contributor

Checklist:

Addresses sub-issue 3 of issue #609.

Description of changes

  • Added a tooltip to each class card to display the class's certifications.
  • Added CSS text wrapping to each class card.
  • Added Client-side character count caps to the title and description of each class.
  • Updated the ClassInviteTable and Modal test snapshots to reflect the new file changes.

Images

Tooltip:
image

Tooltip on hover:
image

Text wrapping on class card:
image

Character count limits on title and description:
image

Teachers can now hover over it to easily see which certifications are part of their class
on the Classes page. Previously, they needed to press the Edit Class button and
scroll through the certifications list.
Users can only write class titles of up to 100 characters and descriptions of up to 500 characters.
The Class card truncates after 2 lines of the class title and 4 lines of the description.
@NewtonLC
NewtonLC requested a review from a team as a code owner August 4, 2026 22:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant