Update empty state 404 documentation example to match new branding (#…

…5079) * make empty state docs consistent with c.com 404
canonical · May 7, 2024 · e6d414d · e6d414d
1 parent e4b81ad
commit e6d414d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 14 deletions.
diff --git a/scss/standalone/patterns_empty-state.scss b/scss/standalone/patterns_empty-state.scss
@@ -16,5 +16,6 @@
 @include vf-p-icon-search;
 @include vf-u-layout;
 
-// dependencies for user action triggered empty state example
-@include vf-u-vertically-center;
+// Dependencies for error management empty state example
+@include vf-u-hide;
+@include vf-p-section;
diff --git a/templates/docs/examples/patterns/empty-state/error-management.html b/templates/docs/examples/patterns/empty-state/error-management.html
@@ -4,17 +4,19 @@
 {% block standalone_css %}patterns_empty-state{% endblock %}
 
 {% block content %}
-<section class="p-strip">
-  <div class="row">
-    <div class="col-6 col-medium-3 u-vertically-center u-align--center">
-      <img src="https://assets.ubuntu.com/v1/03c7318e-image-404.svg" alt="Page not found" width="360" height="365">
+<section class="p-section--hero">
+  <div class="row--25-75">
+    <div class="col u-hide--small">
+      <p class="p-heading--1">404</p>
     </div>
-    <div class="col-6 col-medium-3 u-vertically-center">
-      <div>
-        <h1>404: Page not found</h1>
-        <p class="p-heading--4">Sorry, we couldn’t find that page.</p>
-      </div>
+    <div class="col">
+      <h1><span class="u-hide--medium u-hide--large">404: </span>Page not found</h1>
+      <p class="p-heading--2">
+        We can't find the page you're looking for.
+      </p>
     </div>
   </div>
 </section>
 {% endblock %}
+
+
diff --git a/templates/docs/patterns/empty-state.md b/templates/docs/patterns/empty-state.md
@@ -42,7 +42,8 @@ To import either or all of these components into your project, copy the snippets
 @import 'vanilla-framework';
 @include vf-base;
 
-// dependencies for the no content empty state example
+// dependencies for no content empty state example
+@include vf-p-headings;
 @include vf-p-grid;
 @include vf-u-align;
 @include vf-p-buttons;
@@ -56,8 +57,9 @@ To import either or all of these components into your project, copy the snippets
 @include vf-p-icon-search;
 @include vf-u-layout;
 
-// dependencies for user action triggered empty state example
-@include vf-u-vertically-center;
+// Dependencies for error management empty state example
+@include vf-u-hide;
+@include vf-p-section;
 ```
 
 For more information see [Customising Vanilla](/docs/customising-vanilla/) in your projects, which includes overrides and importing instructions.