Have an option to display an SVG play icon for cards that open video modals

Open
#717 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
css, scss
Domain
design, frontend

Research direction

Start by reviewing the card component and the referenced Firefox design to understand how video cards and play icons are currently handled. Define the standardized card behavior and styling, then verify that cards opening video modals display the intended icon consistently.

Written by the indexing model from the issue text.

Description

Design 🎨
Please describe the use case(s) for this component

We often allow for cards to open a video modal. We usually either:

  1. Have the thumbnail include a play icon or
  2. Add a bit of CSS to display an SVG play icon.
Please describe the change you wish to see

It would be great for Protocol to have a method for displaying a video play icon for videos that is standardized.

Please describe why these changes need to be made
  1. We often (always?) have cards with videos
  2. This would allow us to handle this in contentful
Please provide any designs or prototypes of the proposed changes

https://www.mozilla.org/en-US/firefox/features/tips/

See how play icons are handled in the cards in the link above

Dominant language
SCSS
Stars
298
Forks
83
Avg merge
16h 48m
Merged PRs (30d)
1

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from mozilla/protocol

All issues in mozilla/protocol

Similar issues

More Design issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.