1 files changed, 131 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/asrouter/templates/SimpleSnippet/_SimpleSnippet.scss b/browser/components/newtab/content-src/asrouter/templates/SimpleSnippet/_SimpleSnippet.scss
new file mode 100644
index 0000000000..1ee83a5cc9
--- /dev/null
+++ b/browser/components/newtab/content-src/asrouter/templates/SimpleSnippet/_SimpleSnippet.scss
@@ -0,0 +1,131 @@
+$section-header-height: 30px;
+$icon-width: 54px; // width of primary icon + margin
+
+.SimpleSnippet {
+  &.tall {
+    padding: 27px 0;
+  }
+
+  p em {
+    color: var(--newtab-text-emphasis-text-color);
+    font-style: normal;
+    background: var(--newtab-text-emphasis-background);
+  }
+
+  &.bold {
+    height: 176px;
+
+    .body {
+      font-size: 14px;
+      line-height: 20px;
+      margin-bottom: 20px;
+    }
+
+    .icon {
+      width: 71px;
+      height: 71px;
+    }
+  }
+
+  &.takeover {
+    height: 344px;
+
+    .body {
+      font-size: 16px;
+      line-height: 24px;
+      margin-bottom: 35px;
+    }
+
+    .icon {
+      width: 79px;
+      height: 79px;
+    }
+  }
+
+  .title {
+    font-size: inherit;
+    margin: 0;
+  }
+
+  .title-inline {
+    display: inline;
+  }
+
+  .titleIcon {
+    background-repeat: no-repeat;
+    background-size: 14px;
+    background-position: center;
+    height: 16px;
+    width: 16px;
+    margin-top: 2px;
+    margin-inline-end: 2px;
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  .body {
+    display: inline;
+    margin: 0;
+  }
+
+  &.tall .icon {
+    margin-inline-end: 20px;
+  }
+
+  &.bold,
+  &.takeover {
+    .donation-form-url,
+    .donation-amount {
+      padding-block: 8px;
+    }
+
+    .icon {
+      margin-inline-end: 20px;
+    }
+  }
+
+  .icon {
+    align-self: flex-start;
+  }
+
+  &.has-section-header .innerWrapper {
+    // account for section header being 100% width
+    flex-wrap: wrap;
+    padding-top: 7px;
+  }
+
+  // wrapper div added if section-header is displayed that allows icon/text/button
+  // to squish instead of wrapping. this is effectively replicating layout behavior
+  // when section-header is *not* present.
+  .innerContentWrapper {
+    align-items: center;
+    display: flex;
+  }
+
+  .section-header {
+    flex: 0 0 100%;
+    margin-bottom: 10px;
+  }
+
+  .section-title {
+    // color should match that of 'Recommended by Pocket' and 'Highlights' in newtab page
+    color: var(--newtab-text-primary-color);
+    display: inline-block;
+    font-size: 13px;
+    font-weight: bold;
+    margin: 0;
+
+    a {
+      color: var(--newtab-text-primary-color);
+      font-weight: inherit;
+      text-decoration: none;
+    }
+
+    .icon {
+      height: 16px;
+      margin-inline-end: 6px;
+      margin-top: -2px;
+      width: 16px;
+    }
+  }
+}