style: image and copy updates (#33)

jaclynchao · web-flow · commit 5008555b41b4 · 2025-08-26T11:43:13.000-07:00
* image and copy updates

* more copy updates

* image and copy updates

* more copy updates

* update new components

* one more
diff --git a/components/.ExampleComponent/readme.md b/components/.ExampleComponent/readme.md
@@ -1,8 +1,8 @@
-# ExampleComponent
+# `<ExampleComponent/>`
 
 ## Overview
 
-This is the default `<ExampleComponent />` that we pre-fill when you create a new component in ReadMe! You can use this is a starter template for your own component.
+This is the default `<ExampleComponent />` template added when you create a new component in ReadMe. Use this space to briefly describe what your component does.
 
 Upload a screenshot of the component using the format `component-name.png` and dimensions of 800x450 pixels (16:9).
 <img src="example-component.png" width="800" />
diff --git a/components/Accordion/readme.md b/components/Accordion/readme.md
@@ -1,8 +1,8 @@
-# Accordion
+# `<Accordion/>`
 
 ## Overview
 
-An accordion can be used to expand and collapse sections of content. You can add this customizable component to your docs to organize and display large amounts of information in a compact and interactive way.
+Expand and collapse sections of content to organize and display large amounts of information in a compact, interactive way.
 
 <img src="accordion.png" width="800" />
 
diff --git a/components/AdvancedTable/readme.md b/components/AdvancedTable/readme.md
@@ -1,8 +1,8 @@
-# AdvancedTable
+# `<AdvancedTable/>`
 
 ## Overview
 
-AdvancedTables can be used to interact with tabular data. It supports real-time filtering, column sorting, pagination for large datasets, and CSV exporting.
+Interact with tabular data that supports real-time filtering, column sorting, pagination for large datasets, and CSV exporting.
 
 <img alt="Table with filter, sorting, and pagination options" src="advanced-table.png" width="800" />
 
diff --git a/components/Banner/readme.md b/components/Banner/readme.md
@@ -1,8 +1,8 @@
-# Banner
+# `<Banner/>`
 
 ## Overview
 
-Banners can be used to visually highlight important information, announcements, or calls to action directly inside a page. You can customize the message, text, and colors, as well as the position whether it's inline or at the top of the header.
+Visually highlight important information, announcements, or calls to action directly inside a page. Customize the message, text, and colors, as well as the position whether it's inline or at the top of the header.
 
 <img src="banner.png" width="800" />
 
diff --git a/components/Cards/readme.md b/components/Cards/readme.md
@@ -1,8 +1,8 @@
-# Cards
+# `<Cards/>`
 
 ## Overview
 
-Cards can be used to display content in an organized grid layout. Each card can contain a title, icon, and descriptive text, and optionally link to another page. It's useful for showcasing features, links, or grouped information in a visually structured way.
+Display content in an organized grid layout. Each card can include a title, icon, and description, and optional link. This is great for showcasing features, links, or grouped information clearly.
 
 <img src="cards.png" width="800" />
 
diff --git a/components/Columns/readme.md b/components/Columns/readme.md
@@ -1,8 +1,8 @@
-# Columns
+# `<Columns/>`
 
 ## Overview
 
-Columns can be used to arrange content side by side in a responsive grid layout. You can create multi-column sections that support both fixed-width and auto-sizing layouts in your docs. 
+Arrange content side-by-side in a responsive grid layout. Create multi-column sections that support both fixed-width and auto-sizing layouts in your docs. 
 
 <img src="columns.png" width="800" />
 
diff --git a/components/Compatibility/readme.md b/components/Compatibility/readme.md
@@ -1,12 +1,10 @@
-# `<Compatibility />`
+# `<Compatibility/>`
 
 ## Overview
 
-If you have features that aren't available on every plan or configuration, this module is for you! You can list out plans and a true/false to indicate if it's available.
+Show compatibility across features, plans, or anything you need!
 
-_Coming Soon: Mobile support, darkmode, more options_
-
-![Compatibility](compat.png)
+![Compatibility](compatibility.png)
 
 ## Usage
 
diff --git a/components/GitHubBadge/readme.md b/components/GitHubBadge/readme.md
@@ -1,8 +1,10 @@
-# `GitHubBadge`
+# `<GitHubBadge/>`
 
 ## Overview
 
-This component displays a badge that links to a GitHub actions workflow status. It is useful for showing the status of a CI/CD pipeline or other automated workflows.
+Display a badge that links to a GitHub actions workflow status, useful for showing the status of automated workflows.
+
+<img alt="GitHub Badge" src="github-badge.png" width="800" />
 
 ## Usage
 
diff --git a/components/KeyPress/readme.md b/components/KeyPress/readme.md
@@ -1,6 +1,10 @@
-# KeyPress Component
+# `<KeyPress/>`
 
-The `KeyPress` component allows you to render children elements based on a specific key combination being pressed.
+## Overview
+
+Render children elements based on a specific key combination being pressed.
+
+<img alt="Show elements based on key combination pressed" src="key-press.png" width="800" />
 
 ## Usage
 
diff --git a/components/Latex/readme.md b/components/Latex/readme.md
@@ -1,8 +1,10 @@
-# `<Latex />`
+# `<Latex/>`
 
 ## Overview
 
-A component to render LaTeX syntax. (**Note**: this will fetch the `react-latex-next` package from a CDN on page load.)
+Render LaTeX syntax. (**Note**: this will fetch the `react-latex-next` package from a CDN on page load.)
+
+<img alt="Use LaTeX syntax with MDX" src="latex.png" width="800" />
 
 ## Usage
 
diff --git a/components/PostList/post-list.png b/components/PostList/post-list.png
diff --git a/components/PostList/readme.md b/components/PostList/readme.md
@@ -1,8 +1,10 @@
-# PostList
+# `<PostList/>`
 
 ## Overview
 
-The **PostList** component fetches and displays a list of posts from an API endpoint. It shows a loading indicator while fetching and handles errors. Ideal for demonstrating async data fetching with React hooks and Tailwind CSS styling.
+Fetch and display a list of posts from an API endpoint with a loading indicator while fetching and handles errors. Ideal for demonstrating async data fetching with React hooks and Tailwind CSS styling.
+
+<img src="post-list.png" width="800" />
 
 ## Usage
 
diff --git a/components/PostmanRunButton/readme.md b/components/PostmanRunButton/readme.md
@@ -1,6 +1,10 @@
-# Postman Run Button Component
+# `<PostmanRunButton/>`
 
-Adds a Postman Run Button to your documentation, allowing users to fork a Postman collection.
+## Overview
+
+Add a Postman Run Button to your documentation, allowing users to fork a Postman collection.
+
+<img alt="Postman Run Button" src="postman-run-button.png" width="800" />
 
 ### Usage
 
diff --git a/components/QuizGame/quiz-game.png b/components/QuizGame/quiz-game.png
diff --git a/components/QuizGame/readme.md b/components/QuizGame/readme.md
@@ -1,8 +1,10 @@
-# QuizGame
+# `<QuizGame/>`
 
 ## Overview
 
-`<QuizGame />` can be used to display a question with multiple-choice answers, let the user select an option, and then check if the answer is correct.
+Display a question with multiple-choice answers, let the user select an option, and check if the answer is correct.
+
+<img src="quiz-game.png" width="800" />
 
 ## Usage
 
diff --git a/components/SimpleStepper/SimpleStepper.mdx b/components/SimpleStepper/SimpleStepper.mdx
diff --git a/components/SimpleStepper/readme.md b/components/SimpleStepper/readme.md
@@ -1,8 +1,9 @@
-# 🪜 Simple Stepper
+# `<SimpleStepper/>`
 
-The **Simple Stepper** component provides basic "Next" and "Back" navigation for stepping through content.
+## Overview
+Provides basic "Next" and "Back" navigation for stepping through content.
 
-![Stepper](stepper.png)
+<img alt="SimpleStepper" src="simple-stepper.png" width="800" />
 
 ## ✨ Features
 
diff --git a/components/SimpleStepper/simple-stepper.png b/components/SimpleStepper/simple-stepper.png
diff --git a/components/SnapSlider/readme.md b/components/SnapSlider/readme.md
@@ -1,10 +1,12 @@
-## 🧰 Changes
+# `<SnapSlider/>`
 
-A `<SnapSlider>` component that uses [scroll snapping](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap) to generate a gallery interface.
+## Overview
 
-<img src="https://github.com/user-attachments/assets/d337161f-515a-4e57-9307-322eea6468fc">
+Uses [scroll snapping](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap) to generate a gallery interface.
 
-### Usage
+<img alt="SnapSlider to scroll images" src="snap-slider.png" width="800" />
+
+## Usage
 
 ```mdx
 <SnapSlider>
diff --git a/components/Spoiler/readme.md b/components/Spoiler/readme.md
@@ -1,6 +1,10 @@
-# Spoiler Component
+# `<Spoiler/>`
 
-Conceal content behind a clickable overlay—perfect for hiding spoilers or sensitive information until the user chooses to reveal it.
+## Overview
+
+Conceal content behind a clickable overlay—perfect for hiding spoilers or sensitive information.
+
+<img alt="Hide spoiler text" src="spoiler.png" width="800" />
 
 ## Usage
 
diff --git a/components/StatusPage/readme.md b/components/StatusPage/readme.md
@@ -1,8 +1,8 @@
-# StatusPage
+# `<StatusPage/>`
 
 ## Overview
 
-A `<StatusPage />` can be used to embed the current operational status, health, or uptime of a service or system. It fetches live status information from a public [Statuspage](https://www.atlassian.com/software/statuspage) endpoint (e.g. https://www.githubstatus.com) and displays the status indicator and description.
+Embed the current operational status, health, or uptime of a service or system by fetching the live status information from a public [Statuspage](https://www.atlassian.com/software/statuspage) endpoint (e.g. https://www.githubstatus.com). It displays the status indicator and description.
 
 <img src="status-page.png" width="800" />
 
diff --git a/components/StatusPage/status-page.png b/components/StatusPage/status-page.png
diff --git a/components/Tabs/readme.md b/components/Tabs/readme.md
@@ -1,8 +1,8 @@
-# Tabs
+# `<Tabs/>`
 
 ## Overview
 
-Tabs can be used to organize content into sections where only one is visible at a time, letting you switch between them for a cleaner and more interactive reading experience.
+Organize content into tabs to keep content tidy and navigable.
 
 <img src="tabs.png" width="800" />
 
diff --git a/components/Terminal/readme.md b/components/Terminal/readme.md
@@ -1,8 +1,8 @@
-# `<Terminal>`
+# `<Terminal/>`
 
 ## Overview
 
-This component makes it easy to include a nice-looking faux Terminal window in your docs, to show input and output from a CLI. The input lines also have a copy button, to make it easy to run the commands yourself.
+Include a nice-looking faux Terminal window in your docs, to show input and output from a CLI. The input lines also have a copy button, to make it easy to run the commands yourself.
 
 ![Terminal](terminal.png)
 
diff --git a/components/ToggleList/readme.md b/components/ToggleList/readme.md
@@ -1,8 +1,10 @@
-# `ToggleList`
+# `<ToggleList/>`
 
 ## Overview
 
-This component allows you to create a list of items where each item's content can be toggled opened or closed. This can be useful for gradually introducing content. For example maybe you want to tuck away details that might overwhelm the reader if displayed all at once, or maybe you want to hide the punchline of a joke!
+Create a list of items that expand and collapse. Useful for gradually introducing content. For example maybe you want to tuck away details that might overwhelm the reader if displayed all at once, or maybe you want to hide the punchline of a joke!
+
+<img alt="Toggle List" src="toggle-list.png" width="800" />
 
 ## Usage
 
diff --git a/components/Windows/readme.md b/components/Windows/readme.md
@@ -1,8 +1,8 @@
-# Windows
+# `<Windows/>`
 
 ## Overview
 
-This component brings a retro Windows vibe to your docs.
+Bring a retro Windows vibe to your docs.
 
 ![Windows](windows.png)
 
