==Goal
Create a layout for the Wikipedia Preview card that will show on mobile phones.
===Elements
The card will have the following elements:
- Thumbnail image -> This will be the lead image of an article, when available
- Text from the beginning section of an article
- Wikipedia branding
- A call to action to direct readers to read the full article on Wikipedia
- Attribution and licensing for images
===Proposed Design
{F31803383}
{F31803397}
{F31803399}
|Preview with thumbnail|Preview with long heading|Preview with wordmark
|---|---|---
|{F31842147 width=200}| {F31842149 width=200}| {F31842151 width=200}
|Preview without Thumbnail|Preview without thumbnail style2|Preview without thumbnail style3|
|---|---|---
|{F31846487 width=200}| {F31842153 width=200}|{F31846485 width=200}|
Zeplin ➡ https://app.zeplin.io/project/5ecb83e6684a652a22af32b6/dashboard?seid=5ecb84d8658ec345e126b702 (with thumbnail)
Zeplin ➡ https://app.zeplin.io/project/5ecb83e6684a652a22af32b6/dashboard?seid=5ecba9b74ad07129a00af33f (without thumbnail)
===Design Details
- If an article summary has long text which can’t fit inside the preview then show continue reading(CTA).
- If an article summary has short text then adjust the size of the preview card accordingly without keeping CTA.
- If an article(with/without thumbnail) has images then show them when users tap on continue reading.
- In the absence of thumbnail, either we can still use the thumbnail preview layout and use wikipedia
wordmark as a thumbnail or use a preview layout(mentioned above) specific to it.