@nationalarchives/frontend 0.1.24-prerelease → 0.1.25-prerelease

package/nationalarchives/components/card/card.stories.js

@@ -7,6 +7,8 @@ const argTypes = {
   headingLevel: { control: { type: "number", min: 1, max: 6 } },
   headingSize: { control: "inline-radio", options: ["s", "m", "l"] },
   href: { control: "text" },
+  hrefClasses: { control: "text" },
+  hrefAttributes: { control: "object" },
   imageSrc: { control: { type: "file", accept: ".jpg" } },
   imageAlt: { control: "text" },
   imageWidth: { control: { type: "number", min: 1 } },
@@ -45,6 +47,8 @@ const Template = ({
   headingLevel,
   headingSize,
   href,
+  hrefClasses,
+  hrefAttributes,
   imageSrc,
   imageAlt,
   imageWidth,
@@ -70,6 +74,8 @@ const Template = ({
       headingLevel,
       headingSize,
       href,
+      hrefClasses,
+      hrefAttributes,
       imageSrc,
       imageAlt,
       imageWidth,
@@ -302,81 +308,3 @@ Sources.args = {
   htmlElement: "article",
   classes: "tna-card--demo",
 };
-
-export const WithoutImage = Template.bind({});
-WithoutImage.args = {
-  supertitle: "Card supertitle",
-  title: "Card title",
-  headingLevel: 3,
-  headingSize: "s",
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
-  htmlElement: "article",
-  classes: "tna-card--demo",
-};
-
-const GridTemplate = ({
-  title,
-  supertitle,
-  headingLevel,
-  headingSize,
-  href,
-  imageSrc,
-  imageAlt,
-  imageWidth,
-  imageHeight,
-  imageSources,
-  label,
-  body,
-  text,
-  actions,
-  horizontal,
-  htmlElement,
-  classes,
-  attributes,
-}) =>
-  `<div class="tna-container">
-    ${Array(12)
-      .fill(
-        `<div class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-m">
-          ${Card({
-            params: {
-              title,
-              supertitle,
-              headingLevel,
-              headingSize,
-              href,
-              imageSrc,
-              imageAlt,
-              imageWidth,
-              imageHeight,
-              imageSources,
-              label,
-              body,
-              text,
-              actions,
-              horizontal,
-              htmlElement,
-              classes,
-              attributes,
-            },
-          })}
-        </div>`,
-      )
-      .join("")}
-  </div>`;
-
-export const Grid = GridTemplate.bind({});
-Grid.args = {
-  title: "Card title",
-  headingLevel: 3,
-  headingSize: "s",
-  href: "#",
-  imageSrc:
-    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-  imageAlt: "The National Archives office",
-  imageWidth: 499,
-  imageHeight: 333,
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
-  htmlElement: "article",
-  classes: "tna-card--demo",
-};

package/nationalarchives/components/card/fixtures.json

@@ -8,7 +8,7 @@
         "headingLevel": 3,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -19,7 +19,7 @@
         "headingLevel": 3,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-hgroup-s tna-card__heading\"><h3 class=\"tna-hgroup__title\"><span class=\"tna-hgroup__supertitle\">Card supertitle</span>Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-hgroup-s tna-card__heading\"><h3 class=\"tna-hgroup__title\"><span class=\"tna-hgroup__supertitle\">Card supertitle</span>Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -30,7 +30,7 @@
         "headingSize": "xl",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-xl tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-xl tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -40,7 +40,7 @@
         "headingLevel": 1,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h1 class=\" tna-heading-s tna-card__heading\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h1 class=\" tna-heading-s tna-card__heading\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -51,7 +51,7 @@
         "href": "#",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -75,7 +75,7 @@
         ],
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><ul class=\"tna-card__meta\"><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-calendar\"></i>24th September 2023</li><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-ticket\"></i>From £16</li><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-location-dot\"></i>Online</li></ul><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><ul class=\"tna-card__meta\"><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-fw fa-calendar\"></i>24th September 2023</li><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-fw fa-ticket\"></i>From £16</li><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-fw fa-location-dot\"></i>Online</li></ul><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -85,7 +85,7 @@
         "headingLevel": 3,
         "text": "Card body"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -99,7 +99,7 @@
         "imageHeight": 360,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -119,7 +119,7 @@
         ],
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"640\" height=\"360\"><source srcset=\"https://loremflickr.com/640/360\" type=\"image/jpeg\" width=\"640\" height=\"360\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"640\" height=\"360\"><source srcset=\"https://loremflickr.com/640/360\" type=\"image/jpeg\" width=\"640\" height=\"360\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -134,7 +134,7 @@
         "href": "#",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><a href=\"#\" class=\"tna-card__image-container\" tabindex=\"-1\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></a><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><a href=\"#\" class=\"tna-card__image-container\" tabindex=\"-1\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></a><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -151,7 +151,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" role=\"button\"title=\"Go and do the action\">Card action</a></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" role=\"button\" title=\"Go and do the action\">Card action</a></div></div></div>",
       "hidden": false
     },
     {
@@ -162,7 +162,7 @@
         "label": "New",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -173,7 +173,7 @@
         "body": "<p>Card body</p>",
         "style": "boxed"
       },
-      "html": "<div class=\"tna-card tna-card--contrast\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card tna-card--contrast\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -184,7 +184,7 @@
         "body": "<p>Card body</p>",
         "style": "accent"
       },
-      "html": "<div class=\"tna-card tna-card--accent\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card tna-card--accent\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -195,7 +195,7 @@
         "body": "<p>Card body</p>",
         "style": "foobar"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -206,7 +206,7 @@
         "body": "<p>Card body</p>",
         "classes": "card__test-class"
       },
