VOTE-2047: Style felony module

web/themes/custom/votegov/src/sass/_variables.scss

@@ -14,6 +14,7 @@ $ac-cool-light: #0AAAE2; // cyan-30v
 
 // Background Colors.
 $bg-light: #F0F0F0; // gray-cool-2
+$bg-secondary-light: #F7F9FA;
 $bg-light-medium: #D3D3D3; // gray-cool-20 is this just for the horizontal rule?
 $bg-light-cool: #E2EDF2; // blue-warm-10
 $bg-light-warm: #E7E5DD; // hero-background

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

@@ -23,3 +23,4 @@
 @forward "accordion-group";
 @forward "usagov-partner";
 @forward "a11y-toolbar";
+@forward "double-deck-card";

web/themes/custom/votegov/src/sass/components/double-deck-card.scss

@@ -0,0 +1,69 @@
+@use "uswds-core" as *;
+@use "variables" as *;
+@use "mixins" as *;
+
+.vote-double-deck-card {
+  --vote-ddc-bg: #{$bg-secondary-light};
+  --vote-ddc-icon-fill: #{$base-dark};
+  --vote-ddc-body-secondary-bg: #{$bg-light-cool};
+  @include vote-block-margin-y;
+  background-color: var(--vote-ddc-bg);
+  border: 1px solid $base-dark;
+
+  [data-theme="contrast"] & {
+    --vote-ddc-bg: #{$base-white};
+    --vote-ddc-icon-fill: #{$bg-high-contrast};
+    --vote-ddc-body-secondary-bg: #{$bg-light};
+  }
+}
+
+.vote-double-deck-card__primary {
+  @include u-padding(4);
+
+  @include at-media('tablet') {
+    @include u-display('flex');
+    gap: 1.5rem;
+  }
+}
+
+.vote-double-deck-card__icon {
+  @include u-margin-bottom(3);
+  @include u-text-align('center');
+
+  svg {
+    fill: var(--vote-ddc-icon-fill);
+  }
+}
+
+.vote-double-deck-card__heading {
+  @include u-font-size('serif', 9);
+  @include u-line-height('serif', 4);
+}
+
+.vote-double-deck-card__body {
+  @include u-padding-y(3);
+
+  ul {
+    @include u-margin(0);
+
+    &:has(:nth-child(6)) {
+      @include at-media('desktop-lg') {
+        column-count: 2;
+      }
+
+      @include at-media-max('tablet-lg') {
+        column-count: 2;
+      }
+
+      @include at-media-max('tablet') {
+        column-count: unset;
+      }
+    }
+  }
+}
+
+.vote-double-deck-card__body_secondary {
+  @include u-padding(4);
+  @include u-font-family('sans');
+  background-color: var(--vote-ddc-body-secondary-bg);
+}

web/themes/custom/votegov/templates/paragraph/paragraph--double-deck-card.html.twig

@@ -0,0 +1,19 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a paragraph: Double deck card
+ */
+#}
+
+<div class="vote-double-deck-card">
+  <div class="vote-double-deck-card__primary">
+    <div class="vote-double-deck-card__icon">
+      {{ source(directory ~ '/img/svg/map-icon.svg' ) }}
+    </div>
+    <div class="vote-double-deck-card__text">
+  <h3 class="vote-double-deck-card__heading">{{ content.field_heading | field_value }}</h3>
+      <div class="vote-double-deck-card__body">{{ content.field_body | field_value }}</div>
+    </div>
+  </div>
+  <div class="vote-double-deck-card__body_secondary">{{ content.field_body_secondary | field_value}}</div>
+</div>