diff --git a/packages/website/docs/components/display/empty_prompt/guidelines.mdx b/packages/website/docs/components/display/empty_prompt/guidelines.mdx
new file mode 100644
index 00000000000..40ace643b93
--- /dev/null
+++ b/packages/website/docs/components/display/empty_prompt/guidelines.mdx
@@ -0,0 +1,101 @@
+---
+slug: /display/empty-prompt/guidelines
+id: display_empty_prompt_guidelines
+title: Empty prompt guidelines
+sidebar_label: Guidelines
+---
+
+import { EuiFlexGroup } from '@elastic/eui';
+
+## Anatomy
+
+A useful empty state will let the user know what's happening, why it's happening, and what to do about it. It can contribute to a more compelling user experience and add more value to the business if done right.
+
+To make the empty state clear, follow this pattern:
+
+import { EuiAspectRatio } from '@elastic/eui';
+
+
+
+
+
+1. **Icon or illustration (optional):** A meaningful representation of the the solution or context.
+2. **Title:** Answers the question "What's happening?". Is it an error? Is it loading?
+3. **Description:** Why is it happening? Explain why the space is empty and guide the users through the required actions.
+4. **Action(s):** Your call to actions should answer the question "What will solve the issue?". Lead the users to take action or guide them about the next steps.
+5. **Footer (optional):** Use this section to reference documentation or link to an area where users can learn more about the issue they are facing.
+
+## Empty state types, goals, and recommendations
+
+The following scenarios detail the most common empty states use cases and provide recommendations for use with **EuiPageTemplate**.
+
+import { TypesOfEmptyStates } from './types_of_empty_states';
+
+
+
+## Design
+
+### Vertical vs. horizontal
+
+The vertical layout is perfect when the content is small — a title and two paragraphs at most. You can use this layout with an icon, an illustration, or no icons at all.
+
+Use the horizontal layout when you have a long description, multiple calls to action, and a footer. For this type of layout, an illustration is required.
+
+
+
+ 
+
+
+ 
+
+
+
+### Icons and illustrations
+
+Icons and illustrations must first and foremost communicate meaning. They are also an opportunity to delight users and show our Elastic brand.
+
+When using an illustration, bear in mind that they stand out a lot. Use one illustration per page. Having multiple illustrations might make the page too crowded.
+
+
+
+ 
+
+
+ 
+
+
+
+### Learn more links
+
+"Learn more" links are optional. You can use them in your empty prompt to link to documentation where users can get more detailed help.
+
+Include the link after the description when the empty prompt doesn't contain a call to action. If there is a call to action, include the link in the footer.
+
+
+
+ 
+
+
+ 
+
+
+
+### Multiple empty states
+
+When a page has multiple empty states, avoid using multiple primary actions and multiple icons or illustrations.
+
+Use secondary actions and no icons or illustrations. This way, the visual noise will be reduced. Consider using an illustration or a primary action if you want to make one of the empty states stand out.
+
+
+
+ 
+
+
+ 
+
+
diff --git a/packages/website/docs/components/display/empty_prompt/multiple_types.tsx b/packages/website/docs/components/display/empty_prompt/multiple_types.tsx
index 56cdef30448..35f5732ab9f 100644
--- a/packages/website/docs/components/display/empty_prompt/multiple_types.tsx
+++ b/packages/website/docs/components/display/empty_prompt/multiple_types.tsx
@@ -2,17 +2,7 @@ import React, { useState } from 'react';
import { EuiSelect, useEuiTheme } from '@elastic/eui';
-// @ts-expect-error Docusaurus theme is missing types for this component
-import { Demo } from '@elastic/eui-docusaurus-theme/lib/components/demo';
-
-// @ts-ignore - not typed
-import pageNotFoundDark from './pageNotFound--dark.png';
-// @ts-ignore - not typed
-import pageNotFoundLight from './pageNotFound--light.png';
-// @ts-ignore - not typed
-import accessDeniedDark from './accessDenied--dark.png';
-// @ts-ignore - not typed
-import accessDeniedLight from './accessDenied--light.png';
+import { Demo } from '@elastic/eui-docusaurus-theme/lib/components/demo/demo.js';
const types: Array<{
value: string;
@@ -27,7 +17,11 @@ const types: Array<{
icon={
}
@@ -57,7 +51,11 @@ const types: Array<{
icon={
}
diff --git a/packages/website/docs/components/display/empty_prompt/overview.mdx b/packages/website/docs/components/display/empty_prompt/overview.mdx
index 91abe633a2e..e31aa849b28 100644
--- a/packages/website/docs/components/display/empty_prompt/overview.mdx
+++ b/packages/website/docs/components/display/empty_prompt/overview.mdx
@@ -3,11 +3,13 @@ slug: /display/empty-prompt
id: display_empty_prompt
---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
# Empty prompt
The **EuiEmptyPrompt** is the building block to create an empty state. You can use it as a placeholder for any type of empty content. They are especially helpful for replacing entire pages or parts of a product that contain no content.
-Be sure to read the full [empty prompt usage guidelines](/docs/guidelines/empty-prompt).
+Be sure to read the full [empty prompt usage guidelines](./guidelines).
While no one piece of content is required, each **EuiEmptyPrompt** should contain at least a `title` (wrapped in an HTML heading element) and/or a `description`. They usually contain one or more `actions` that promotes the primary call-to-actions. You can also provide a `footer` to direct users towards making informed decisions.
@@ -172,9 +174,7 @@ You can supply a `layout` of either `"horizontal"` or `"vertical"` with the defa
When you have longer body text with multiple calls to action, you can use the `horizontal` layout. This layout works best when you can provide a larger graphic like an illustration as the `icon`. For consistency, we recommend providing the illustration using a [**EuiImage**](/docs/display/image) with `size="fullWidth"`.
-import illustration from '!url-loader!./illustration.svg';
-
-
+
```tsx
import React from 'react';
import {
@@ -189,7 +189,7 @@ import illustration from '!url-loader!./illustration.svg';
return (
<>
}
+ icon={}
title={
Create your first visualization
}
layout="horizontal"
color="plain"
@@ -241,7 +241,7 @@ When using a **EuiEmptyPrompt** in a [**EuiPageTemplate**](/docs/templates/page-
The following example shows the usage of the [**EuiPageTemplate.EmptyPrompt**](/docs/templates/page-template#empty-pages-or-content) namespaced component.
-
+
```tsx
import React from 'react';
import {
@@ -256,7 +256,7 @@ The following example shows the usage of the [**EuiPageTemplate.EmptyPrompt**](/
Create your first visualization}
- icon={}
+ icon={}
color="plain"
layout="horizontal"
body={
diff --git a/packages/website/docs/components/display/empty_prompt/types_of_empty_states/colors.tsx b/packages/website/docs/components/display/empty_prompt/types_of_empty_states/colors.tsx
new file mode 100644
index 00000000000..f81cca2be95
--- /dev/null
+++ b/packages/website/docs/components/display/empty_prompt/types_of_empty_states/colors.tsx
@@ -0,0 +1,61 @@
+import { EuiCode } from '@elastic/eui';
+
+export const TYPES_OF_PANEL_COLORS = {
+ sidebar: {
+ id: 'sidebar',
+ text: (
+ <>
+
+ Set {'color="subdued"'} to make users not getting
+ distracted and focus on the content.
+
+
+ Consider the transparent color if the empty prompt is contained in
+ another component.
+
+ Set {'color="plain” and hasBorder={true}'} when you
+ have multiple panels on the page. The other panels should also have
+ borders to ensure consistency.
+
+
+ Consider the transparent color if the empty prompt is contained in
+ another component.
+
+
+ ),
+ },
+ error: {
+ id: 'error',
+ text: (
+
+ Set {'color="danger"'} to emphasize that an error
+ happened.
+
Help users understand how they can start using the product.
+
+ For no data use cases, consider using a{' '}
+ EuiCard. In Kibana,
+ you just need to pass a no data configuration into your{' '}
+
+ KibanaPageTemplate
+ {' '}
+ to display a specific UI that guides users to add data.
+
+
+ ),
+ action: (
+
+ Actions specific to first use. For example: “Add cases”, “Create job”,
+ “Add workpad”.
+
,
+ alt: "An outer space illustration. In the background is a large moon and two planets. In the foreground is an astronaut floating in space and the numbers '404'.",
+ body: (
+
+ Sorry, we can't find the page you're looking for. It might
+ have been removed or renamed, or maybe it never existed.
+
+ ),
+ actions: [
+
+ Go home
+ ,
+
+ Go back
+ ,
+ ],
+ },
+ },
+ licenseUpgrade: {
+ id: 'licenseUpgrade',
+ label: 'License upgrade',
+ info: {
+ description:
No license to use a feature.
,
+ goal: (
+
+ Help users understand that they don't have the required license
+ to access a feature and what actions they need to perform to upgrade
+ the license.
+
,
+ },
+ },
+};
diff --git a/packages/website/docs/components/display/empty_prompt/types_of_empty_states/utils.ts b/packages/website/docs/components/display/empty_prompt/types_of_empty_states/utils.ts
new file mode 100644
index 00000000000..2984fb32c30
--- /dev/null
+++ b/packages/website/docs/components/display/empty_prompt/types_of_empty_states/utils.ts
@@ -0,0 +1,42 @@
+import React from 'react';
+import reactElementToJSXString from 'react-element-to-jsx-string';
+
+import { TYPES_OF_USE_CASES, UseCaseTypeKeys } from './use_cases';
+
+function isReactComponent(type: any): type is React.ComponentType {
+ return (
+ typeof type === 'function' || (typeof type === 'object' && type !== null)
+ );
+}
+
+// Because of how `EuiPage*` components are named, we need to manually remove the pre-pended underscore
+function getDisplayName(node: React.ReactNode): string {
+ let name = 'Unknown';
+
+ if (React.isValidElement(node)) {
+ const component = node.type;
+
+ if (isReactComponent(component)) {
+ const componentName =
+ component.displayName || component.name || 'Unknown';
+
+ name = componentName.startsWith('_')
+ ? componentName.substring(1)
+ : componentName;
+ } else if (typeof component === 'string') {
+ name = component;
+ }
+ }
+
+ return name;
+}
+
+export function convertToJsxString(element: React.ReactNode) {
+ return reactElementToJSXString(element, {
+ displayName: getDisplayName,
+ });
+}
+
+export function isUseCaseTypeKey(value: string): value is UseCaseTypeKeys {
+ return Object.keys(TYPES_OF_USE_CASES).includes(value);
+}
diff --git a/packages/website/docs/components/display/toast/guidelines.mdx b/packages/website/docs/components/display/toast/guidelines.mdx
new file mode 100644
index 00000000000..6eadd6c68ea
--- /dev/null
+++ b/packages/website/docs/components/display/toast/guidelines.mdx
@@ -0,0 +1,311 @@
+---
+slug: /display/toast/guidelines
+id: display_toast_guidelines
+title: Toast guidelines
+sidebar_label: Guidelines
+---
+
+import { EuiButton, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiToast } from '@elastic/eui';
+
+This page documents patterns for using toasts, short messages that appears on the lower right corner and time out after a few seconds. They are a popular design choice because they don't need to fit in a layout and don't disrupt the user.
+
+
+
+
+
+
+
+
+ **Success toasts indicate that everything worked out.**\
+ They are the most-commonly used toasts.
+
+
+
+
+
+
+
+
+
+
+ **Warning toasts direct user attention to a potential problem.**\
+ You should receive a warning message when the program detects that something is not behaving right, but it didn't cause any termination.
+
+
+
+
+
+
+
+
+
+
+ **Error toasts report a problem.**\
+ You should receive an error message when the issue is terminal, this doesn't always mean that the operation stops completely, but the task is not complete.
+
+
+
+
+
+
+
+
+
+
+ **Info toasts relay neutral information.**\
+ The default toast, an info toast might notify users about an ongoing action.
+
+
+
+
+
+## Use a toast for a timely message
+
+Toasts are appropriate for short feedback related to a user action. A toast should contain a message about a current action, not a historical action.
+
+
+
+
+
+
+
+
+
+
+## Most often, it's a single line of text
+
+By default, a toast stays on the screen 10 seconds. Users should be able read the message in 6 to 7 seconds. The message should get straight to the point and rarely include more than one line.
+
+
+
+
+
+
+
+
+
Username is a required field.
+
Password must be at least 6 characters long.
+
Email is a required field.
+
+
+
+
+
+## Toasts should only contain a single action
+
+A toast can have a single action, styled as a standard button. If more actions are needed, or if the action is important enough to interrupt the user, use a modal instead.
+
+
+
+
+
+ Download
+
+
+
+
+
+
+
+ Cancel
+
+
+ Delete
+
+
+
+
+
+
+## Icons should emphasize actions
+
+An icon on the left of the message can help define the message type.
+
+
+
+
+
+
+
+
+
+
+
+
+## Display one toast at a time
+
+Users should be able to take in all the details from one toast before the next one arrives.
+
+
+
+
+
+
+
+
+ Learn more
+
+
+
+
+
+
+
+## Keep messages as short as possible
+
+For common actions such as create, add, delete, remove, and save, include the object type, the object name if available, and the past tense of the action.
+
+
+
+
+
+
+
+
+
+
+Don't include the word "successfully." It's implied.
+
+
+
+
+
+
+
+
+
+
+For a message about multiple objects, include the object count, but not the names of the objects.
+
+
+
+
+
+
+
+
+
+
+## Use call-to-action buttons when the content needs more room
+
+Occasionally, the content of a toast is too involved to fit into the constrained space of a toast. This is common in long error messages. In these cases use the toast to deliver the summary of the information and use a button to provide a call-to-action for the full message.
+
+
+
+
+
The maximum bucket size of 200 was exceeded.
+
+ {}}>See the full error
+
+
+
+
+
+
+
An extremely long error trace.
+
+
+
+
diff --git a/packages/website/docs/components/display/toast/overview.mdx b/packages/website/docs/components/display/toast/overview.mdx
index 89f23a6f414..96df85344a8 100644
--- a/packages/website/docs/components/display/toast/overview.mdx
+++ b/packages/website/docs/components/display/toast/overview.mdx
@@ -7,7 +7,7 @@ import previewWrapper from './preview_wrapper';
# Toast
-Be sure to read the full [toast usage guidelines](/docs/guidelines/toast).
+Be sure to read the full [toast usage guidelines](./guidelines).
## Toast list
diff --git a/packages/website/docs/components/display/tour/guidelines.mdx b/packages/website/docs/components/display/tour/guidelines.mdx
new file mode 100644
index 00000000000..9928a11a27a
--- /dev/null
+++ b/packages/website/docs/components/display/tour/guidelines.mdx
@@ -0,0 +1,120 @@
+---
+slug: /display/tour/guidelines
+id: display_tour_guidelines
+title: Tour guidelines
+sidebar_label: Guidelines
+---
+
+import { EuiAspectRatio, EuiFlexGroup, EuiFlexItem, EuiImage, EuiPanel, EuiSpacer } from '@elastic/eui';
+
+import image1Do from '!url-loader!./tour_1_do.svg';
+import image1Dont from '!url-loader!./tour_1_dont.svg';
+import image6Example from '!url-loader!./tour_6.gif';
+
+This page documents best practices for tour design including content, length and use cases.
+
+## When to use tours
+
+Use tours when you want users to learn about specific UI elements and how interacting with them will help them achieve a goal. When you want to help users perform an action but don't want to provide step by step guidance, you can use empty states instead as seen in EuiEmptyPrompt.
+
+For certain users, product tours can feel intrusive so first assess the fit for your use case and users. The goal is for the product tour to be a tool that helps the user learn new things and accomplish their goals. Three good scenarios for using a product tour are:
+
+1. New users seeing an interface for the first time.
+2. Novice users trying to gain proficiency in your application.
+3. Existing users need to be onboarded when new features or redesigns are released.
+
+Additionally, consider asking users if they're interested in checking out your product tour instead of just showing it to them.
+
+## Provide concise yet valuable information
+
+If you include information that is too obvious or basic, it is more likely that the user will dismiss the product tour and start perceiving them as low value. If further explanation is needed, consider linking out to documentation.
+
+
+
+
+
+
+
+
+
+
+## Explain why the actions you want users to perform are useful
+
+If users see value in an action they'll be more likely to engage.
+
+
+
+
+
+## Keep the tone conversational and friendly
+
+Good copy is a key element for a product tour's success. Make sure you work alongside a writer in this process.
+
+
+
+
+
+## Allow users to end and restart the tour at any time
+
+You can include a “Skip tour” button in your step's footer. Users might be quick to dismiss a tour but realize they need to use it later on. Give them the option to re-trigger the tour at any time. A good spot for a tour's trigger is the application's help menu.
+
+
+
+
+
+
+
+
+
+ ## Keep your tours short
+
+ The more steps, the less likely it is that a user will complete a tour. If you need to decide which steps to drop, think of the ones the user is more likely to be able to figure out on their own.
+
+
+ ## Be careful when using action-driven tours
+
+ Tours where one step cannot be completed until the previous step has been completed can lead to the user feeling trapped. A nice detail when using this type of tours is to automatically take the user to the next step upon completion of the current step, instead of having to click on Next.
+
+
+ ## Adjust your tour based on UX research
+
+ Once your tour goes live, monitor user behavior to learn about what's working and identify drop-off points. Based on that, iterate on your tour.
+
+
+
+## Consider using animation gifs
+
+A short, nicely crafted animation can be very effective for teaching a user about a feature.
+
+
+
+
+
+
diff --git a/packages/website/docs/components/display/tour/tour_1_do.svg b/packages/website/docs/components/display/tour/tour_1_do.svg
new file mode 100644
index 00000000000..f6f7860c476
--- /dev/null
+++ b/packages/website/docs/components/display/tour/tour_1_do.svg
@@ -0,0 +1,74 @@
+
diff --git a/packages/website/docs/components/display/tour/tour_1_dont.svg b/packages/website/docs/components/display/tour/tour_1_dont.svg
new file mode 100644
index 00000000000..9fe4a4319e1
--- /dev/null
+++ b/packages/website/docs/components/display/tour/tour_1_dont.svg
@@ -0,0 +1,75 @@
+
diff --git a/packages/website/docs/components/display/tour/tour_6.gif b/packages/website/docs/components/display/tour/tour_6.gif
new file mode 100644
index 00000000000..2f6239eb7de
Binary files /dev/null and b/packages/website/docs/components/display/tour/tour_6.gif differ
diff --git a/packages/website/docs/components/forms/form_controls/guidelines.mdx b/packages/website/docs/components/forms/form_controls/guidelines.mdx
new file mode 100644
index 00000000000..8add2aecfe0
--- /dev/null
+++ b/packages/website/docs/components/forms/form_controls/guidelines.mdx
@@ -0,0 +1,149 @@
+---
+slug: /forms/form-controls/guidelines
+id: forms_form_controls_guidelines
+title: Form controls guidelines
+sidebar_label: Guidelines
+---
+
+import { EuiButton, EuiFieldSearch, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiFieldText } from '@elastic/eui';
+
+## Labels
+
+Avoid long labels, but don't sacrifice clarity. If needed, put additional information in help text and tooltips.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Hint text
+
+Place hints and instructions outside a text field so it is always visible to the user. Keep the hint text short, maximum two sentences long. Use hint text to:
+
+* Explain **why you are asking a certain question**: "We will only email you if there is a problem with your order."
+* Provide **clarifying details** on what to type: "Enter the full 32-character ID."
+* Tell the user **where to find the information** you're asking for: "Find the Elasticsearch cluster ID on the main administration page of your deployment."
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Placeholder text
+
+### In fields
+
+Use the placeholder property to describe the expected value of the input or to provide a useful example.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Add placeholder text in addition to field labels and help text, not as a replacement. Omit it if it doesn't add value for users. And keep it short.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Add
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Add
+
+
+
+
+
+
+### In search bars
+
+In a search bar, be specific about what users can enter.
+
+
+
+
+
+
+
+
+
diff --git a/packages/website/docs/components/forms/selection_controls/guidelines.mdx b/packages/website/docs/components/forms/selection_controls/guidelines.mdx
new file mode 100644
index 00000000000..fac21e64e18
--- /dev/null
+++ b/packages/website/docs/components/forms/selection_controls/guidelines.mdx
@@ -0,0 +1,397 @@
+---
+slug: /forms/selection-controls/guidelines
+id: forms_selection_controls_guidelines
+title: Selection controls guidelines
+sidebar_label: Guidelines
+---
+
+import { EuiBasicTable, EuiCheckboxGroup, EuiFlexGroup, EuiFormRow, EuiImage, EuiRadioGroup, EuiSwitch } from '@elastic/eui';
+
+import singleSvg from '!url-loader!./single.svg';
+
+## Labels
+
+### Checkbox and radio button labels
+
+A label should be succinct, short, and descriptive with one to two words. This way users can quickly scan the available options.
+
+
+
+ {}}
+ name="radio group"
+ />
+
+
+ {}}
+ name="radio group"
+ />
+
+
+
+Use positive and active wording.
+
+
+
+ {}}
+ idToSelectedMap={
+ ({ positive_do_one: true }, { positive_do_two: true })
+ }
+ />
+
+
+ {}}
+ idToSelectedMap={{ positive_dont_one: true }}
+ />
+
+
+
+Use sentence case (capitalize the first word).
+
+
+
+ {}}
+ idToSelectedMap={{ access_do_one: true }}
+ />
+
+
+ {}}
+ idToSelectedMap={{ access_dont_one: true }}
+ />
+
+
+
+Use consistent label structures for options within the same group.
+
+
+
+ {}}
+ idToSelectedMap={{ group_title_do_one: true }}
+ legend={{
+ children: Data to ship,
+ }}
+ />
+
+
+ {}}
+ idToSelectedMap={{ group_title_dont_one: true }}
+ legend={{
+ children: Data to ship,
+ }}
+ />
+
+
+
+
+
+ {}}
+ name="radio group"
+ legend={{
+ children: Availability zones,
+ }}
+ />
+
+
+ {}}
+ name="radio group"
+ legend={{
+ children: Availability zones,
+ }}
+ />
+
+
+
+### Legends
+
+For groups of options, add a legend that gives meaning to the options. Legends appear like a title.
+
+
+
+ {}}
+ idToSelectedMap={{ group_title_do_one: true }}
+ legend={{
+ children: Data to ship,
+ }}
+ />
+
+
+ {}}
+ idToSelectedMap={{ group_title_do_one: true }}
+ legend={{
+ children: Choose to ship logs and/or metrics,
+ }}
+ />
+
+
+
+### Switch labels
+
+The label should be static, action-oriented, and describe the feature. Avoid verbs that are less conversational such as "enable" unless they are your only option.
+
+
+
+ {}}
+ label="Malware protection"
+ />
+
+
+ {}}
+ label="If enabled, uses malware protection"
+ />
+
+
+
+
+
+
+ {}}
+ label="Use recommended defaults"
+ />
+
+
+
+ {}} label="Enable" />
+
+
+
+Use past tense only when labelling a list of previously created items, like in a table header.
+
+
+
+ (
+ {}}
+ compressed
+ showLabel={false}
+ label="Enabled"
+ />
+ ),
+ },
+ {
+ field: 'name',
+ name: ,
+ render: () => ,
+ },
+ {
+ field: 'version',
+ name: ,
+ render: () => ,
+ },
+ {
+ field: 'description',
+ name: ,
+ render: () => ,
+ },
+ ]}
+ items={[
+ {
+ id: '1',
+ enabled: true,
+ },
+ {
+ id: '2',
+ enabled: false,
+ },
+ {
+ id: '3',
+ enabled: true,
+ },
+ {
+ id: '4',
+ enabled: false,
+ },
+ ]}
+ tableLayout="auto"
+ responsiveBreakpoint={false}
+ />
+
+
+ {}} label="Log enabled" />
+
+
diff --git a/packages/website/docs/components/forms/selection_controls/single.svg b/packages/website/docs/components/forms/selection_controls/single.svg
new file mode 100644
index 00000000000..61639413a19
--- /dev/null
+++ b/packages/website/docs/components/forms/selection_controls/single.svg
@@ -0,0 +1,5 @@
+
diff --git a/packages/website/docs/components/display/empty_prompt/accessDenied--dark.png b/packages/website/static/images/empty_prompt/accessDenied--dark.png
similarity index 100%
rename from packages/website/docs/components/display/empty_prompt/accessDenied--dark.png
rename to packages/website/static/images/empty_prompt/accessDenied--dark.png
diff --git a/packages/website/docs/components/display/empty_prompt/accessDenied--light.png b/packages/website/static/images/empty_prompt/accessDenied--light.png
similarity index 100%
rename from packages/website/docs/components/display/empty_prompt/accessDenied--light.png
rename to packages/website/static/images/empty_prompt/accessDenied--light.png
diff --git a/packages/website/static/images/empty_prompt/content_center.svg b/packages/website/static/images/empty_prompt/content_center.svg
new file mode 100644
index 00000000000..ee3b9ecab61
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/content_center.svg
@@ -0,0 +1,7 @@
+
diff --git a/packages/website/docs/components/display/empty_prompt/illustration.svg b/packages/website/static/images/empty_prompt/illustration.svg
similarity index 100%
rename from packages/website/docs/components/display/empty_prompt/illustration.svg
rename to packages/website/static/images/empty_prompt/illustration.svg
diff --git a/packages/website/static/images/empty_prompt/no-results--dark.svg b/packages/website/static/images/empty_prompt/no-results--dark.svg
new file mode 100644
index 00000000000..e76cfc10272
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/no-results--dark.svg
@@ -0,0 +1,416 @@
+
diff --git a/packages/website/static/images/empty_prompt/no-results--light.svg b/packages/website/static/images/empty_prompt/no-results--light.svg
new file mode 100644
index 00000000000..a2546872380
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/no-results--light.svg
@@ -0,0 +1,416 @@
+
diff --git a/packages/website/docs/components/display/empty_prompt/pageNotFound--dark.png b/packages/website/static/images/empty_prompt/pageNotFound--dark.png
similarity index 100%
rename from packages/website/docs/components/display/empty_prompt/pageNotFound--dark.png
rename to packages/website/static/images/empty_prompt/pageNotFound--dark.png
diff --git a/packages/website/static/images/empty_prompt/pageNotFound--dark@2x.png b/packages/website/static/images/empty_prompt/pageNotFound--dark@2x.png
new file mode 100644
index 00000000000..ad1ff50910b
Binary files /dev/null and b/packages/website/static/images/empty_prompt/pageNotFound--dark@2x.png differ
diff --git a/packages/website/docs/components/display/empty_prompt/pageNotFound--light.png b/packages/website/static/images/empty_prompt/pageNotFound--light.png
similarity index 100%
rename from packages/website/docs/components/display/empty_prompt/pageNotFound--light.png
rename to packages/website/static/images/empty_prompt/pageNotFound--light.png
diff --git a/packages/website/static/images/empty_prompt/pageNotFound--light@2x.png b/packages/website/static/images/empty_prompt/pageNotFound--light@2x.png
new file mode 100644
index 00000000000..ae3aca28388
Binary files /dev/null and b/packages/website/static/images/empty_prompt/pageNotFound--light@2x.png differ
diff --git a/packages/website/static/images/empty_prompt/side_nav.svg b/packages/website/static/images/empty_prompt/side_nav.svg
new file mode 100644
index 00000000000..73d1f0e1ef9
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/side_nav.svg
@@ -0,0 +1,12 @@
+
diff --git a/packages/website/static/images/empty_prompt/thumbnail_dark_empty_content.svg b/packages/website/static/images/empty_prompt/thumbnail_dark_empty_content.svg
new file mode 100644
index 00000000000..12cd8cc3c78
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/thumbnail_dark_empty_content.svg
@@ -0,0 +1,8 @@
+
diff --git a/packages/website/static/images/empty_prompt/thumbnail_dark_page-empty.svg b/packages/website/static/images/empty_prompt/thumbnail_dark_page-empty.svg
new file mode 100644
index 00000000000..b8d0938d3ea
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/thumbnail_dark_page-empty.svg
@@ -0,0 +1,27 @@
+
diff --git a/packages/website/static/images/empty_prompt/thumbnail_dark_page-multiple.svg b/packages/website/static/images/empty_prompt/thumbnail_dark_page-multiple.svg
new file mode 100644
index 00000000000..9b8b3daf1eb
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/thumbnail_dark_page-multiple.svg
@@ -0,0 +1,53 @@
+
diff --git a/packages/website/static/images/empty_prompt/thumbnail_dark_page-sidebar.svg b/packages/website/static/images/empty_prompt/thumbnail_dark_page-sidebar.svg
new file mode 100644
index 00000000000..e95232cbc81
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/thumbnail_dark_page-sidebar.svg
@@ -0,0 +1,16 @@
+
diff --git a/packages/website/static/images/empty_prompt/thumbnail_footer-link.svg b/packages/website/static/images/empty_prompt/thumbnail_footer-link.svg
new file mode 100644
index 00000000000..a5ab9b08b17
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/thumbnail_footer-link.svg
@@ -0,0 +1,47 @@
+
diff --git a/packages/website/static/images/empty_prompt/thumbnail_horizontal.svg b/packages/website/static/images/empty_prompt/thumbnail_horizontal.svg
new file mode 100644
index 00000000000..ffb40fe5581
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/thumbnail_horizontal.svg
@@ -0,0 +1,47 @@
+
diff --git a/packages/website/static/images/empty_prompt/thumbnail_icon-do.svg b/packages/website/static/images/empty_prompt/thumbnail_icon-do.svg
new file mode 100644
index 00000000000..3c69daa0cad
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/thumbnail_icon-do.svg
@@ -0,0 +1,48 @@
+
diff --git a/packages/website/static/images/empty_prompt/thumbnail_icon-dont.svg b/packages/website/static/images/empty_prompt/thumbnail_icon-dont.svg
new file mode 100644
index 00000000000..6301ae00261
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/thumbnail_icon-dont.svg
@@ -0,0 +1,45 @@
+
diff --git a/packages/website/static/images/empty_prompt/thumbnail_inline-link.svg b/packages/website/static/images/empty_prompt/thumbnail_inline-link.svg
new file mode 100644
index 00000000000..b6f0eb72f4a
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/thumbnail_inline-link.svg
@@ -0,0 +1,48 @@
+
diff --git a/packages/website/static/images/empty_prompt/thumbnail_light_empty_content.svg b/packages/website/static/images/empty_prompt/thumbnail_light_empty_content.svg
new file mode 100644
index 00000000000..0ac477bc5c0
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/thumbnail_light_empty_content.svg
@@ -0,0 +1,8 @@
+
diff --git a/packages/website/static/images/empty_prompt/thumbnail_light_page-empty.svg b/packages/website/static/images/empty_prompt/thumbnail_light_page-empty.svg
new file mode 100644
index 00000000000..4a5fc21496e
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/thumbnail_light_page-empty.svg
@@ -0,0 +1,27 @@
+
diff --git a/packages/website/static/images/empty_prompt/thumbnail_light_page-multiple.svg b/packages/website/static/images/empty_prompt/thumbnail_light_page-multiple.svg
new file mode 100644
index 00000000000..b88215ff5cf
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/thumbnail_light_page-multiple.svg
@@ -0,0 +1,53 @@
+
diff --git a/packages/website/static/images/empty_prompt/thumbnail_light_page-sidebar.svg b/packages/website/static/images/empty_prompt/thumbnail_light_page-sidebar.svg
new file mode 100644
index 00000000000..eecf7c40535
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/thumbnail_light_page-sidebar.svg
@@ -0,0 +1,47 @@
+
diff --git a/packages/website/static/images/empty_prompt/thumbnail_multiple-do.svg b/packages/website/static/images/empty_prompt/thumbnail_multiple-do.svg
new file mode 100644
index 00000000000..14cd1a401c2
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/thumbnail_multiple-do.svg
@@ -0,0 +1,58 @@
+
diff --git a/packages/website/static/images/empty_prompt/thumbnail_multiple-dont.svg b/packages/website/static/images/empty_prompt/thumbnail_multiple-dont.svg
new file mode 100644
index 00000000000..2e7f084d816
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/thumbnail_multiple-dont.svg
@@ -0,0 +1,82 @@
+
diff --git a/packages/website/static/images/empty_prompt/thumbnail_vertical.svg b/packages/website/static/images/empty_prompt/thumbnail_vertical.svg
new file mode 100644
index 00000000000..48e8606bb8a
--- /dev/null
+++ b/packages/website/static/images/empty_prompt/thumbnail_vertical.svg
@@ -0,0 +1,46 @@
+
diff --git a/packages/website/static/images/single.svg b/packages/website/static/images/single.svg
new file mode 100644
index 00000000000..61639413a19
--- /dev/null
+++ b/packages/website/static/images/single.svg
@@ -0,0 +1,5 @@
+