-      "html": "<div class=\"tna-card card__test-class\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card card__test-class\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -219,7 +219,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading-s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     }
   ]

package/nationalarchives/components/card/macro-options.json

@@ -28,13 +28,25 @@
     "name": "href",
     "type": "string",
     "required": false,
-    "description": "A URL to use as a link in the card's heading and image (if one is declared)."
+    "description": "A URL to use as a link in the card's heading and image."
+  },
+  {
+    "name": "hrefClasses",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the elements of the card that use `href`."
+  },
+  {
+    "name": "hrefAttributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the elements of the card that use `href`."
   },
   {
     "name": "imageSrc",
     "type": "string",
     "required": false,
-    "description": "A JPG file to use as the card's image."
+    "description": "The location of the card's image."
   },
   {
     "name": "imageAlt",
@@ -58,43 +70,43 @@
     "name": "imageType",
     "type": "string",
     "required": false,
-    "description": ""
+    "description": "The mime type of the image. Defaults to `image/jpeg`. Only required when using `imageSources`."
   },
   {
     "name": "imageSources",
     "type": "array",
-    "required": true,
-    "description": "Alternative sources of the image which can include WebP files.",
+    "required": false,
+    "description": "Alternative sources of the image.",
     "params": [
       {
         "name": "src",
         "type": "string",
         "required": true,
-        "description": ""
+        "description": "The location of the image."
       },
       {
         "name": "type",
         "type": "string",
         "required": true,
-        "description": ""
+        "description": "The mime type of the image."
       },
       {
         "name": "media",
         "type": "string",
         "required": false,
-        "description": ""
+        "description": "A media condition for the image."
       },
       {
         "name": "width",
         "type": "number",
         "required": false,
-        "description": ""
+        "description": "The width of the image in pixels."
       },
       {
         "name": "height",
         "type": "number",
         "required": false,
-        "description": ""
+        "description": "The height of the image in pixels."
       }
     ]
   },
@@ -120,14 +132,14 @@
         "name": "icon",
         "type": "string",
         "required": false,
-        "description": "The name of a font-awesome icon, without the prefixed `fa-`."
+        "description": "The name of a Font Awesome icon, without the prefixed `fa-`."
       }
     ]
   },
   {
     "name": "body",
     "type": "string",
-    "required": true,
+    "required": false,
     "description": "The HTML for the main body of the card. Not displayed if `text` is set."
   },
   {
@@ -146,31 +158,43 @@
         "name": "text",
         "type": "string",
         "required": true,
-        "description": ""
+        "description": "The text for the action."
       },
       {
         "name": "href",
         "type": "string",
         "required": true,
-        "description": ""
+        "description": "The URL of the action."
       },
       {
         "name": "title",
         "type": "string",
         "required": false,
-        "description": ""
+        "description": "An optional title for the action."
       },
       {
         "name": "icon",
         "type": "string",
         "required": false,
-        "description": ""
+        "description": "The name of a Font Awesome icon, without the prefixed `fa-`."
       },
       {
         "name": "brandIcon",
         "type": "string",
         "required": false,
-        "description": ""
+        "description": "The name of a Font Awesome brand icon, without the prefixed `fa-`."
+      },
+      {
+        "name": "classes",
+        "type": "string",
+        "required": false,
+        "description": "Classes to add to the card action."
+      },
+      {
+        "name": "attributes",
+        "type": "object",
+        "required": false,
+        "description": "HTML attributes (for example data attributes) to add to the card action."
       }
     ]
   },

package/nationalarchives/components/card/template.njk

@@ -8,86 +8,87 @@
 {%- elseif params.style == "accent" -%}
   {%- set containerClasses = containerClasses.concat('tna-card--accent') -%}
 {%- endif -%}
-<{{ htmlElement }} class="tna-card {{ containerClasses | join(' ') }}" data-module="tna-card" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{%- set classes = containerClasses | join(' ') -%}
+<{{ htmlElement }} class="tna-card{% if classes %} {{ classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="tna-card__inner">
-  {%- if params.supertitle -%}
+  {%- if params.supertitle %}
     <hgroup class="tna-hgroup-{{ params.headingSize or 's' }} tna-card__heading">
       <h{{ params.headingLevel }} class="tna-hgroup__title">
         <span class="tna-hgroup__supertitle{% if params.plainSupertitle %} tna-hgroup__supertitle--plain{% endif %}">{{ params.supertitle }}</span>
