Add “Cards” to [[ https://design.wikimedia.org/style-guide/components/ | Design Style Guide “Components” ]] section.
=== Acceptance criteria
[] Collect current card or card-like implementations across web products, examples: [[ https://design.wikimedia.org/ | Design homepage ]], …
[] Define general rules on appearance and interactivity
[] Align to internationalization and accessibility requirements
[] Define layout rules for when multiple cards/modules are shown in dashboard type content area
[] Add “Cards” to “Components” section
//** Examples of pages with cards/card-like layouts **//
| Sample screenshot | Found in | Notes
|--|--|--
| {F34408565} {F35193862} | [[ https://www.mediawiki.org/wiki/Growth/Personalized_first_day/Newcomer_homepage | Growth Newcomer homepage desktop ]] | Card in the Suggested Edits UI - note the Mobile and Desktop differences. Could the modules themselves be considered cards?
| {F35193860} | Growth - newcomer homepage on MOBILE | "Preview" module cards - selecting a preview module card will open the module as a full screen overlay on mobile
| {F35193864} {F35193869} | Growth - post-edit dialog/bottom sheet on mobile & desktop | Appears after someone completes a Suggested edit task - unclear if this would be a separate bottom sheet component - would only the article within this be considered a "card" or ListItem component ??
| {F35193873} {F35193882} | Structured task link "inspector" card, shown under the item on desktop, as a bottom sheet on mobile (similar to VE link card) | again, not sure if only the article inside the dialog/sheet is considered the card/ListItem.
| {F34408567} | Main page |
| {F34408569} | Related articles at the bottom of Minerva articles |
| {F34432307} | [[ https://doc.wikimedia.org/ | doc.wikimedia.org ]], DSG code repo derivative |
| {F34432310} | [[ https://design.wikimedia.org/ | design.wikimedia.org ]] |
| {F35193888} {F35193893} | Content Translation 'home' page Desktop and Mobile |
| {F35193890} | Content Translation side panel (Desktop) |
| {F35193896} | Content Translation Section translation - mobile only at present | More info here https://www.mediawiki.org/wiki/Content_translation/Section_translation |
| {F35196454} {F35196470} | Echo notifications (on Special:Notifications and in the popup menu in the header) | Notable features: Unread/read indicator, different links for the entire card and items within the card e.g. user page and "view change" link, notification age in the bottom-end corner |