Finalizes content to open pr.

Author: edonehoo

packages/documentation-site/patternfly-docs/content/components/pagination/pagination.md

@@ -12,62 +12,80 @@ Pagination allows users to conveniently navigate through content-dense component
 ![a full page demo with a table and a pagination component within a toolbar.](./img/pagination-elements.svg)
 </div>
 
-1. **Top pagination:** Placed above the component it controls and right-aligned.
+1. **Top pagination:** Placed above the component it controls and aligned to the right.
 
-2. **Bottom pagination:** Placed below the component it controls. Right-aligned for desktop views and center-aligned for mobile. If you want the bottom pagination to be sticky so it does not move out of view as users scroll through long content, place it directly after the component it controls and refer to the [React sticky pagination](/components/pagination#sticky) or [HTML bottom sticky pagination](/components/pagination/html#bottom-sticky) examples for further implementation guidance.
+2. **Bottom pagination:** Placed below the component it controls. Right-aligned for desktop views and center-aligned for mobile. If you want bottom pagination to be sticky so that it remains in view as users scroll through long content, place it directly after the component it controls and refer to the [React sticky pagination](/components/pagination#sticky) or [HTML sticky pagination](/components/pagination/html#bottom-sticky) examples for implementation guidance.
 
 ## Variations 
 
-- [Full pagination](#full-pagination) 
-- [Compact pagination](#compact-pagination)
-- [Indeterminate pagination](#indeterminate-pagination)
+There are 3 pagination variations you can choose from, depending on your use case:
+- [Full pagination:](#full-pagination) The default component to use for most desktop views when space is not a major constraint. 
+- [Compact pagination:](#compact-pagination) Used for narrow spaces or as the primary control for mobile views.
+- [Indeterminate pagination:](#indeterminate-pagination) Used when the total number of items is unknown.
 
 ### Full pagination
 
-A default "full pagination" component contains multiple controls for navigating the related component. Use a full pagination unless you're restricted to a narrow workspace, in which can you should use a [compact pagination](#compact-pagination) instead. 
-
-When using full pagination a toolbar, you'll have limited room for other items like bulk selectors, buttons, filters, or input fields. You can still incorporate these additional actions with an [overflow menu](/components/toolbar/design-guidelines#overflow-menu), which will automatically form when those additional items need to collapse at specific breaking points. On mobile, full pagination will also collapse to a pagination summary with an item count. Learn how to customize overflow menu breakpoints in our [toolbar design guidelines](/components/toolbar/design-guidelines).
-
-#### Desktop full pagination in toolbar
-
 <div class="ws-docs-content-img">
-![an example of a desktop pagination component within a toolbar.](./img/toolbar-pagination.svg)
+![Annotations for each element of a full pagination.](./img/full-pagination.svg)
 </div>
 
-1. **Displayed items selector:** Allows users to choose the number of items shown at once.
+1. **Per-page selector:** Used to choose the number of items displayed on a single page at once.
+2. **First page/last page:** Used to jump to the first or last page of content.
+3. **Previous page/next page:** Used to navigate back or forward one page of content at a time.
+4. **Current page (interactive):** Displays the current location and the total number of pages of content. Users can also manually type in a page number to jump to a desired location.
 
-2. **Full pagination:** Supplies pagination controls, including page-back and page-forward, page-first and page-last, and a manual option to type in a desired page number.
+Full pagination contains a variety of controls that can be used to navigate the linked component, like a table or card view. This is the default recommendation, unless you're restricted in space or for use on mobile devices, in which case you should use [compact pagination](#compact-pagination) instead.
 
-#### Mobile full pagination in toolbar
+### Compact pagination
 
 <div class="ws-docs-content-img">
-![Example of pagination on mobile table view.](./img/mobile-pagination.svg)
+![Example of a compact pagination.](./img/compact-pagination.svg)
 </div>
 
-1. **Pagination summary:** At this screen size, the top toolbar only shows the item count to summarize the number of items currently in view. It hides all other pagination controls.
+1. **Per-page selector:** Used to choose the number of items displayed on a single page at once.
+2. **Previous page/next page:** Used to navigate back or forward one page of content at a time.
 
-2. **Full pagination:** Supplies pagination controls, including page-back, page-forward, and a displayed items selector, which allows users to choose the number of items shown at once.
+Compact pagination reduces visual crowding and saves space for additional actions in limited spaces, like toolbars. 
 
-The default recommendation for using pagination in mobile views is to place a pagination summary above the component it controls and a full pagination below the component, as shown in this example. If you can't use bottom pagination, or if you can't use the fall pager in the bottom toolbar for some reason, only then you can place the full pagination in the top toolbar. **Do not** use a full pagination in both the top and bottom toolbars.
+### Indeterminate pagination
 
-### Compact pagination
+When it's difficult to calculate the total number of items or page count upfront, you can use an indeterminate pagination, which replaces the total page number in the per-page selector with a general label of “many”. Users can still choose the number of items shown at once, and the indeterminate label can be used within both full and compact pagination components.
+
+<div class="ws-docs-content-img">
+![Example of a indeterminate pagination.](./img/indeterminate-pagination.svg)
+</div>
 
-Compact pagination saves space for additional actions in limited spaces, like toolbars, and can help reduce visual crowding. Like with full pagination, compact pagination condenses to a pagination summary for mobile views.
+## Placement
 
-#### Desktop compact pagination in toolbar
+### Desktop
+
+For desktop views, place a full pagination component above the content it controls,  typically within a toolbar.
 
 <div class="ws-docs-content-img">
-![Example of a compact pagination.](./img/compact-pagination.svg)
+![an example of a desktop pagination component within a toolbar.](./img/toolbar-pagination.svg)
 </div>
 
-1.  **Displayed items selector:** Allows users to choose the number of items shown at once.
+1. **Per-page selector:**  Used to choose the number of items displayed on a single page at once.
 
-2. **Compact pagination:** Supplies pagination controls, including page-back and page-next controls.
+2. **Full pagination:** Supplies data navigation controls, including previous page and next page, first page and last page, and a manual option to type in a desired page number.
 
-### Indeterminate pagination
+When used in a toolbar, pagination may leave limited room for other items like filters or bulk selectors. These additional items will automatically move into an [overflow menu](/components/toolbar/design-guidelines#overflow-menu) as needed.
+
+For components with long, scrolling content (like a table), you can add a second full pagination component below the content to ensure that users can navigate without having to scroll back to the top.
+
+### Mobile 
 
-Use indeterminate pagination if it’s difficult to calculate the total number of items or page count upfront. In these cases, you use “many” instead of a specific page count that would otherwise appear. Users can still select this control to choose the number of items shown at once.
+Mobile pagination is formatted differently in order to conserve space. On mobile, full pagination will collapse to a pagination summary with an item count. [Learn how to customize overflow menu breakpoints in our toolbar design guidelines](/components/toolbar/design-guidelines).
 
 <div class="ws-docs-content-img">
-![Example of a indeterminate pagination.](./img/indeterminate-pagination.svg)
-</div>
+![Example of pagination on mobile table view.](./img/mobile-pagination.svg)
+</div>
+
+1. **Pagination summary:** A non-interactive count of items currently displayed. 
+
+2. **Mobile pagination:** A type of compact pagination, with a previous page, next page, and a per-page selector, which allows users to choose the number of items shown at once. Mobile views use compact styling, which removes the first page and last page controls. 
+
+When using pagination in mobile views, follow these best practices: 
+- As shown in this example, place a pagination summary above the component it controls and a mobile pagination below the component. 
+- Do not use full pagination in both the top and bottom toolbars.
+- If you can't use bottom pagination, or if you can't use the compact pagination in the bottom toolbar for some reason, only then you can place the compact pagination in the top toolbar.