diff --git a/artisan_starterkit/components/nav_alternative/nav_alternative.css b/artisan_starterkit/components/nav_alternative/nav_alternative.css
index 4a3d7b5cfa8c45aba840ab62ae715789262a6fcc..a9a748ab9e4c4b1dc52b6ed001a5e23cd95d37f5 100644
--- a/artisan_starterkit/components/nav_alternative/nav_alternative.css
+++ b/artisan_starterkit/components/nav_alternative/nav_alternative.css
@@ -1,89 +1,90 @@
-ul.navbar-nav {
-  li.nav-item.nav-item--level-1 {
-    position: relative;
-  }
+.nav-alternative {
+  ul.navbar-nav {
+    li.nav-item.nav-item--level-1 {
+      position: relative;
+    }
 
-  li.nav-item.nav-item--level-1 > a.nav-link {
-    position: relative;
-  }
+    li.nav-item.nav-item--level-1 > a.nav-link {
+      position: relative;
+    }
+
+    li.nav-item.nav-item--level-1 > a.nav-link:after {
+      content: unset;
+    }
 
-  li.nav-item.nav-item--level-1 > a.nav-link:after {
-    content: unset;
+    li.nav-item.nav-item--level-1 > a.nav-link:before {
+      content: '';
+      position: absolute;
+      bottom: 10px;
+      left: 50%;
+      width: 0;
+      height: 2px;
+      transition: width 0.33s ease-in-out;
+      transform: translate(-50%, 0);
+    }
+
+    li.nav-item.nav-item--level-1:hover > .submenu-container {
+      opacity: 1;
+      visibility: visible;
+      z-index: 1050;
+    }
   }
 
-  li.nav-item.nav-item--level-1 > a.nav-link:before {
-    content: '';
+  li.nav-item.nav-item--level-1 > .link-expand {
+    display: block;
     position: absolute;
-    bottom: 10px;
-    left: 50%;
-    width: 0;
-    height: 2px;
-    transition: width 0.33s ease-in-out;
-    transform: translate(-50%, 0);
+    top: 8px;
+    right: 0;
   }
 
-  li.nav-item.nav-item--level-1:hover > .submenu-container {
-    opacity: 1;
-    visibility: visible;
-    z-index: 1050;
+  li.nav-item.nav-item--level-1 > .link-expand:after {
+    content: '❯';
+    display: block;
+    transform: rotate(90deg);
+    transition: transform 0.25s ease-in-out;
   }
-}
-
-li.nav-item.nav-item--level-1 > .link-expand {
-  display: block;
-  position: absolute;
-  top: 8px;
-  right: 0;
-}
 
-li.nav-item.nav-item--level-1 > .link-expand:after {
-  content: '❯';
-  display: block;
-  transform: rotate(90deg);
-  transition: transform 0.25s ease-in-out;
-}
+  li.nav-item.nav-item--level-1 > .link-expand[aria-expanded="true"]:after {
+    transform: rotate(270deg);
+  }
 
-li.nav-item.nav-item--level-1 > .link-expand[aria-expanded="true"]:after {
-  transform: rotate(270deg);
-}
+  @media (min-width: 992px) {
+    ul.navbar-nav li.nav-item.nav-item--level-1 {
+      position: initial;
+    }
 
-@media (min-width: 992px) {
-  ul.navbar-nav li.nav-item.nav-item--level-1 {
-    position: initial;
+    li.nav-item.nav-item--level-1 > .link-expand {
+      display: none;
+    }
   }
 
-  li.nav-item.nav-item--level-1 > .link-expand {
-    display: none;
+  .submenu-container span.nav-link {
+    padding-bottom: 0;
   }
-}
-
-.submenu-container span.nav-link {
-  padding-bottom: 0;
-}
-
-.submenu-container:before {
-  content: '';
-  display: block;
-  position: absolute;
-  width: 100%;
-  height: 2rem;
-  top: -2rem;
-  left: 0;
-}
 
-@media (min-width: 992px) {
-  .submenu-container {
+  .submenu-container:before {
+    content: '';
+    display: block;
     position: absolute;
-    top: 4rem;
-    width: 33%;
-    left: 1rem;
-    right: 0;
-    transition: all 0.25s ease-in;
-    opacity: 0;
-    visibility: hidden;
-    background-color: white; /* Map to a settings variable */
-    border-radius: 2px;
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    width: 100%;
+    height: 2rem;
+    top: -2rem;
+    left: 0;
   }
-}
 
+  @media (min-width: 992px) {
+    .submenu-container {
+      position: absolute;
+      top: 4rem;
+      width: 33%;
+      left: 1rem;
+      right: 0;
+      transition: all 0.25s ease-in;
+      opacity: 0;
+      visibility: hidden;
+      background-color: white; /* Map to a settings variable */
+      border-radius: 2px;
+      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    }
+  }
+}
diff --git a/artisan_starterkit/components/nav_alternative/nav_alternative.twig b/artisan_starterkit/components/nav_alternative/nav_alternative.twig
index 1289c94ed39539a2be97c05ea48b4543962f7d88..acb1eb1eb655d65f922a5c8d692eb136cab2d843 100644
--- a/artisan_starterkit/components/nav_alternative/nav_alternative.twig
+++ b/artisan_starterkit/components/nav_alternative/nav_alternative.twig
@@ -24,7 +24,7 @@
 {% set fill = fill ? 'nav-' ~ fill : '' %}
 
 {% set nav_classes = [
-  'main-menu nav navbar-nav position-relative',
+  'main-menu nav navbar-nav position-relative nav-alternative',
   style,
   alignment,
   fill
diff --git a/artisan_starterkit/components/navigation_alternative/navigation_alternative.css b/artisan_starterkit/components/navigation_alternative/navigation_alternative.css
index f60f30284cc89d632ec9ea692777c0bda290fb0d..4071b4ed6dc178b5a7fe45cf49fe092bc13f5483 100644
--- a/artisan_starterkit/components/navigation_alternative/navigation_alternative.css
+++ b/artisan_starterkit/components/navigation_alternative/navigation_alternative.css
@@ -1,42 +1,44 @@
-.navbar.navbar-expand-lg {
-  position: initial;
-}
+.navigation-alternative {
+  .navbar.navbar-expand-lg {
+    position: initial;
+  }
 
-@media (max-width: 992px) {
-  .navbar-collapse {
+  @media (max-width: 992px) {
+    .navbar-collapse {
+      position: fixed;
+      top: 0;
+      right: 0;
+      margin-top: 116px; /* Move this to CSS var taking into account admin toolbar and header height */
+      width: 100%;
+      height: 100vh;
+      overflow: hidden;
+      overflow-y: auto;
+      transform: translateX(100%);
+      transition: transform .25s ease-in-out;
+      padding: 1rem;
+    }
+  }
+
+  .navbar-collapse.collapsing {
     position: fixed;
-    top: 0;
-    right: 0;
-    margin-top: 116px; /* Move this to CSS var taking into account admin toolbar and header height */
-    width: 100%;
-    height: 100vh;
-    overflow: hidden;
-    overflow-y: auto;
-    transform: translateX(100%);
+    height: 100%;
     transition: transform .25s ease-in-out;
-    padding: 1rem;
   }
-}
 
-.navbar-collapse.collapsing {
-   position: fixed;
-   height: 100%;
-   transition: transform .25s ease-in-out;
- }
-
-.navbar-collapse.collapse:not(.show) {
-   display: block;
- }
+  .navbar-collapse.collapse:not(.show) {
+    display: block;
+  }
 
-.navbar-collapse.show {
-   transform: translateX(0);
-   z-index: 1050;
-}
+  .navbar-collapse.show {
+    transform: translateX(0);
+    z-index: 1050;
+  }
 
-.dropdown-toggle-split-link:hover ~ .dropdown-menu {
-  display: block;
-  top: 100%;
-  left: 0;
-  margin-top: var(--bs-dropdown-spacer);
+  .dropdown-toggle-split-link:hover ~ .dropdown-menu {
+    display: block;
+    top: 100%;
+    left: 0;
+    margin-top: var(--bs-dropdown-spacer);
+  }
 }
 
diff --git a/artisan_starterkit/components/navigation_alternative/navigation_alternative.twig b/artisan_starterkit/components/navigation_alternative/navigation_alternative.twig
index f820ae180a09a72dbd7ff4768689e0236bb6c951..dd4d1fe8d22c8d2103d70f6bd2ed0059f9067425 100644
--- a/artisan_starterkit/components/navigation_alternative/navigation_alternative.twig
+++ b/artisan_starterkit/components/navigation_alternative/navigation_alternative.twig
@@ -4,7 +4,7 @@
 {% set header_container_attributes = header_container_attributes ?: create_attribute() %}
 {% set navbar_toggler_attributes = navbar_toggler_attributes ?: create_attribute() %}
 
-<div {{ navbar_container_attributes }}>
+<div {{ navbar_container_attributes.addClass('navigation-alternative') }}>
   {% block branding %}
     {{ branding }}
   {% endblock %}
diff --git a/artisan_starterkit/templates/page/page--artisan-styleguide.html.twig b/artisan_starterkit/templates/page/page--artisan-styleguide.html.twig
new file mode 100644
index 0000000000000000000000000000000000000000..81601eccfed3e08f093bf82595643d11208bd44a
--- /dev/null
+++ b/artisan_starterkit/templates/page/page--artisan-styleguide.html.twig
@@ -0,0 +1,18 @@
+{% embed 'artisan:page' with {
+  header_attributes: create_attribute({'class': ['shadow']}),
+  footer_attributes: create_attribute({'class': ['shadow']}),
+  main_attributes: create_attribute({'class': ['shadow']}),
+  header: {
+    top: page.header_top,
+    branding: page.branding,
+    primary_menu: page.primary_menu,
+    secondary_menu: page.secondary_menu,
+    header: page.header,
+  },
+  main_content: page.content,
+  footer: {
+    top: page.footer_top,
+    bottom: page.footer_bottom,
+  }
+} only %}
+{% endembed %}
diff --git a/components/block/block.component.yml b/components/block/block.component.yml
index b0d2f052ec9d6f640b94a1562e88ce213c6bd71b..4223bd4308e9aeaa82e8b288100176c861a6ac96 100644
--- a/components/block/block.component.yml
+++ b/components/block/block.component.yml
@@ -3,8 +3,12 @@ name: Block
 slots:
   label:
     title: Label
+    examples:
+      - <h2>Example Block Label</h2>
   content:
     title: Content
+    examples:
+      - Example Block Content
 props:
   type: object
   properties:
@@ -12,7 +16,11 @@ props:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+        - class: [ 'example-class-attribute' ]
     label_attributes:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+        - class: [ 'example-label-class-attribute' ]
diff --git a/components/breadcrumb/breadcrumb.component.yml b/components/breadcrumb/breadcrumb.component.yml
index a79d5e444c9162509c69fc911fd150a7aa6087db..f3d4a7978dcdbafd8ec7f47750ff5b0ff9f29d42 100644
--- a/components/breadcrumb/breadcrumb.component.yml
+++ b/components/breadcrumb/breadcrumb.component.yml
@@ -1,8 +1,5 @@
 $schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
 name: Breadcrumb
-slots:
-  breadcrumb:
-    title: Breadcrumb
 props:
   type: object
   properties:
@@ -10,11 +7,30 @@ props:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+        - class: [ 'example-attributes-class' ]
     breadcrumb_attributes:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+        - class: [ 'example-breadcrumb-attributes-class' ]
     breadcrumb_item_attributes:
       type: Drupal\Core\Template\Attribute
       name: Attributes
-      title: Attributes    
\ No newline at end of file
+      title: Attributes
+      examples:
+        - class: [ 'example-breadcrumb-item-attributes-class' ]
+    breadcrumb:
+      title: Breadcrumb
+      description: Contains breadcrumb items
+      type: array
+      items:
+        type: object
+      minItems: 1
+      uniqueItems: true
+      examples:
+        -
+          - { text: Item1, url: '#' }
+          - { text: Item2, url: '#' }
+          - { text: Item3 }
diff --git a/components/breadcrumb/breadcrumb.twig b/components/breadcrumb/breadcrumb.twig
index 8bf9753a9258a41b19fa6667f55e48f38a5073da..7e912c256a5a3594f554896c1bab512fbabb544a 100644
--- a/components/breadcrumb/breadcrumb.twig
+++ b/components/breadcrumb/breadcrumb.twig
@@ -4,21 +4,19 @@
   {% set breadcrumb_attributes = breadcrumb_attributes ?: create_attribute() %}
   {% set breadcrumb_item_attributes = breadcrumb_item ?: create_attribute() %}
 
-  {% block breadcrumb %}
-    <nav {{ attributes.setAttribute('role', 'navigation').setAttribute('aria-labelledby', 'system-breadcrumb') }}>
-      <h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
-      <ol {{ breadcrumb_attributes.addClass(['breadcrumb']) }}>
-        {% for item in breadcrumb %}
-          <li {{ breadcrumb_item_attributes.addClass(['breadcrumb-item', not item.url ? 'active' ]) }}>
-            {% if item.url %}
-              <a href="{{ item.url }}">{{ item.text }}</a>
-            {% else %}
-              {{ item.text }}
-            {% endif %}
-          </li>
-        {% endfor %}
-      </ol>
-    </nav>
-  {% endblock %}
-  
-{% endif %}
\ No newline at end of file
+  <nav {{ attributes.setAttribute('role', 'navigation').setAttribute('aria-labelledby', 'system-breadcrumb') }}>
+    <h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
+    <ol {{ breadcrumb_attributes.addClass(['breadcrumb']) }}>
+      {% for item in breadcrumb %}
+        <li {{ breadcrumb_item_attributes.addClass(['breadcrumb-item', not item.url ? 'active' ]) }}>
+          {% if item.url %}
+            <a href="{{ item.url }}">{{ item.text }}</a>
+          {% else %}
+            {{ item.text }}
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ol>
+  </nav>
+
+{% endif %}
diff --git a/components/dropdown-menu/dropdown-menu.component.yml b/components/dropdown-menu/dropdown-menu.component.yml
index 2640a9fb6f082cc46e520107f5cd8d07cf256aad..c47968a9a16ecbddd689f973f9fb5f8f1e080474 100644
--- a/components/dropdown-menu/dropdown-menu.component.yml
+++ b/components/dropdown-menu/dropdown-menu.component.yml
@@ -1,12 +1,24 @@
 $schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
 name: Dropdown Menu
-slots:
-  dropdown_menu:
-    title: Dropdown menu
 props:
   type: object
   properties:
     attributes:
       type: Drupal\Core\Template\Attribute
       name: Attributes
-      title: Attributes
\ No newline at end of file
+      title: Attributes
+      examples:
+        - class: [ 'example-attributes-class', 'd-block' ]
+    dropdown_menu:
+      title: Dropdown Menu
+      description: Contains dropdown menu items
+      type: array
+      items:
+        type: object
+      minItems: 1
+      uniqueItems: true
+      examples:
+        -
+          - { title: Titulo, url: '#' }
+          - { title: Titulo1, url: '#' }
+          - { title: Titulo2, url: '#' }
diff --git a/components/dropdown-menu/dropdown-menu.twig b/components/dropdown-menu/dropdown-menu.twig
index 664d1aaff22f0758449e62bd842d8d61b7e4c77a..957167f89651f8c2aed956fd1c425a31621298c2 100644
--- a/components/dropdown-menu/dropdown-menu.twig
+++ b/components/dropdown-menu/dropdown-menu.twig
@@ -1,9 +1,8 @@
 {% set attributes = attributes ?: create_attribute() %}
 
-{% if (items|length) > 0 %}
+{% if (dropdown_menu|length) > 0 %}
   <ul {{ attributes.addClass('dropdown-menu') }}>
-    {% block dropdown_menu %}
-      {% for item in items %}
+      {% for item in dropdown_menu %}
         {% set nav_link_classes = ['dropdown-item', item.in_active_trail ? 'active' : '', 'nav-link'] %}
 
         {% if item.url.options.attributes.class is iterable %}
@@ -17,11 +16,10 @@
           {% if item.below %}
             {%
               include 'artisan:dropdown-menu' with {
-              items: item.below,
+              dropdown_menu: item.below,
             } only %}
           {% endif %}
         </li>
       {% endfor %}
-    {% endblock %}
   </ul>
 {% endif %}
diff --git a/components/dropdown/dropdown.component.yml b/components/dropdown/dropdown.component.yml
index 39d8e1f1a3e995e0933c82dc585481ca2625f455..3ffeaad78cba70c275480e83c0e34116f1e3db83 100644
--- a/components/dropdown/dropdown.component.yml
+++ b/components/dropdown/dropdown.component.yml
@@ -1,10 +1,5 @@
 $schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
 name: Dropdown
-slots:
-  dropdown_toggle:
-    title: Dropdown toggle
-  dropdown_menu:
-    title: Dropdown menu
 props:
   type: object
   properties:
@@ -12,15 +7,42 @@ props:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+        - class: [ 'example-attributes-class' ]
     dropdown_toggle_attributes:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+        - class: [ 'example-dropdown-toggle-attributes-class' ]
     dropdown_menu_attributes:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+        - class: [ 'example-dropdown-menu-attributes-class' ]
     dropdown_menu_item_attributes:
       type: Drupal\Core\Template\Attribute
       name: Attributes
-      title: Attributes
\ No newline at end of file
+      title: Attributes
+      examples:
+        - class: [ 'example-dropdown-item-attributes-class' ]
+    dropdown_toggle:
+      type: string
+      title: Dropdown toggle
+      examples:
+        - Dropdown toggle
+    dropdown_menu:
+      title: Dropdown Menu
+      description: Contains dropdown menu items
+      type: array
+      items:
+        type: object
+      minItems: 1
+      uniqueItems: true
+      examples:
+        -
+          - { link: Dropdown Link 1 }
+          - { link: Dropdown Link 2 }
+          - { link: Dropdown Link 3 }
+
diff --git a/components/dropdown/dropdown.twig b/components/dropdown/dropdown.twig
index 87f0d0fb1f0e2662e46b113b17462350d77a3db0..fe99801dbc3ed37d7be87d6c7f27a41e64b688bf 100644
--- a/components/dropdown/dropdown.twig
+++ b/components/dropdown/dropdown.twig
@@ -5,22 +5,18 @@
 
 <div {{ attributes.addClass('dropdown') }}>
 
-  {% block dropdown_toggle %}
     <a {{ dropdown_toggle_attributes
       .setAttribute('type', 'button')
       .setAttribute('data-bs-toggle', 'dropdown')
       .setAttribute('aria-expanded', 'false')
       .addClass(['dropdown-toggle']) }}>
-      {{ toggle }}
+      {{ dropdown_toggle }}
     </a>
-  {% endblock %}
 
-  {% block dropdown_menu %}
     <div {{ dropdown_menu_attributes.setAttribute('aria-labelledby', 'Dropdown').addClass('dropdown-menu') }}>
-      {%- for item in items -%}
+      {%- for item in dropdown_menu -%}
         <div {{ dropdown_menu_item_attributes.addClass('dropdown-item') }}>{{ item.link }}</div>
       {%- endfor -%}
     </div>
-  {% endblock %}
 
-</div>
\ No newline at end of file
+</div>
diff --git a/components/footer-bottom/footer-bottom.component.yml b/components/footer-bottom/footer-bottom.component.yml
index 51e10c648c45332ae96b1e63b885f360ce59242f..c922061bcccbfd8883f2a46411664d63ea82e24c 100644
--- a/components/footer-bottom/footer-bottom.component.yml
+++ b/components/footer-bottom/footer-bottom.component.yml
@@ -2,6 +2,18 @@ name: Footer Bottom Component
 slots:
   content:
     title: Footer bottom content
+    description: Slot for footer bottom content that can include HTML or other components
+    examples:
+      - >
+        {% embed 'artisan:nav' with {
+          attributes: create_attribute().addClass(['navbar-nav']),
+          items: [
+                { "url": "internal:/", "title": "Example Footer Bottom Link1" },
+                { "url": "internal:/", "title": "Example Footer Bottom Link2" },
+                { "url": "internal:/", "title": "Example Footer Bottom Link3" }
+              ]
+        } only %}
+        {% endembed %}
 props:
   type: object
   properties:
@@ -9,7 +21,11 @@ props:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+      - class: [ 'example-attributes-class' ]
     container_attributes:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+      - class: [ 'example-container-attributes-class' ]
diff --git a/components/footer-bottom/footer-bottom.twig b/components/footer-bottom/footer-bottom.twig
index 1955ac4b8cefefaf45cbdb1fdb40158e2c201a81..386e4c1cec14d5c201dbab48cea49d50b290d081 100644
--- a/components/footer-bottom/footer-bottom.twig
+++ b/components/footer-bottom/footer-bottom.twig
@@ -2,6 +2,8 @@
 {% set container_attributes = container_attributes ?: create_attribute() %}
 <div {{ attributes.addClass(['footer-bottom']) }}>
   <div {{ container_attributes }}>
-    {{ content }}
+      {% if content %}
+        {{ content }}
+      {% endif %}
   </div>
 </div>
diff --git a/components/footer-top/footer-top.component.yml b/components/footer-top/footer-top.component.yml
index b1e05c5317ed97ae8c2afa14ca140c6fc5c8d51b..4b6812df6630c27dd0bccc92280e8fbbd134d172 100644
--- a/components/footer-top/footer-top.component.yml
+++ b/components/footer-top/footer-top.component.yml
@@ -2,14 +2,31 @@ name: Footer Top Component
 slots:
   content:
     title: Footer top content
+    examples:
+      - >
+        {% embed 'artisan:nav' with {
+          attributes: create_attribute().addClass(['navbar-nav']),
+          items: [
+                { "url": "internal:/", "title": "Example Footer Top Link1" },
+                { "url": "internal:/", "title": "Example Footer Top Link2" },
+                { "url": "internal:/", "title": "Example Footer Top Link3" }
+              ]
+        } only %}
+        {% endembed %}
 props:
   type: object
   properties:
     attributes:
       type: Drupal\Core\Template\Attribute
       name: Attributes
-      title: Attributes
+      title: Footer Top Attributes
+      description: Attributes for the footer top wrapper
+      examples:
+        - class: [ 'example-attributes-class' ]
     container_attributes:
       type: Drupal\Core\Template\Attribute
       name: Attributes
-      title: Attributes
+      title: Container Attributes
+      description: Attributes for the container element
+      examples:
+        - class: [ 'example-container-attributes-class' ]
diff --git a/components/footer/footer.component.yml b/components/footer/footer.component.yml
index 8f2f2bcb8363bb53bab5a64f7b7111542fcc0054..00ba39fcc4fbf1e7e0ecc6f98a0d51b5093210e9 100644
--- a/components/footer/footer.component.yml
+++ b/components/footer/footer.component.yml
@@ -1,12 +1,57 @@
 $schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
 name: Footer
 slots:
-  content:
-    title: content
+  content_top:
+    title: Footer Top Content
+    description: Content for the top section of the footer
+    examples:
+      - >
+        {% embed 'artisan:footer-top' with {
+          content: {
+            '#type': 'inline_template',
+            '#template': '{% include "artisan:nav" with {
+              attributes: create_attribute().addClass(["navbar-nav", "flex-row", "gap-4", "justify-content-center"]),
+              items: [
+                { "url": "internal:/", "title": "Example Footer Top Link1" },
+                { "url": "internal:/", "title": "Example Footer Top Link2" },
+                { "url": "internal:/", "title": "Example Footer Top Link3" }
+              ]
+            } only %}'
+          }
+        } only %}
+        {% endembed %}
+  content_bottom:
+    title: Footer Bottom Content
+    description: Content for the bottom section of the footer
+    examples:
+      - >
+        {% embed 'artisan:footer-bottom' with {
+          content: {
+            '#type': 'inline_template',
+            '#template': '{% include "artisan:nav" with {
+              attributes: create_attribute().addClass(["navbar-nav", "flex-row", "gap-4", "justify-content-center"]),
+              items: [
+                { "url": "internal:/", "title": "Example Footer Bottom Link1" },
+                { "url": "internal:/", "title": "Example Footer Bottom Link2" },
+                { "url": "internal:/", "title": "Example Footer Bottom Link3" }
+              ]
+            } only %}'
+          }
+        } only %}
+        {% endembed %}
 props:
   type: object
   properties:
     attributes:
       type: Drupal\Core\Template\Attribute
-      name: Attributes
-      title: Attributes
\ No newline at end of file
+      title: Footer Attributes
+      description: Attributes for the footer element
+      examples:
+        - class: [' example-attributes-class ']
+    container_attributes:
+      type: Drupal\Core\Template\Attribute
+      title: Footer Attributes
+      description: Attributes for the footer element
+      examples:
+        - class: [' example-container-attributes-class ']
+
diff --git a/components/footer/footer.twig b/components/footer/footer.twig
index c69f9431541b032f0cba92f816fe5ece901848f2..34c79fa3ac98bbcdf8d6b29361b996abdc889553 100644
--- a/components/footer/footer.twig
+++ b/components/footer/footer.twig
@@ -1,19 +1,22 @@
 {% set attributes = attributes ?: create_attribute() %}
+{% set container_attributes = container_attributes ?: create_attribute() %}
 
-<footer {{ attributes.addClass('footer') }}>
+<footer {{ attributes.addClass(['footer']) }}>
   {% block content %}
+    {% if content_top %}
+      {% embed 'artisan:footer-top' with {
+        container_attributes: container_attributes.addClass(['container']),
+        content: content_top
+      } only %}
+      {% endembed %}
+    {% endif %}
 
-    {% embed 'artisan:footer-top' with {
-      container_attributes: create_attribute({'class': ['container']}),
-      content: content.top
-    } only %}
-    {% endembed %}
-
-    {% embed 'artisan:footer-bottom' with {
-      container_attributes: create_attribute({'class': ['container']}),
-      content: content.bottom
-    } only %}
-    {% endembed %}
-
+    {% if content_bottom %}
+      {% embed 'artisan:footer-bottom' with {
+        container_attributes: container_attributes.addClass(['container']),
+        content: content_bottom
+      } only %}
+      {% endembed %}
+    {% endif %}
   {% endblock %}
 </footer>
diff --git a/components/header-top/header-top.component.yml b/components/header-top/header-top.component.yml
index 5ca785b3fd02f39deb439d7cd982ad27a80c9683..c6db395e0b6cd74ad0cbbbe05709555d7eefa950 100644
--- a/components/header-top/header-top.component.yml
+++ b/components/header-top/header-top.component.yml
@@ -3,6 +3,8 @@ name: Header top
 slots:
   content:
     title: Header top content
+    examples:
+      - Header top content
 props:
   type: object
   properties:
@@ -10,7 +12,11 @@ props:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+        - class: [ 'example-class-attribute' ]
     container_attributes:
       type: Drupal\Core\Template\Attribute
       name: Attributes
-      title: Attributes
\ No newline at end of file
+      title: Attributes
+      examples:
+        - class: [ 'example-container-class-attribute' ]
diff --git a/components/input/input.component.yml b/components/input/input.component.yml
index 3032afbbee46f5c256dead63a026d64b9cec4913..03d603d9313c67dfbf651ec90ffcc5ea2a5d8e1a 100644
--- a/components/input/input.component.yml
+++ b/components/input/input.component.yml
@@ -6,7 +6,14 @@ props:
     children:
       type: string
       title: 'Input children'
+      examples:
+        - 'Morbi mollis tellus ac'
     attributes:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+        - class: [ 'example-attributes-class', 'form-control' ]
+        - type: 'text'
+        - value: 'Maecenas egestas arcu quis ligula'
+        - placeholder: 'Maecenas egestas arcu quis ligula'
diff --git a/components/local-tasks-floating-block/local-tasks.component.yml b/components/local-tasks-floating-block/local-tasks.component.yml
deleted file mode 100644
index 020b3b437ec9b19e96ffd83bd04f60b337191919..0000000000000000000000000000000000000000
--- a/components/local-tasks-floating-block/local-tasks.component.yml
+++ /dev/null
@@ -1,18 +0,0 @@
-$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
-name: Local Tasks
-slots:
-  primary_tabs:
-    title: Primary Tabs
-  secondary_tabs:
-    title: Secondary Tabs
-props:
-  type: object
-  properties:
-    attributes:
-      type: Drupal\Core\Template\Attribute
-      name: Attributes
-      title: Attributes
-    secondary_tabs_attributes:
-      type: Drupal\Core\Template\Attribute
-      name: Attributes
-      title: Attributes
\ No newline at end of file
diff --git a/components/local-tasks-floating/local-tasks-floating-block.component.yml b/components/local-tasks-floating/local-tasks-floating-block.component.yml
index d6f87c0cf2dd34596ce291d5c4702a5112ec9dd4..e01503b7ff1f88cd75be94f09fef48519c728250 100644
--- a/components/local-tasks-floating/local-tasks-floating-block.component.yml
+++ b/components/local-tasks-floating/local-tasks-floating-block.component.yml
@@ -1,8 +1,20 @@
 $schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
 name: Local Tasks floating block
 slots:
+  icon:
+    title: Icon
   content:
     title: Content
+    examples:
+      - >
+        {% embed "artisan:local-tasks" with {
+          primary_tabs: {
+            '#markup':
+              '<li class="nav-item"><a href="#" class="nav-link">Tab 1</a></li>
+              <li class="nav-item"><a href="#" class="nav-link">Tab 2</a></li>'
+          }
+        } only %}
+        {% endembed %}
 props:
   type: object
   properties:
@@ -10,3 +22,12 @@ props:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+        - class: [ 'example-attributes-class' ]
+    nav_attributes:
+      type: Drupal\Core\Template\Attribute
+      name: Nav attributes
+      title: Nav attributes
+      examples:
+        - class: [ 'example-nav-attributes-class' ]
+
diff --git a/components/local-tasks-floating/local-tasks-floating-block.twig b/components/local-tasks-floating/local-tasks-floating-block.twig
index 333882ed6d600fa7b460a78e400208ce43ebb7ff..c1d056b709c828b41a166b02286841afc8a5486d 100644
--- a/components/local-tasks-floating/local-tasks-floating-block.twig
+++ b/components/local-tasks-floating/local-tasks-floating-block.twig
@@ -1,8 +1,15 @@
-<div class="local-tasks-floating-block bg-primary position-fixed rounded-circle border border-white d-flex align-items-center justify-content-center">
-  <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#FFFFFF">
+{% set attributes = attributes ?: create_attribute() %}
+{% set nav_attributes = nav_attributes ?: create_attribute() %}
+
+<div {{ attributes.addClass(['local-tasks-floating-block', 'bg-primary', 'position-fixed', 'rounded-circle', 'border', 'border-white', 'd-flex', 'align-items-center', 'justify-content-center']) }}>
+  {% block icon %}
+    <svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 -960 960 960" width="40px" fill="#FFFFFF">
       <path d="m499-287 335-335-52-52-335 335 52 52Zm-261 87q-100-5-149-42T40-349q0-65 53.5-105.5T242-503q39-3 58.5-12.5T320-542q0-26-29.5-39T193-600l7-80q103 8 151.5 41.5T400-542q0 53-38.5 83T248-423q-64 5-96 23.5T120-349q0 35 28 50.5t94 18.5l-4 80Zm280 7L353-358l382-382q20-20 47.5-20t47.5 20l70 70q20 20 20 47.5T900-575L518-193Zm-159 33q-17 4-30-9t-9-30l33-159 165 165-159 33Z"/>
-  </svg>
-  <nav class="text-center position-absolute" role="navigation" aria-label="{{ 'Tabs'|t }}">
-    {{ content }}
+    </svg>
+  {% endblock %}
+  <nav {{ nav_attributes.addClass(['text-center', 'position-absolute']).setAttribute('role', 'navigation').setAttribute('aria-label', 'Tabs'|t) }}>
+    {% block content %}
+      {{ content }}
+    {% endblock content %}
   </nav>
-</div>
\ No newline at end of file
+</div>
diff --git a/components/local-tasks/local-tasks.component.yml b/components/local-tasks/local-tasks.component.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e4cfdb57c1e2792cc3538432723268ce7045c6d5
--- /dev/null
+++ b/components/local-tasks/local-tasks.component.yml
@@ -0,0 +1,34 @@
+$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
+name: Local Tasks
+slots:
+  primary_tabs:
+    title: Primary Tabs
+    examples:
+      - >
+        <ul class="nav nav-tabs mb-3">
+        <li class="nav-item list-unstyled"><a href="#" class="nav-link">Primary Tab Example 1</a></li>
+        <li class="nav-item list-unstyled"><a href="#" class="nav-link">Primary Tab Example 2</a></li>
+        </ul>
+  secondary_tabs:
+    title: Secondary Tabs
+    examples:
+      - >
+        <ul class="nav nav-pills">
+        <li class="nav-item list-unstyled"><a href="#" class="nav-link">Secondary Tab Example 1</a></li>
+        <li class="nav-item list-unstyled"><a href="#" class="nav-link">Secondary Tab Example 2</a></li>
+        </ul>
+props:
+  type: object
+  properties:
+    attributes:
+      type: Drupal\Core\Template\Attribute
+      name: Attributes
+      title: Attributes
+      examples:
+        - class: [ 'example-class-attribute' ]
+    secondary_tabs_attributes:
+      type: Drupal\Core\Template\Attribute
+      name: Attributes
+      title: Attributes
+      examples:
+        - class: [ 'example-secondary-tabs-class-attribute' ]
diff --git a/components/local-tasks-floating-block/local-tasks.twig b/components/local-tasks/local-tasks.twig
similarity index 97%
rename from components/local-tasks-floating-block/local-tasks.twig
rename to components/local-tasks/local-tasks.twig
index 99f0e04d96bd7c07c9386ca270dcf7d9c834b432..79753b7a222e958b246a859d8d86b50f1f85e3f3 100644
--- a/components/local-tasks-floating-block/local-tasks.twig
+++ b/components/local-tasks/local-tasks.twig
@@ -13,4 +13,4 @@
       <ul {{ secondary_tabs_attributes.addClass(['nav', 'nav-pills']) }}>{{ secondary_tabs }}</ul>
     {% endif %}
   {% endblock %}
-{% endapply %}
\ No newline at end of file
+{% endapply %}
diff --git a/components/nav-item/nav-item.component.yml b/components/nav-item/nav-item.component.yml
index 2003834576e611f065090e0542e732c74be80ca2..f35e077e25223a1151bc7e42c8bf8f0481cc26a4 100644
--- a/components/nav-item/nav-item.component.yml
+++ b/components/nav-item/nav-item.component.yml
@@ -3,10 +3,15 @@ name: Nav Item
 slots:
   nav_item:
     title: Nav Item
+    examples:
+      - >
+        <ul class="list-unstyled"><li class="nav-item"><a href="#" class="nav-link">Navigation Link 1</a></li></ul>
 props:
   type: object
   properties:
     attributes:
       type: Drupal\Core\Template\Attribute
       name: Attributes
-      title: Attributes
\ No newline at end of file
+      title: Attributes
+      examples:
+        - class: [ 'example-attributes-class' ]
diff --git a/components/nav/nav.component.yml b/components/nav/nav.component.yml
index 7e4ff1946baa29882ff6ccc42332581a5bc69d2b..0ba4a5986c31a126cd389713100e3f7694d2a906 100644
--- a/components/nav/nav.component.yml
+++ b/components/nav/nav.component.yml
@@ -1,8 +1,14 @@
 $schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
 name: Nav
 slots:
-  nav_items:
-    title: Nav items
+  items:
+    title: Items
+    description: Items for the Nav
+    examples:
+      - >
+        <li class="nav-item"><a href="#" class="nav-link">Navigation Link 1</a></li>
+        <li class="nav-item"><a href="#" class="nav-link">Navigation Link 2</a></li>
+        <li class="nav-item"><a href="#" class="nav-link">Navigation Link 2</a></li>
 props:
   type: object
   properties:
@@ -10,3 +16,5 @@ props:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+        - class: [ 'example-class-attribute' ]
diff --git a/components/nav/nav.twig b/components/nav/nav.twig
index a6a4842d0efaed50379de2cff6c8d2ac9b895fbb..e6600dd79109044036830b19849d75a77c20ed8d 100644
--- a/components/nav/nav.twig
+++ b/components/nav/nav.twig
@@ -25,7 +25,7 @@
 
 {% if items %}
   <ul {{ attributes.addClass(nav_classes) }}>
-    {% block nav_items %}
+    {% block items %}
       {% for item in items %}
         {%
           set nav_item_classes = [
diff --git a/components/navigation/navigation.component.yml b/components/navigation/navigation.component.yml
index f1fca7784276764c96bb375bb2d6975cbc1c79f6..6a67adb9e5cfe342151caf547c3aad7b15285631 100644
--- a/components/navigation/navigation.component.yml
+++ b/components/navigation/navigation.component.yml
@@ -3,12 +3,50 @@ name: Navigation
 slots:
   branding:
     title: Branding
+    examples:
+    - >
+      {% embed "artisan:navbar-brand" with {
+          image: '/themes/custom/artisan2/logo.svg',
+          width: '75px',
+          height: 'auto',
+          alt: elements.content.site_name['#markup'] ~ ' logo',
+          attributes: create_attribute({'class': ['d-inline-flex', 'align-items-center']})
+        } only %}
+      {% endembed %}
   primary_menu:
     title: Primary menu
+    examples:
+    - >
+      {% embed 'artisan:nav' with {
+        attributes: create_attribute({'class': ['navbar-nav']}),
+        items: [
+          { 'url': 'internal:/', 'title': 'Main Menu Example Link1' } ,
+          { 'url': 'internal:/', 'title': 'Main Menu Example Link2' }
+        ]
+      } only %}
+      {% endembed %}
   secondary_menu:
     title: Secondary menu
+    examples:
+    - >
+      {% embed 'artisan:nav' with {
+        attributes: create_attribute({'class': ['navbar-nav']}),
+        items: [
+          { 'url': 'internal:/', 'title': 'Secondary Menu Example Link1' } ,
+        ]
+      } only %}
+      {% endembed %}
   header:
     title: Header
+    examples:
+    - >
+      {% embed 'artisan:nav' with {
+        attributes: create_attribute({'class': ['navbar-nav']}),
+        items: [
+          { 'url': 'internal:/', 'title': 'Header' } ,
+        ]
+      } only %}
+      {% endembed %}
 props:
   type: object
   properties:
@@ -16,19 +54,29 @@ props:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+        - class: [ 'example-attributes-class', 'justify-content-between' ]
     navbar_container_attributes:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+        - class: [ 'example-navbar-container-attributes-class', 'container', 'gap-3' ]
     navbar_collapse_attributes:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+        - class: [ 'example-navbar-collapse-attributes-class', 'justify-content-lg-evenly' ]
     navbar_fixed_attributes:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+        - class: [ 'example-navbar-fixed-attributes-class' ]
     navbar_toggler_attributes:
       type: Drupal\Core\Template\Attribute
       name: Attributes
-      title: Attributes
\ No newline at end of file
+      title: Attributes
+      examples:
+        - class: [ 'example-navbar-toggler-attributes-class' ]
diff --git a/components/select/select.component.yml b/components/select/select.component.yml
index e755b71dac16145dbe4e2048dc85814a5947262c..1f862ce009b10646092cde8e517add451abc5e5f 100644
--- a/components/select/select.component.yml
+++ b/components/select/select.component.yml
@@ -1,8 +1,5 @@
 $schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
 name: Select
-slots:
-  options:
-    title: Options
 props:
   type: object
   properties:
@@ -10,3 +7,18 @@ props:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+        - class: [ 'example-attributes-class', 'form-select' ]
+    options:
+      title: Options
+      description: Contains option items
+      type: array
+      items:
+        type: object
+      minItems: 1
+      uniqueItems: true
+      examples:
+        -
+          - { label: 'Option 1', type: 'option', value: 'Option 1'}
+          - { label: 'Option 2', type: 'option', value: 'Option 2'}
+          - { label: 'Option 3', type: 'option', value: 'Option 3'}
diff --git a/components/textarea/textarea.component.yml b/components/textarea/textarea.component.yml
index c9c15f4c0e4107ebf2a4e177959c00fbeb2bb612..1f32af3edb3766d5e1dd66a89a9de2c9a54a0c90 100644
--- a/components/textarea/textarea.component.yml
+++ b/components/textarea/textarea.component.yml
@@ -6,11 +6,17 @@ props:
     value:
       type: string
       title: 'Textarea content'
+      examples:
+        - 'Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Phasellus nec sem in justo pellentesque facilisis. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Aenean viverra rhoncus pede. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Vivamus quis mi. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vivamus quis mi. Ut tincidunt tincidunt erat. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Sed fringilla mauris sit amet nibh. Quisque ut nisi. Class aptent taciti '
     attributes:
       type: Drupal\Core\Template\Attribute
       name: Attributes
       title: Attributes
+      examples:
+        - class: [ 'example-attributes-class' ]
     textarea_attributes:
       type: Drupal\Core\Template\Attribute
       name: Textarea attributes
       title: Textarea attributes
+      examples:
+        - class: [ 'textarea-attributes-class', 'form-control' ]