## Background
- **Description:** In Codex, so far we've used [[ https://doc.wikimedia.org/codex/main/components/thumbnail.html | Thumbnails ]] to provide small image previews. The introduction of [[ https://phabricator.wikimedia.org/T310632 | "portrait" Cards ]], made us realize that this might require the introduction of bigger size media, Images. Thumbnails should be reserved to provide small content previews, and they don't need to be adjusted to specific aspect ratios (such as 16:9, in this case).
- **History:** We've considered the introduction of image as a core Codex component. This wasn't listed as part of the big [[ https://phabricator.wikimedia.org/T277047 | design inventory of the Wikiverse ]] performed by the Product design team, though.
- **Known use case(s):** Images are currently used to illustrate Wikipedia articles and Wikidata items. As mentioned above, in the context of Codex, they'll be used to provide previews in portrait Cards.
- **Considerations:** We should evaluate and define the relationship between Thumbnail and Image, since it might be that the former is just a variant of the latter.
### User stories
- As a designer and developer, I want to be able to reuse an image component to support the meaning or illustrate content in layouts and components.
### Previous implementations
These artifacts are listed for historical context. The figma spec, linked below, is the source of truth for the new component.
- **Design style guide:** -
- **OOUI:** -
- **Vue:** -
---
## Codex implementation
### Component task owners
- Designer: @Sarai-WMDE
- Developer: //add the main developer's name//
### Design spec
WIP. A component spec sheet has not been created yet.
| Component spec sheet |
---
## Stage 1: Minimum viable product (MVP)
MVP includes basic layout, default states, and most important functionality.
### Acceptance criteria
- [] Determine what MVP includes for this component and document this in a subtask. Assign task to designer.
- [] Design MVP. Once complete, assign task to developer.
- [] Implement MVP
---
## Stage 2: Additional states, features, and variants
### Acceptance criteria
- [] Document design and implementation of additional states and features in individual subtasks
- [] Complete each additional state/feature subtask
---
## Stage 3: Refinement
### Acceptance criteria
- [] Finalize docs: open and complete a subtask for any additional demos that need to be added or documentation that needs work
- [] Meet accessibility standards: open and complete a subtask for any necessary accessibility improvements
- [] Meet internationalization standards: open and complete a subtask to fix any i18n bugs
- [] Complete testing: open and complete a subtask for any additional unit or functional tests that are needed