Change widths of components inside card to be their contents width

ONSdigital · Oct 5, 2023 · 62639ad · 62639ad
1 parent 54708f1
commit 62639ad
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -5,6 +5,12 @@
   &__link {
     display: flex;
     flex-direction: column;
+    margin-bottom: 1rem;
+    width: fit-content;
+  }
+
+  &__remove--margin {
+    margin-bottom: 0;
   }
 
   &__image--reorder {

diff --git a/src/components/card/_macro.njk b/src/components/card/_macro.njk
@@ -10,7 +10,7 @@
       {%- if params.url -%}
         <a href="{{ params.url }}" class="ons-card__link">
       {%- endif -%}
-          <h{{ titleSize }} class="ons-card__title ons-card__title--reorder {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
+          <h{{ titleSize }} class="ons-card__title ons-card__title--reorder {{ params.titleClasses | default('ons-u-fs-m')}} ons-card__remove--margin" id="{{ params.id }}">
               {{ params.title }}
           </h{{ titleSize }}>
           {% if params.image.smallSrc %}
@@ -24,15 +24,15 @@
 
     {%- else -%}
 
-      <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m') }}" id="{{ params.id }}">
-        {%- if params.url -%}
-          <a class="ons-card__link" href="{{ params.url }}">
-        {%- endif -%}
+      {%- if params.url -%}
+        <a class="ons-card__link" href="{{ params.url }}">
+      {%- endif -%}
+        <h{{ titleSize }} class="ons-card__title ons-card__title--reorder {{ params.titleClasses | default('ons-u-fs-m')}} ons-card__remove--margin" id="{{ params.id }}">
           {{ params.title }}
-        {%- if params.url -%}
-          </a>
-        {%- endif -%}
-      </h{{ titleSize }}>
+        </h{{ titleSize }}>
+      {%- if params.url -%}
+        </a>
+      {%- endif -%}
 
     {%- endif -%}