When selecting content from the translation or an existing link, the corresponding article pages are surfaced in a preview card (T191007).
This ticket describes the design details in terms of layout and styling those should follow.
- The proposed design allows the page name name and the description to expand up to two lines each. Longer texts will be cropped. If the link label is long enough for not fitting, a smaller (14px) font will be used instead of the regular (16px) one to get some extra room.
- The remove action uses only an icon.
- When a card is presented behind another, a light grey (Base90) is used instead of white, and the card on top will project a shadow (e.g., box shadow 0 -1px 0 0 rgba(0,0,0,0.05) ) to make the overlap a little bit more visible.
- When hovering the card behind, the cards will be expanded allowing to view all contents. In such case, the background color for both will be white.
The mockup below provides more details about the layout and styling:
Those cases where there is no image for the page, a placehoder is used. The mockup below shows the layout and styling details for it: