{"componentChunkName":"component---src-pages-experimental-empty-state-pattern-index-mdx","path":"/experimental/empty-state-pattern/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Empty state pattern"},"relativePagePath":"/experimental/empty-state-pattern/index.mdx","titleType":"prepend","MdxNode":{"id":"59bf2f57-935a-5e93-b2ea-c208c4ebe246","children":[],"parent":"c5e8ad4a-e330-5c17-ad63-564699409152","internal":{"content":"---\ntitle: Empty state pattern\n---\n\n<PageDescription>\n\nEmpty states are useful when something is yet to be populated and is awaiting data or information. Another common use is when a search or filter yields no results.\n\n</PageDescription>\n\n#### Status:\n\n[Experimental](/experimental/overview/)\n\n#### Maintainer:\n\n[Vikki Paterson](https://github.com/vikkipaterson), [Chloe Poulter](https://github.com/chloepoulterdesign)\n\n![Contextual image](images/0.png)\n\n## Overview\n\n#### An empty state consists of:\n\n- An illustration that is relevant to the context or the product\n- A headline text explaining the reason for the empty state\n- A description of the resource contained typically found in the empty location\n\nDon't include the primary call to action in the empty space. The call to action should remain in the same location whether an area is populated or empty. This prevents confusing users as they become familiar with the system.\n\n<Row>\n <Column colLg={8}>\n\n![Example of an empty state when a search yields no results](images/1.png)\n\n<Caption>Example of an empty state when a search yields no results</Caption>\n\n </Column>\n</Row>\n<Row>\n <Column colLg={8}>\n\n![Example of an empty state when a table has not yet been populated](images/2.png)\n\n<Caption>\n  Example of an empty state when a table has not yet been populated\n</Caption>\n\n </Column>\n</Row>\n<Row>\n <Column colLg={8}>\n\n![Example of an empty state when a slide-over panel hasn't been populated yet](images/3.png)\n\n<Caption>\n  Example of an empty state when a slide-over panel hasn't been populated yet\n</Caption>\n\n </Column>\n</Row>\n","type":"Mdx","contentDigest":"6a6e86af67d28d0c4503c558c2329c61","counter":1426,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Empty state pattern"},"exports":{},"rawBody":"---\ntitle: Empty state pattern\n---\n\n<PageDescription>\n\nEmpty states are useful when something is yet to be populated and is awaiting data or information. Another common use is when a search or filter yields no results.\n\n</PageDescription>\n\n#### Status:\n\n[Experimental](/experimental/overview/)\n\n#### Maintainer:\n\n[Vikki Paterson](https://github.com/vikkipaterson), [Chloe Poulter](https://github.com/chloepoulterdesign)\n\n![Contextual image](images/0.png)\n\n## Overview\n\n#### An empty state consists of:\n\n- An illustration that is relevant to the context or the product\n- A headline text explaining the reason for the empty state\n- A description of the resource contained typically found in the empty location\n\nDon't include the primary call to action in the empty space. The call to action should remain in the same location whether an area is populated or empty. This prevents confusing users as they become familiar with the system.\n\n<Row>\n <Column colLg={8}>\n\n![Example of an empty state when a search yields no results](images/1.png)\n\n<Caption>Example of an empty state when a search yields no results</Caption>\n\n </Column>\n</Row>\n<Row>\n <Column colLg={8}>\n\n![Example of an empty state when a table has not yet been populated](images/2.png)\n\n<Caption>\n  Example of an empty state when a table has not yet been populated\n</Caption>\n\n </Column>\n</Row>\n<Row>\n <Column colLg={8}>\n\n![Example of an empty state when a slide-over panel hasn't been populated yet](images/3.png)\n\n<Caption>\n  Example of an empty state when a slide-over panel hasn't been populated yet\n</Caption>\n\n </Column>\n</Row>\n","fileAbsolutePath":"/zeit/3ed0734e/src/pages/experimental/empty-state-pattern/index.mdx"}}}}