-        {%- if params.href -%}
-        <a href="{{ params.href }}" class="tna-card__heading-link">{{ params.title }}</a>
-        {%- else -%}
+        {%- if params.href %}
+        <a href="{{ params.href }}" class="tna-card__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ params.title }}</a>
+        {%- else %}
         {{ params.title }}
-        {%- endif -%}
+        {%- endif %}
       </h{{ params.headingLevel }}>
     </hgroup>
-  {%- else -%}
+  {%- else %}
     <h{{ params.headingLevel }} class=" tna-heading-{{ params.headingSize or 's' }} tna-card__heading">
-      {%- if params.href -%}
-      <a href="{{ params.href }}" class="tna-card__heading-link">{{ params.title }}</a>
-      {%- else -%}
+      {%- if params.href %}
+      <a href="{{ params.href }}" class="tna-card__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ params.title }}</a>
+      {%- else %}
       {{ params.title }}
-      {%- endif -%}
+      {%- endif %}
     </h{{ params.headingLevel }}>
-  {%- endif -%}
-  {%- if params.imageSrc -%}
-    {%- if params.href -%}
-    <a href="{{ params.href }}" class="tna-card__image-container" tabindex="-1">
-    {%- else -%}
+  {%- endif %}
+  {%- if params.imageSrc %}
+    {%- if params.href %}
+    <a href="{{ params.href }}" class="tna-card__image-container{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" tabindex="-1" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+    {%- else %}
     <div class="tna-card__image-container">
-    {%- endif -%}
+    {%- endif %}
       <picture class="tna-card__image">
-        {%- if params.imageSources -%}
+        {%- if params.imageSources %}
         {%- for source in params.imageSources %}
         <source srcset="{{ source.src }}" type="{{ source.type }}" width="{{ source.width if source.width else params.imageWidth }}" height="{{ source.height if source.height else params.imageHeight }}">
         {%- endfor %}
         <source srcset="{{ params.imageSrc }}" type="{{ params.imageType if params.imageType else 'image/jpeg' }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
-        {%- endif -%}
+        {% endif %}
         <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
       </picture>
-      {%- if params.label -%}
+      {%- if params.label %}
       <div class="tna-chip tna-card__image-label">
         {{ params.label }}
       </div>
-      {%- endif -%}
-    {%- if params.href -%}
+      {%- endif %}
+    {%- if params.href %}
     </a>
-    {%- else -%}
+    {%- else %}
     </div>
-    {%- endif -%}
-  {%- endif -%}
+    {%- endif %}
+  {%- endif %}
     <div class="tna-card__body">
-    {%- if params.meta -%}
+    {%- if params.meta %}
       <ul class="tna-card__meta">
-        {%- for item in params.meta -%}
+        {%- for item in params.meta %}
         <li class="tna-card__meta-item">
-          {%- if item.icon -%}
-          <i class="fa-solid fa-{{ item.icon }}"></i>
-          {%- endif -%}
+          {%- if item.icon %}
+          <i class="fa-solid fa-fw fa-{{ item.icon }}"></i>
+          {%- endif %}
           {{ item.text }}
         </li>
-        {%- endfor -%}
+        {%- endfor %}
       </ul>
-    {%- endif -%}
-    {%- if params.text -%}
+    {%- endif %}
+    {%- if params.text %}
       <p>{{ params.text }}</p>
-    {%- else -%}
+    {%- else %}
       {{ params.body | safe }}
-    {%- endif -%}
+    {%- endif %}
     </div>
-  {%- if params.actions -%}
+  {%- if params.actions %}
     <div class="tna-card__actions">
-    {%- for item in params.actions -%}
-      <a href="{{ item.href }}" class="tna-card__action" role="button" {%- if item.title %}title="{{ item.title }}"{% endif %}>
-        {%- if item.brandIcon -%}
-        <i class="fa-brands fa-{{ item.brandIcon }}"></i>
-        {%- elseif item.icon -%}
-        <i class="fa-solid fa-{{ item.icon }}"></i>
-        {%- endif -%}
+    {%- for item in params.actions %}
+      <a href="{{ item.href }}" class="tna-card__action{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" role="button" {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in params.hrefAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+        {%- if item.brandIcon %}
+        <i class="fa-brands fa-fw fa-{{ item.brandIcon }}"></i>
+        {%- elseif item.icon %}
+        <i class="fa-solid fa-fw fa-{{ item.icon }}"></i>
+        {%- endif %}
         {{ item.text }}
       </a>
-    {%- endfor -%}
+    {%- endfor %}
     </div>
-  {%- endif -%}
+  {%- endif %}
   </div>
 </{{ htmlElement }}>