elastic / elastic/docs-builder

Image styling: borders

Open
#2,064 2 comments 1 reaction 1 assignee Assigned to @Copilot View on GitHub
ai-triaged ai:ux-question ai:writer-question design stale
Dominant language
C#
Stars
24
Forks
44
Avg merge
1d 7h
Merged PRs (30d)
146

Description

In a recent conversation about centering images, we also slightly touched on the contrast issue with screenshots originating from the product having the same background color as the docs page background. The fact that our images don't have borders impairs a bit the readability and scannability of our docs pages, especially ones where we need more screenshots than usual, such as visualization-related features.

This is a bigger issue now than in the past because of recent UI theme changes made to the product, where the white-ish background is a lot more present than in previous versions where the product background was grey more often, thus creating more natural contrast and distinctions on docs pages with screenshots.

Example:

Image

Some options:
- auto-add a solid border to images
- make it optional using a new styling parameter (we could debate whether it's on or off by default)

Also a note that this shouldn't apply to inline images such as icons.

cc @theletterf

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.