Feature/vote 770/style cta

config/sync/core.entity_view_display.node.voter_guide.teaser.yml

@@ -1,6 +1,6 @@
 uuid: ef7533d0-e8d9-43e2-958c-c66239416a36
 langcode: en
-status: false
+status: true
 dependencies:
   config:
     - core.entity_view_mode.node.teaser
@@ -20,22 +20,14 @@ content:
     type: text_summary_or_trimmed
     label: hidden
     settings:
-      trim_length: 600
+      trim_length: 200
     third_party_settings: {  }
-    weight: 101
-    region: content
-  content_moderation_control:
-    settings: {  }
-    third_party_settings: {  }
-    weight: -20
-    region: content
-  links:
-    settings: {  }
-    third_party_settings: {  }
-    weight: 100
+    weight: 0
     region: content
 hidden:
+  content_moderation_control: true
   field_basics_block: true
   field_subtitle: true
   langcode: true
+  links: true
   published_at: true

web/themes/custom/votegov/src/sass/_uswds-settings.scss

@@ -124,6 +124,15 @@ https://designsystem.digital.gov/documentation/settings/
   $theme-breadcrumb-padding-bottom: 0,
   // -- Button
   // -- Card
+  // $theme-card-border-color: "#3E79BB",
+  $theme-card-border-radius: "md",
+  // $theme-card-border-width: "3px",
+  $theme-card-gap: 4,
+  $theme-card-font-family: "sans",
+  $theme-card-header-typeset: "serif",
+  // $theme-card-margin-bottom: 4,
+  // $theme-card-padding-perimeter: 4,
+  // $theme-card-padding-y: 4,
   // -- Checkbox
   // -- Collection
   // -- Footer
@@ -213,7 +222,7 @@ https://designsystem.digital.gov/documentation/settings/
   'tablet': true, // 640px
   'tablet-lg': true, // 880px
   'desktop': true, // 1024px
-  'desktop-lg': false, // 1200px
+  'desktop-lg': true, // 1200px
   'widescreen': false, // 1400px
   ),
   $flex-direction-settings: (

web/themes/custom/votegov/src/sass/base/containers.scss

@@ -2,7 +2,6 @@
 @use "variables" as *;
 
 body {
-  background-color: $bg-light;
   color: $base-dark;
 }
 

web/themes/custom/votegov/src/sass/components/_index.scss

@@ -12,5 +12,7 @@
 @forward "footer-primary";
 @forward "footer-secondary";
 @forward "hero";
+@forward "media-text-cta";
+@forward "feature-cards";
 @forward "quick-links"
 

web/themes/custom/votegov/src/sass/components/feature-cards.scss

@@ -0,0 +1,40 @@
+@use "uswds-core" as *;
+@use "mixins" as *;
+@use "variables" as *;
+
+.paragraph {
+    background-color: #fff;
+
+    .vote-feature-cards__header {
+        max-width: 581px;
+
+        @include at-media('tablet') {
+            @include u-margin-top(10);
+            @include u-margin-bottom(6);
+        }
+        @include at-media-max('tablet') {
+            @include u-margin-top(6);
+            @include u-margin-bottom(4);
+        }
+
+        h2 {
+        color: $base-dark;
+        font-family: Roboto;
+        font-size: 28.83px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 118%;
+        }  
+
+        &::after {
+            content: "";
+            width: 96px;
+            @include u-height('05');
+            @include u-display('block');
+            background: $ac-warm;
+            @include u-margin-y(2);
+        }      
+    }
+
+}
+

web/themes/custom/votegov/src/sass/components/media-text-cta.scss

@@ -0,0 +1,110 @@
+@use "uswds-core" as *;
+@use "variables" as *;
+
+.vote-cta {
+    @include u-display('flex');
+    @include u-margin-x('auto');
+    @include u-margin-y('205');
+    max-width: 1180px;
+
+    @include at-media-max('tablet') {
+        flex-wrap: wrap;
+        &__media-order-last, &__media-order-first {
+            .vote-cta__content-container {
+                order: 2;
+            }
+        }
+
+        &__media-container, &__content-container {
+            @include u-margin-y(3);
+        }
+    }
+
+    @include at-media('tablet') {
+    &__media-order-last {
+        .vote-cta__content-container {
+            @include u-margin-right(10);
+        }
+        .vote-cta__media-container {
+            order: 2;
+        }
+    }
+
+    &__media-order-first {
+        .vote-cta__content-container {
+            order: 2;
+            @include u-margin-left(10);
+        }
+    }
+
+    &__media-container {
+        width: 36.875rem;
+        @include u-margin-y('auto');
+
+        img {
+            flex-shrink: 0;
+            border-color: #000;
+            @include u-radius('md');
+            @include u-border(0);
+            background: #E2EDF2;
+            mix-blend-mode: multiply;
+        }
+    }
+
+    &__content-container {
+        max-width: 31.875rem;
+        @include u-margin-y('auto');
+    }
+    }
+
+    &__content-container {
+        .vote-cta {
+            &__header {
+                color: $base-dark;
+                font-family: Roboto;
+                font-size: 28.83px;
+                @include u-text('medium');
+                line-height: 118%;
+
+                h2 {
+                    font-size: 28.83px;
+                }
+
+                &::after {
+                    content: "";
+                    width: 96px;
+                    @include u-height('05');
+                    @include u-display('block');
+                    background: $ac-warm;
+                    @include u-margin-y(3);
+                }
+            }
+            &__body {
+                color: $base-dark;
+                @include u-font-family('serif');
+                font-size: 16px;
+                @include u-text('normal');
+                line-height: 155%;
+
+                p, ul, ul>li {
+                    @include u-margin(0);
+                }
+
+                p {
+                    @include u-margin-bottom(2);
+                }
+            }
+            &__footer {
+                a {
+                    padding: 5px;
+                }
+            }
+        }
+    }
+}
+
+@include at-media-max('tablet') {
+    .grid-container {
+        @include u-padding-x(3);
+    }
+}

web/themes/custom/votegov/src/sass/uswds-overrides/_index.scss

@@ -11,8 +11,9 @@
 @forward "usa-button-group";
 @forward "usa-select";
 @forward "usa-banner";
+@forward "usa-card";
 @forward "usa-sign-up";
 @forward "usa-search";
 @forward "usa-sidenav";
 @forward "usa-nav";
-@forward "usa-contact-identifier";
+@forward "usa-contact-identifier";