Images are presented inconsistently in docs

[mcoker]

Curious if we could normalize any of these. I'll also say that on top of these, there are a lot of images in the docs that are not within any kind of class/wrapper - so those are either left-aligned with the content if they're less than the width of the content wrapper, or they consume 100% of the content width with no max-width.

.ws-docs-content-img

• will only grow up to 700px

• centers itself horizontally

• centers its child horizontally (if the image inside is less than 700px)

• Button docs use this with a bunch of varied image sizes - https://www.patternfly.org/components/button/design-guidelines

patternfly-org/packages/documentation-site/patternfly-docs/content/design-guidelines/components/components.css

Lines 1 to 6 in b455d81

	.ws-docs-content-img {
	text-align: center;
	margin-inline: auto;
	width: 100%;
	max-width: 700px;
	}

.ws-image

• centers its child horizontally

• same as above but will grow to 100% of the available width instead of a max of 700px

patternfly-org/packages/documentation-framework/templates/mdx.css

Lines 19 to 21 in b455d81

	.ws-image {
	text-align: center;
	}

.ws-images

• centers itself horizontally

• has a max-width of 600px

• Same as the first one except 600px instead of 700px and it will not center its children, so if an image less than 600px wide is passed, it will be left aligned within the container.

patternfly-org/packages/site/src/content/get-started/get-started.css

Lines 5 to 8 in b455d81

	.ws-images {
	margin: auto;
	width: 600px;
	}

---

Jira Issue: PF-2788

[mcoker]

cc @bekah-stephens @edonehoo @andrew-ronaldson do y'all have any feedback? I can provide screenshots/codepens with changes if needed.

I'll say that the easiest is probably just not have a special container for images. Only because then nobody has to remember to add a special wrapper around images to get the centered/max-width/etc effects.

Here are a couple that just have images and no special wrapper

• https://www.patternfly.org/components/about-modal/design-guidelines (wide images)
• https://www.patternfly.org/charts/about-charts (varied sizes)

[edonehoo]

Definitely +1 to standardizing

The max width has been helpful in certain instances where a full-width image would be too intrusive/blurry (for ex, chatbot images that are taller than they are wide) or for png screenshots (like in this tokens doc).

But maybe we can just standardize the frame width before exporting from Figma, and just let some images have larger white "margins"? Or, specify a width for individual images as needed (like on the parent div or img tag)

[mcoker]

@edonehoo thanks! I'd love to have something as simple as it can be for folks to use so there's less risk someone doesn't export in a special way or add the right classes or whatever when adding an image to docs. I imagine there is something folks will have to do, but the less the better IMO 👍

For the CSS/class that can do the centering/width manipulation, we can also draw a frame around the image if this is what you were referring to. We may also consider a relative max-width instead of a Like "80%" or so instead of "700px", so it could apply at all viewport widths (including mobile). I'm not necessarily recommending either, just showing something we could do with CSS.

Before:

After:

[edonehoo]

@mcoker I started looking into this more and talking to Cursor about it and wanted to throw some updated musings on here for whenever you had time to revisit too

Probably 95% of our website images are currently exported from Figma as SVGs (when I said "frame" before that was a Figma term-my bad). In Figma, we can export as PDF, PNG, SVG, or JPEG. We used to do PNG exported at 2x size and then sized back down via CSS, but I think that felt sloppy or there was concern over the file size and general approach. So when we started updating images to v6 styles, we went with SVG.

For ref, here's the same image in SVG, 1x PNG, and 2x PNG. The 1x PNG is slightly blurry, but maybe more noticeable to me than the average user?

Q: I know SVG isn't really intended for use with images like this, so which approach do you think is the best and most efficient?

I think once we decide on the image format, it would just be a matter of re-exporting/updating as necessary and then implementing a bunch of updates across files via Cursor. Cursor's suggestion was to add these CSS classes in mdx.js, which would cover the defaults and edge cases. Because mdx.css is already globally imported in the documentation framework, it alleges that mdx.css styles apply to all documentation pages automatically, and we can just use typical markdown image formatting without divs everywhere?

/* Global image styling for documentation content */
.ws-example-page-wrapper img {
  display: block;
  max-width: 90%;
  margin-inline: auto;
}
/* Utility class for full-width images */
.ws-img-full,
.ws-img-full img {
  max-width: 100%;
}
/* Utility class for smaller images (maintains old 700px behavior) */
.ws-img-narrow,
.ws-img-narrow img {
  max-width: min(700px, 90%);
}