Create m-full-width-media modifier and caption element

cfpb · Mar 29, 2024 · 4356c69 · 4356c69
1 parent aac379c
commit 4356c69
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/cfgov/unprocessed/css/molecules/full-width-media.less b/cfgov/unprocessed/css/molecules/full-width-media.less
@@ -1,5 +1,14 @@
 .m-full-width-media {
+  &__bottom-rule {
+    padding-bottom: unit(@grid_gutter-width / 2 / @base-font-size-px, rem);
+    border-bottom: 1px solid @horizontal-rule;
+  }
+
   &_image {
     display: block;
   }
+
+  &_caption {
+    margin-top: unit(15px / @base-font-size-px, rem);
+  }
 }
diff --git a/cfgov/v1/jinja2/v1/includes/molecules/content-image.html b/cfgov/v1/jinja2/v1/includes/molecules/content-image.html
@@ -38,12 +38,12 @@
 {%- if value.image_width == 'full' -%}
 
 <figure class="m-full-width-media
-               {{- ' m-inset__bottom-rule' if value.is_bottom_rule else '' }}">
+               {{- ' m-full-width-media__bottom-rule' if value.is_bottom_rule else '' }}">
     <img class="m-full-width-media_image"
          src="{{ image_inset.url }}"
          alt="{{ image_alt_value(value.image) }}">
 {%- if value.text %}
-    <figcaption class="m-inset_caption">
+    <figcaption class="m-full-width-media_caption">
         {{ value.text | safe }}
     </figcaption>
 {%- endif %}