diff --git a/components/accordion-container/accordion-container.twig b/components/accordion-container/accordion-container.twig
index 16161c7745e261e97a850a9835c60273be2c7090..5f9149ec1d37e3e0822c0b0415961b88ecd489ab 100644
--- a/components/accordion-container/accordion-container.twig
+++ b/components/accordion-container/accordion-container.twig
@@ -1,4 +1,4 @@
-<div class="accordion-container">
+<div {{ attributes.addClass('accordion-container') }}>
   {% block accordion_content %}
     {% embed 'mercury:collapsible-section'
       with {
diff --git a/components/anchor/anchor.twig b/components/anchor/anchor.twig
index c7262fb682bb56acbcf766b221bad7cd507003be..a134857dc5163b2dd7bc597c2f6464928470eff8 100644
--- a/components/anchor/anchor.twig
+++ b/components/anchor/anchor.twig
@@ -1,4 +1,4 @@
-<span class="anchor" id="{{ id }}">
+<span {{ attributes.addClass('anchor').setAttribute('id', id) }}>
   <span class="anchor--help-text hg:hidden">
     {{
       include(
diff --git a/components/badge/badge.twig b/components/badge/badge.twig
index 7b3230186954961d0c6031b4c2fdbb2a01991476..0fe30c507483ccc5976b68c7fbcdb7baff59017f 100644
--- a/components/badge/badge.twig
+++ b/components/badge/badge.twig
@@ -24,7 +24,7 @@
     |filter(v => v is not empty)
 %}
 
-<a href="{{ url }}" aria-label="{{ label }}" class="{{ classes|join(' ') }}">
+<a {{ attributes.setAttribute('href', url).setAttribute('aria-label', label).addClass(classes) }}>
   {% if icon is not empty %}{{ include('@mercury/components/icon/icon.twig') }}{% endif %}
   <span class="badge-label">{{ label }}</span>
 </a>
diff --git a/components/blockquote/blockquote.twig b/components/blockquote/blockquote.twig
index 9a7f70acaeb2a33da82458f14cade2960efeacab..6b015aab5c73ad37ebf9ed827b6a674204b59470 100644
--- a/components/blockquote/blockquote.twig
+++ b/components/blockquote/blockquote.twig
@@ -1,8 +1,8 @@
 {% set classes = ['blockquote', 'hg:flex hg:flex-col hg:gap-4'] %}
 
-{% set cite_attr = cite_url and cite_url != 'No URL' ? 'cite="' ~ cite_url ~ '"' : '' %}
+{% set attributes = cite_url and cite_url != 'No URL' ? attributes.setAttribute('cite', cite_url) : attributes %}
 
-<blockquote class="{{ classes|join(' ') }} hg:font-semibold hg:text-body-text" {{ cite_attr }}>
+<blockquote {{ attributes.addClass(classes).addClass(['hg:font-semibold', 'hg:text-body-text']) }}>
   <p class="blockquote-text hg:text-xl hg:leading-[1.5] hg:font-semibold hg:text-inherit">
     {{ text }}
   </p>
diff --git a/components/branding/branding.twig b/components/branding/branding.twig
index 58cc06d927a8bcdd1393549d4be7136091fc6e1c..a8ab8e417f99b242194c59346726b1fbb4e233cf 100644
--- a/components/branding/branding.twig
+++ b/components/branding/branding.twig
@@ -1,7 +1,7 @@
 {# We attach the library in-case you need to style further. #}
 {{ attach_library('mercury/branding') }}
 
-<a href="{{ url|default('/') }}" class="branding hg:inline-block" rel="home">
+<a {{ attributes.setAttribute('href', url|default('/')).addClass(['branding', 'hg:inline-block']).setAttribute('rel', 'home') }}>
   {% block branding %}
     <img class="hg:h-full hg:w-full hg:object-contain" src="{{ site_logo_url }}" alt="{{ site_name }}" />
   {% endblock %}
diff --git a/components/breadcrumb/breadcrumb.twig b/components/breadcrumb/breadcrumb.twig
index 8000c923b4aa5cb49c032ee96e35f6934a372429..a78bd66f1aeb5bdfd04267d2a904b8997e65b5b3 100644
--- a/components/breadcrumb/breadcrumb.twig
+++ b/components/breadcrumb/breadcrumb.twig
@@ -1,8 +1,7 @@
 {# Breadcrumb Component - Tailwind CSS #}
 {% if breadcrumb %}
   {% set needs_truncation = (breadcrumb|length) > 3 %}
-
-  <nav aria-label="breadcrumb" class="breadcrumb hg:mb-2 hg:w-full hg:md:my-3 hg:2xl:my-4">
+  <nav {{ attributes.setAttribute('aria-label', 'breadcrumb').addClass(['breadcrumb', 'hg:mb-2', 'hg:w-full', 'hg:md:my-3', 'hg:2xl:my-4']) }}>
     <h2 id="system-breadcrumb" class="hg:sr-only">{{ 'Breadcrumb' }}</h2>
     <ol class="breadcrumb-items hg:m-0 hg:flex hg:list-none hg:flex-row hg:items-center hg:gap-1 hg:p-0 hg:leading-none hg:md:gap-2">
       {% for item in breadcrumb %}
diff --git a/components/button/button.twig b/components/button/button.twig
index ac91f8486ba7c66b7b2bdaecc9d941e3d1a2b65f..375a3efcd5a431b7542b88b1bd00da71ba17d54c 100644
--- a/components/button/button.twig
+++ b/components/button/button.twig
@@ -39,7 +39,7 @@
 {% set button_disabled_attr = disabled|default(false) ? 'disabled' : '' %}
 
 {% if href %}
-  <a href="{{ href }}" class="{{ btn_classes|join(' ') }}" {{ disabled_attr }}>
+  <a {{ attributes.setAttribute('href', href).addClass(btn_classes) }} {{ disabled_attr }}>
     {% if icon %}{{
       include(
         '@mercury/components/icon/icon.twig',
@@ -51,7 +51,7 @@
     {{ label }}
   </a>
 {% else %}
-  <button class="{{ btn_classes|join(' ') }}" {{ button_disabled_attr }}>
+  <button {{ attributes.addClass(btn_classes) }} {{ button_disabled_attr }}>
     {% if icon %}{{
       include(
         '@mercury/components/icon/icon.twig',
diff --git a/components/card-events/card-events.twig b/components/card-events/card-events.twig
index 6a9d1094f73ff3c8ea154cf0f3a9cf0f08b7c9f7..a8c5292333894c80cd38cbc28dd79a149e601544 100644
--- a/components/card-events/card-events.twig
+++ b/components/card-events/card-events.twig
@@ -9,7 +9,7 @@
 {% set classes = ['card-events', 'hg:p-6 hg:flex hg:flex-col hg:gap-6 hg:rounded-lg'] %}
 
 {% set event_date_formatted = event_date|date('l, M. j, Y') %}
-<div class="{{ classes|join(' ') }}">
+<div {{ attributes.addClass(classes) }} }}">
   <p class="card-events--date">
     <strong><time datetime="{{ event_date_formatted }}">{{ event_date_formatted }}</time></strong>
   </p>
diff --git a/components/card/card.twig b/components/card/card.twig
index 9a0684b3d90f00edc6cedb45448cdc8a1c646e9a..bc057c52669eef8861d5cf0279547f19d0cae9da 100644
--- a/components/card/card.twig
+++ b/components/card/card.twig
@@ -22,7 +22,7 @@
     |filter(v => v is not empty)
 %}
 
-<div class="{{ card_classes|join(' ') }}">
+<div {{ attributes.addClass(card_classes) }}>
   {% if media.src is not empty %}
     <div class="card--media hg:overflow-hidden">
       {% block media %}