EmptyState UI module

atst/ui_modules.py

@@ -46,3 +46,12 @@ class SidenavItem(UIModule):
           active=active,
           icon=icon,
           subnav=subnav)
+
+class EmptyState(UIModule):
+    def render(self, message, actionLabel, actionHref, icon=None):
+        return self.render_string(
+          "components/empty_state.html.to",
+          message=message,
+          actionLabel=actionLabel,
+          actionHref=actionHref,
+          icon=icon)

scss/components/_empty_state.scss

@@ -1,15 +1,27 @@
 .empty-state {
   text-align: center;
-  padding-top: 10rem;
+  padding: 6rem ($gap * 2) 0;
-  
+  display: flex;
-  p {
+  flex-direction: column;
-    font-family: $font-sans;
+  align-items: center;
-    font-weight: 300;
+
-    line-height: 10rem;
+  @include media($medium-screen) {
-    font-size: 44px;
+    padding: 8rem ($gap * 4) 0;
-    line-height: 5rem;
-    margin: 0 auto;
-    padding-bottom: 2rem;
-    max-width: 40%;
   }
-}
+
+  .icon {
+     @include icon-size(50);
+     @include icon-color($color-gray-light);
+  }
+
+  p {
+    @include h2;
+    line-height: 1.2;
+    max-width: 15em;
+    color: $color-gray;
+
+    @include media($large-screen) {
+      @include h1;
+    }
+  }
+}

templates/components/empty_state.html.to

@@ -0,0 +1,9 @@
+<div class='empty-state'>
+  <p>{{ message }}</p>
+
+  {% if icon %}
+    {% module Icon(icon) %}
+  {% end %}
+
+  <a href='{{ actionHref }}' class='usa-button usa-button-big'>{{ actionLabel }}</a>
+</div>