diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/alert/alert-group/alert-group.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/alert/alert-group/alert-group.component.ts
index 25c1d3d62d..21c27f401b 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/alert/alert-group/alert-group.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/alert/alert-group/alert-group.component.ts
@@ -16,6 +16,11 @@ import { AsyncPipe } from '@angular/common';
  * Groups and manages multiple alert messages.
  *
  * Use this component to display stacked alerts in a single, consistent location.
+ *
+ * @example
+ *   ```html
+ *   <fudis-alert-group [position]="'fixed'"></fudis-alert-group>
+ *   ```;
  */
 @Component({
   selector: 'fudis-alert-group',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/badge/badge.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/badge/badge.component.ts
index b5cae00d75..5731717848 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/badge/badge.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/badge/badge.component.ts
@@ -6,6 +6,11 @@ import { FudisBadgeVariant } from '../../types/miscellaneous';
  *
  * Use this component to convey concise information, like state or classification that supplements
  * surrounding content.
+ *
+ * @example
+ *   ```html
+ *   <fudis-badge [variant]="'success'" [content]="'Badge Text'"></fudis-badge>
+ *   ```;
  */
 @Component({
   selector: 'fudis-badge',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/breadcrumbs-item/breadcrumbs-item.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/breadcrumbs-item/breadcrumbs-item.component.ts
index 34f8908068..e8e2661ae3 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/breadcrumbs-item/breadcrumbs-item.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/breadcrumbs-item/breadcrumbs-item.component.ts
@@ -14,6 +14,15 @@ import { IconComponent } from '../../icon/icon.component';
  * `fudis-breadcrumbs`.
  *
  * Use this component with descriptive link text to ensure understandability.
+ *
+ * @example
+ *   ```html
+ *   <fudis-breadcrumbs [label]="'Site navigation'">
+ *     <fudis-breadcrumbs-item>
+ *       <a fudisLink [title]="'Home'" href="/"></a>
+ *     </fudis-breadcrumbs-item>
+ *   </fudis-breadcrumbs>
+ *   ```;
  */
 @Component({
   selector: 'fudis-breadcrumbs-item',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/breadcrumbs.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/breadcrumbs.component.ts
index 09807a3198..9d29fb58db 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/breadcrumbs.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/breadcrumbs/breadcrumbs.component.ts
@@ -9,6 +9,18 @@ import { AsyncPipe } from '@angular/common';
  *
  * Use this component to help users understand their location and navigate back through parent
  * levels.
+ *
+ * @example
+ *   ```html
+ *   <fudis-breadcrumbs [label]="'Site navigation'">
+ *     <fudis-breadcrumbs-item>
+ *       <a fudisLink [title]="'Home'" href="/"></a>
+ *     </fudis-breadcrumbs-item>
+ *     <fudis-breadcrumbs-item>
+ *       <a fudisLink [title]="'Products'" href="/products"></a>
+ *     </fudis-breadcrumbs-item>
+ *   </fudis-breadcrumbs>
+ *   ```;
  */
 @Component({
   selector: 'fudis-breadcrumbs',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/button/button.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/button/button.component.ts
index 009ee70e26..3c37c2f5b7 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/button/button.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/button/button.component.ts
@@ -20,6 +20,11 @@ import { PopoverDirective } from '../../directives/popover/popover.directive';
  *
  * Use this component for primary user actions such as submitting forms, confirming choices, or
  * navigating workflows.
+ *
+ * @example
+ *   ```html
+ *   <fudis-button [label]="'Save'" (handleClick)="onSave()"></fudis-button>
+ *   ```;
  */
 @Component({
   selector: 'fudis-button',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item-details/description-list-item-details.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item-details/description-list-item-details.component.ts
index 285d845e0f..5b587acb80 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item-details/description-list-item-details.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item-details/description-list-item-details.component.ts
@@ -19,6 +19,16 @@ import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
 
 /**
  * Displays the details (value) of a term (key) in a DescriptionListItemComponent.
+ *
+ * @example
+ *   ```html
+ *   <fudis-dl>
+ *     <fudis-dl-item>
+ *       <fudis-dt>Name</fudis-dt>
+ *       <fudis-dd>Jane Doe</fudis-dd>
+ *     </fudis-dl-item>
+ *   </fudis-dl>
+ *   ```;
  */
 @Component({
   selector: 'fudis-dd',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item-term/description-list-item-term.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item-term/description-list-item-term.component.ts
index 4ff76617da..b0c1b5844d 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item-term/description-list-item-term.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item-term/description-list-item-term.component.ts
@@ -12,6 +12,16 @@ import { LanguageBadgeGroupComponent } from '../../../language-badge-group/langu
 
 /**
  * Displays the term (key) in a DescriptionListItemComponent.
+ *
+ * @example
+ *   ```html
+ *   <fudis-dl>
+ *     <fudis-dl-item>
+ *       <fudis-dt>Name</fudis-dt>
+ *       <fudis-dd>Jane Doe</fudis-dd>
+ *     </fudis-dl-item>
+ *   </fudis-dl>
+ *   ```;
  */
 @Component({
   selector: 'fudis-dt',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item.component.ts
index 98b35dbe6d..97bff7fca5 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list-item/description-list-item.component.ts
@@ -22,6 +22,16 @@ import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
  * Represents a single term-detail pair.
  *
  * Use this component to group related description list terms and details together.
+ *
+ * @example
+ *   ```html
+ *   <fudis-dl>
+ *     <fudis-dl-item>
+ *       <fudis-dt>Name</fudis-dt>
+ *       <fudis-dd>Jane Doe</fudis-dd>
+ *     </fudis-dl-item>
+ *   </fudis-dl>
+ *   ```;
  */
 @Component({
   selector: 'fudis-dl-item',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list.component.ts
index 928b100df9..9a2abacc46 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/description-list/description-list.component.ts
@@ -19,6 +19,16 @@ import { GridDirective } from '../../directives/grid/grid/grid.directive';
  * Displays a collection of term-details pairs of related information.
  *
  * Use this component to present structured information with proper semantic relationships.
+ *
+ * @example
+ *   ```html
+ *   <fudis-dl>
+ *     <fudis-dl-item>
+ *       <fudis-dt>Name</fudis-dt>
+ *       <fudis-dd>Jane Doe</fudis-dd>
+ *     </fudis-dl-item>
+ *   </fudis-dl>
+ *   ```;
  */
 @Component({
   selector: 'fudis-dl',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog-directives.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog-directives.ts
index 746b815ef4..146077be1b 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog-directives.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog-directives.ts
@@ -22,6 +22,13 @@ import { isButtonDisabled } from '../../utilities/dialog/dialog-utils';
  * Identifies the title of a dialog.
  *
  * Use this directive to provide automatically focused heading when opening a dialog.
+ *
+ * @example
+ *   ```html
+ *   <fudis-dialog>
+ *     <fudis-heading fudisDialogTitle [level]="2">Dialog title</fudis-heading>
+ *   </fudis-dialog>
+ *   ```;
  */
 @Directive({
   selector: '[fudisDialogTitle]',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.component.ts
index 7c0cce3a0e..8a840eb0ef 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.component.ts
@@ -32,6 +32,20 @@ import { AlertGroupComponent } from '../alert/alert-group/alert-group.component'
  *
  * Use this component for focused interactions that require user attention or confirmation before
  * continuing.
+ *
+ * @example
+ *   ```html
+ *   <fudis-dialog>
+ *     <fudis-heading fudisDialogTitle [level]="2">Confirm action</fudis-heading>
+ *     <fudis-dialog-content>
+ *       <fudis-body-text>Are you sure you want to delete this item?</fudis-body-text>
+ *     </fudis-dialog-content>
+ *     <fudis-dialog-actions>
+ *       <fudis-button fudisDialogClose [label]="'Cancel'"></fudis-button>
+ *       <fudis-button [label]="'Confirm'" (handleClick)="confirm()"></fudis-button>
+ *     </fudis-dialog-actions>
+ *   </fudis-dialog>
+ *   ```;
  */
 @Component({
   selector: 'fudis-dialog',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/dropdown-menu/dropdown-menu-group/dropdown-menu-group.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/dropdown-menu/dropdown-menu-group/dropdown-menu-group.component.ts
index 4c6c46f7dc..4226afe558 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/dropdown-menu/dropdown-menu-group/dropdown-menu-group.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/dropdown-menu/dropdown-menu-group/dropdown-menu-group.component.ts
@@ -6,6 +6,18 @@ import { DropdownMenuComponent } from '../dropdown-menu.component';
  * Groups related dropdown items.
  *
  * Use this component to organize related menu options to improve readability.
+ *
+ * @example
+ *   ```html
+ *   <fudis-icon-button [ariaLabel]="'Actions'" [icon]="'three-dots'" [asMenuButton]="true">
+ *     <fudis-dropdown-menu>
+ *       <fudis-dropdown-menu-group [label]="'File'">
+ *         <fudis-dropdown-menu-item [label]="'New'" (handleClick)="newFile()"></fudis-dropdown-menu-item>
+ *         <fudis-dropdown-menu-item [label]="'Open'" (handleClick)="openFile()"></fudis-dropdown-menu-item>
+ *       </fudis-dropdown-menu-group>
+ *     </fudis-dropdown-menu>
+ *   </fudis-icon-button>
+ *   ```;
  */
 @Component({
   selector: 'fudis-dropdown-menu-group',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/dropdown-menu/dropdown-menu-item/dropdown-menu-item.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/dropdown-menu/dropdown-menu-item/dropdown-menu-item.component.ts
index 11a63ce4a5..fac1530441 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/dropdown-menu/dropdown-menu-item/dropdown-menu-item.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/dropdown-menu/dropdown-menu-item/dropdown-menu-item.component.ts
@@ -21,6 +21,16 @@ import { AsyncPipe } from '@angular/common';
 
 /**
  * Single menu item for DropdownMenuComponent.
+ *
+ * @example
+ *   ```html
+ *   <fudis-icon-button [ariaLabel]="'Actions'" [icon]="'three-dots'" [asMenuButton]="true">
+ *     <fudis-dropdown-menu>
+ *       <fudis-dropdown-menu-item [label]="'Edit'" (handleClick)="edit()"></fudis-dropdown-menu-item>
+ *       <fudis-dropdown-menu-item [label]="'Delete'" (handleClick)="delete()"></fudis-dropdown-menu-item>
+ *     </fudis-dropdown-menu>
+ *   </fudis-icon-button>
+ *   ```;
  */
 @Component({
   selector: 'fudis-dropdown-menu-item',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/expandable/expandable-content.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/expandable/expandable-content.directive.ts
index c6a5a8c231..427b72500f 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/expandable/expandable-content.directive.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/expandable/expandable-content.directive.ts
@@ -4,6 +4,15 @@ import { Directive, HostBinding, TemplateRef } from '@angular/core';
  * Identifies the actions area of an expandable.
  *
  * Use this directive to position action buttons to a fixed place.
+ *
+ * @example
+ *   ```html
+ *   <fudis-expandable [title]="'Details'" [level]="3">
+ *     <fudis-expandable-actions>
+ *       <fudis-button [label]="'Edit'" (handleClick)="edit()"></fudis-button>
+ *     </fudis-expandable-actions>
+ *   </fudis-expandable>
+ *   ```;
  */
 @Directive({ selector: 'fudis-expandable-actions' })
 export class ExpandableActionsDirective {
@@ -14,6 +23,15 @@ export class ExpandableActionsDirective {
  * Identifies the main content area of an expandable.
  *
  * Use this directive for lazy loaded content.
+ *
+ * @example
+ *   ```html
+ *   <fudis-expandable [title]="'Details'" [level]="3">
+ *     <ng-template fudisExpandableContent>
+ *       <fudis-body-text>Lazy-loaded content goes here.</fudis-body-text>
+ *     </ng-template>
+ *   </fudis-expandable>
+ *   ```;
  */
 @Directive({ selector: '[fudisExpandableContent]' })
 export class ExpandableContentDirective {
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/expandable/expandable.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/expandable/expandable.component.ts
index 7f4e830a64..d166dfb593 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/expandable/expandable.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/expandable/expandable.component.ts
@@ -33,6 +33,15 @@ import { NgTemplateOutlet } from '@angular/common';
  * Toggles the visibility of additional content.
  *
  * Use this component to progressively disclose information without overwhelming the user.
+ *
+ * @example
+ *   ```html
+ *   <fudis-expandable [title]="'More details'" [level]="3">
+ *     <ng-template fudisExpandableContent>
+ *       <fudis-body-text>Additional content revealed on expand.</fudis-body-text>
+ *     </ng-template>
+ *   </fudis-expandable>
+ *   ```;
  */
 @Component({
   selector: 'fudis-expandable',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/footer/footer.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/footer/footer.component.ts
index cbf656f533..6efc5c5a46 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/footer/footer.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/footer/footer.component.ts
@@ -14,6 +14,11 @@ import { AsyncPipe } from '@angular/common';
  * Displays footer content for a page.
  *
  * Use this component with supplementary information such as links, legal content, or metadata.
+ *
+ * @example
+ *   ```html
+ *   <fudis-footer></fudis-footer>
+ *   ```;
  */
 @Component({
   selector: 'fudis-footer',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox-group-option/checkbox-group-option.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox-group-option/checkbox-group-option.component.ts
index 674500815b..7b2facf896 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox-group-option/checkbox-group-option.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox-group/checkbox-group-option/checkbox-group-option.component.ts
@@ -20,6 +20,13 @@ import { IconComponent } from '../../../icon/icon.component';
 
 /**
  * Single checkbox option for CheckboxGroupComponent.
+ *
+ * @example
+ *   ```html
+ *   <fudis-checkbox-group [label]="'Colors'" [formGroup]="colorsGroup">
+ *     <fudis-checkbox-group-option [controlName]="'red'" [label]="'Red'"></fudis-checkbox-group-option>
+ *   </fudis-checkbox-group>
+ *   ```;
  */
 @Component({
   selector: 'fudis-checkbox-group-option',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox/checkbox.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox/checkbox.component.ts
index 772d3393c8..fdda15afc9 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox/checkbox.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/checkbox/checkbox.component.ts
@@ -29,6 +29,11 @@ import { AsyncPipe } from '@angular/common';
  * Represents a single boolean form control.
  *
  * Use this component when user need to toggle an option on or off.
+ *
+ * @example
+ *   ```html
+ *   <fudis-checkbox [control]="acceptTermsControl" [label]="'I accept the terms'"></fudis-checkbox>
+ *   ```;
  */
 @Component({
   selector: 'fudis-checkbox',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/date/datepicker/datepicker.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/date/datepicker/datepicker.component.ts
index 282bb202ca..e65102b5f8 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/date/datepicker/datepicker.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/date/datepicker/datepicker.component.ts
@@ -48,6 +48,11 @@ import { AsyncPipe } from '@angular/common';
  * Allows selection of a single date.
  *
  * Use this component for date input with calendar assistance and validation.
+ *
+ * @example
+ *   ```html
+ *   <fudis-datepicker [label]="'Date of birth'" [control]="dateControl"></fudis-datepicker>
+ *   ```;
  */
 @Component({
   selector: 'fudis-datepicker',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/error-message/error-message/error-message.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/error-message/error-message/error-message.directive.ts
index 5fdae2ca6e..4d0ea771fe 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/error-message/error-message/error-message.directive.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/error-message/error-message/error-message.directive.ts
@@ -41,6 +41,13 @@ import {
  *
  * Use this directive to link custom validation error to an input where existing validators are not
  * possible to use.
+ *
+ * @example
+ *   ```html
+ *   <fudis-text-input [label]="'Email'" [control]="emailControl">
+ *     <fudis-error-message [message]="'Please enter a valid email address'"></fudis-error-message>
+ *   </fudis-text-input>
+ *   ```;
  */
 @Directive({ selector: 'fudis-error-message' })
 export class ErrorMessageDirective implements OnInit, OnChanges, OnDestroy {
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset-content.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset-content.directive.ts
index 25cde0d65e..b73ab25206 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset-content.directive.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset-content.directive.ts
@@ -5,6 +5,18 @@ import { FudisComponentChanges, fudisFieldsetActionsAlign } from '../../../types
  * Identifies the actions associated with a fieldset.
  *
  * Use this directive to add buttons that affect the fieldset as a whole.
+ *
+ * @example
+ *   ```html
+ *   <fudis-fieldset [label]="'Personal details'">
+ *     <fudis-fieldset-actions>
+ *       <fudis-button [label]="'Clear'" (handleClick)="clearForm()"></fudis-button>
+ *     </fudis-fieldset-actions>
+ *     <fudis-fieldset-content>
+ *       <fudis-text-input [label]="'Name'" [control]="nameControl"></fudis-text-input>
+ *     </fudis-fieldset-content>
+ *   </fudis-fieldset>
+ *   ```;
  */
 @Directive({ selector: 'fudis-fieldset-actions' })
 export class FieldsetActionsDirective implements OnChanges {
@@ -27,6 +39,15 @@ export class FieldsetActionsDirective implements OnChanges {
  * Identifies the main content area of a fieldset.
  *
  * Use this directive to group related form controls within a fieldset.
+ *
+ * @example
+ *   ```html
+ *   <fudis-fieldset [label]="'Personal details'">
+ *     <fudis-fieldset-content>
+ *       <fudis-text-input [label]="'Name'" [control]="nameControl"></fudis-text-input>
+ *     </fudis-fieldset-content>
+ *   </fudis-fieldset>
+ *   ```;
  */
 @Directive({ selector: 'fudis-fieldset-content' })
 export class FieldsetContentDirective {
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts
index 669a85b0fc..b16810c798 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/fieldset/fieldset.component.ts
@@ -28,6 +28,15 @@ import { BodyTextComponent } from '../../typography/body-text/body-text.componen
  * Groups related form controls under a common context.
  *
  * Use this component to improve form structure, clarity, and accessibility.
+ *
+ * @example
+ *   ```html
+ *   <fudis-fieldset [label]="'Personal details'">
+ *     <fudis-fieldset-content>
+ *       <fudis-text-input [label]="'Name'" [control]="nameControl"></fudis-text-input>
+ *     </fudis-fieldset-content>
+ *   </fudis-fieldset>
+ *   ```;
  */
 @Component({
   selector: 'fudis-fieldset',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form-content.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form-content.directive.ts
index 1e225c88d3..420dd37311 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form-content.directive.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form-content.directive.ts
@@ -4,6 +4,15 @@ import { Directive, HostBinding } from '@angular/core';
  * Identifies the actions area of a form.
  *
  * Use this directive to group submit or secondary form actions consistently.
+ *
+ * @example
+ *   ```html
+ *   <fudis-form [title]="'Login'" [level]="1">
+ *     <fudis-form-actions>
+ *       <fudis-button fudisFormSubmit [label]="'Submit'" [formValid]="form.valid"></fudis-button>
+ *     </fudis-form-actions>
+ *   </fudis-form>
+ *   ```;
  */
 @Directive({ selector: 'fudis-form-actions' })
 export class FormActionsDirective {
@@ -15,6 +24,15 @@ export class FormActionsDirective {
  *
  * Use this directive for additional information like intsructions for the form that should be
  * grouped with the actual form heading.
+ *
+ * @example
+ *   ```html
+ *   <fudis-form [title]="'Registration'" [level]="1">
+ *     <fudis-form-header>
+ *       <fudis-body-text>Please fill in all required fields.</fudis-body-text>
+ *     </fudis-form-header>
+ *   </fudis-form>
+ *   ```;
  */
 @Directive({ selector: 'fudis-form-header' })
 export class FormHeaderDirective {
@@ -25,6 +43,15 @@ export class FormHeaderDirective {
  * Identifies the main content area of a form.
  *
  * Use this directive for form fields.
+ *
+ * @example
+ *   ```html
+ *   <fudis-form [title]="'Profile'" [level]="1">
+ *     <fudis-form-content>
+ *       <fudis-text-input [label]="'Name'" [control]="nameControl"></fudis-text-input>
+ *     </fudis-form-content>
+ *   </fudis-form>
+ *   ```;
  */
 @Directive({ selector: 'fudis-form-content' })
 export class FormContentDirective {
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.ts
index 9180742023..079dc3943a 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/form/form.component.ts
@@ -40,6 +40,18 @@ import { ErrorSummaryComponent } from '../error-summary/error-summary.component'
  * fields inside `<fudis-form-content>` and buttons inside `<fudis-form-actions>`. Use
  * `fudisFormSubmit` directive on the submit button to trigger error summary. Use `FudisValidators`
  * (not Angular's Validators) for error messages to work with Error Summary.
+ *
+ * @example
+ *   ```html
+ *   <fudis-form [title]="'Login'" [level]="1">
+ *     <fudis-form-content>
+ *       <fudis-text-input [label]="'Username'" [control]="usernameControl"></fudis-text-input>
+ *     </fudis-form-content>
+ *     <fudis-form-actions>
+ *       <fudis-button fudisFormSubmit [label]="'Submit'" [formValid]="form.valid"></fudis-button>
+ *     </fudis-form-actions>
+ *   </fudis-form>
+ *   ```;
  */
 @Component({
   selector: 'fudis-form',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/localized-text-group/localized-text-group.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/localized-text-group/localized-text-group.component.ts
index 93988522b8..94893e835f 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/localized-text-group/localized-text-group.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/localized-text-group/localized-text-group.component.ts
@@ -34,6 +34,11 @@ import { AsyncPipe, KeyValuePipe } from '@angular/common';
  * Manages localized text inputs across multiple languages.
  *
  * Use this component to edit equivalent content for different language options.
+ *
+ * @example
+ *   ```html
+ *   <fudis-localized-text-group [label]="'Description'" [formGroup]="descriptionGroup"></fudis-localized-text-group>
+ *   ```;
  */
 @Component({
   selector: 'fudis-localized-text-group',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/radio-button-group/radio-button/radio-button.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/radio-button-group/radio-button/radio-button.component.ts
index b5b1dbc199..e7cee382a1 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/radio-button-group/radio-button/radio-button.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/radio-button-group/radio-button/radio-button.component.ts
@@ -15,6 +15,13 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 /**
  * Single radio button option for RadioButtonGroupComponent.
+ *
+ * @example
+ *   ```html
+ *   <fudis-radio-button-group [label]="'Color'" [control]="colorControl">
+ *     <fudis-radio-button [label]="'Red'" [value]="'red'"></fudis-radio-button>
+ *   </fudis-radio-button-group>
+ *   ```;
  */
 @Component({
   selector: 'fudis-radio-button',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/text-area/text-area.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/text-area/text-area.component.ts
index b8a8214332..10003260f5 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/text-area/text-area.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/text-area/text-area.component.ts
@@ -15,6 +15,11 @@ import { AsyncPipe } from '@angular/common';
  * Allows entry of multi-line text.
  *
  * Use this component for longer or free-form user input.
+ *
+ * @example
+ *   ```html
+ *   <fudis-text-area [label]="'Description'" [control]="descriptionControl"></fudis-text-area>
+ *   ```;
  */
 @Component({
   selector: 'fudis-text-area',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/text-input/text-input.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/text-input/text-input.component.ts
index 1245c34b41..8f835c1b67 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/form/text-input/text-input.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/form/text-input/text-input.component.ts
@@ -16,6 +16,11 @@ import { AsyncPipe } from '@angular/common';
  * Allows entry of single-line text.
  *
  * Use this component for short textual input such as names or identifiers.
+ *
+ * @example
+ *   ```html
+ *   <fudis-text-input [label]="'First name'" [control]="firstNameControl"></fudis-text-input>
+ *   ```;
  */
 @Component({
   selector: 'fudis-text-input',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid-item/grid-item.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid-item/grid-item.component.ts
index e2101daf4f..aa98a955f1 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid-item/grid-item.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid-item/grid-item.component.ts
@@ -5,6 +5,15 @@ import { GridItemDirective } from '../../../directives/grid/grid-item/grid-item.
  * Represents a single item within a grid layout.
  *
  * Use this component to define column span and placement inside a grid container.
+ *
+ * @example
+ *   ```html
+ *   <fudis-grid [columns]="3">
+ *     <fudis-grid-item [columns]="'1 / -1'">
+ *       <fudis-heading [level]="2">Full-width heading</fudis-heading>
+ *     </fudis-grid-item>
+ *   </fudis-grid>
+ *   ```;
  */
 @Component({
   selector: 'fudis-grid-item',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid/grid.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid/grid.component.ts
index f47074a4a0..0a80d5ea14 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid/grid.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/grid/grid/grid.component.ts
@@ -5,6 +5,14 @@ import { GridDirective } from '../../../directives/grid/grid/grid.directive';
  * Provides a responsive grid layout.
  *
  * Use this component to structure page or section layouts visually using columns.
+ *
+ * @example
+ *   ```html
+ *   <fudis-grid [columns]="3">
+ *     <fudis-text-input [label]="'First name'" [control]="firstNameControl"></fudis-text-input>
+ *     <fudis-text-input [label]="'Last name'" [control]="lastNameControl"></fudis-text-input>
+ *   </fudis-grid>
+ *   ```;
  */
 @Component({
   selector: 'fudis-grid',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/horizontal-rule/horizontal-rule.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/horizontal-rule/horizontal-rule.component.ts
index cc1964dca5..bf2c2f8bd0 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/horizontal-rule/horizontal-rule.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/horizontal-rule/horizontal-rule.component.ts
@@ -4,6 +4,11 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
  * Visually separates content sections.
  *
  * Use this component to visually indicate thematic breaks.
+ *
+ * @example
+ *   ```html
+ *   <fudis-hr></fudis-hr>
+ *   ```;
  */
 @Component({
   selector: 'fudis-hr',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/icon-button/icon-button.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/icon-button/icon-button.component.ts
index abc9a648e4..e2150099c4 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/icon-button/icon-button.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/icon-button/icon-button.component.ts
@@ -21,6 +21,11 @@ import { PopoverDirective } from '../../directives/popover/popover.directive';
  *
  * Use this component for compact actions where icon and its aria-label clearly communicate the
  * intent.
+ *
+ * @example
+ *   ```html
+ *   <fudis-icon-button [ariaLabel]="'Delete item'" [icon]="'trash'"></fudis-icon-button>
+ *   ```;
  */
 @Component({
   selector: 'fudis-icon-button',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/icon/icon.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/icon/icon.component.ts
index a5b1c25a42..7c45e1e382 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/icon/icon.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/icon/icon.component.ts
@@ -16,6 +16,11 @@ import { CommonModule } from '@angular/common';
  * Displays a decorative or semantic icon.
  *
  * Use this component to enhance recognition, meaning, or visual hierarchy.
+ *
+ * @example
+ *   ```html
+ *   <fudis-icon [icon]="'alert-circle'"></fudis-icon>
+ *   ```;
  */
 @Component({
   selector: 'fudis-icon',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge-group.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge-group.component.ts
index 215779e9a7..8d0e8715b4 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge-group.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/language-badge-group/language-badge-group.component.ts
@@ -22,6 +22,11 @@ type LanguageLabelArray = LanguageLabel[];
  * Displays a group of language indicators.
  *
  * Use this component to present available or active languages for content.
+ *
+ * @example
+ *   ```html
+ *   <fudis-language-badge-group [translatedLanguages]="['fi', 'sv', 'en']"></fudis-language-badge-group>
+ *   ```;
  */
 @Component({
   selector: 'fudis-language-badge-group',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.ts
index 9050148b5c..902814d142 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/loading-spinner/loading-spinner.component.ts
@@ -6,6 +6,11 @@ import { BodyTextComponent } from '../typography/body-text/body-text.component';
  * Indicates a loading or processing state.
  *
  * Use this component to inform users of ongoing activity or process.
+ *
+ * @example
+ *   ```html
+ *   <fudis-loading-spinner [label]="'Fetching data'"></fudis-loading-spinner>
+ *   ```;
  */
 @Component({
   selector: 'fudis-loading-spinner',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/notification/notification.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/notification/notification.component.ts
index 878b867e54..8dbf1c298d 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/notification/notification.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/notification/notification.component.ts
@@ -8,6 +8,13 @@ import { IconComponent } from '../icon/icon.component';
  * Displays an information message.
  *
  * Use this component to inform users about events, updates, or system feedback.
+ *
+ * @example
+ *   ```html
+ *   <fudis-notification [variant]="'info'">
+ *     <fudis-body-text>Your changes have been saved.</fudis-body-text>
+ *   </fudis-notification>
+ *   ```;
  */
 @Component({
   selector: 'fudis-notification',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/pagination/pagination.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/pagination/pagination.component.ts
index f49599ce23..e53f5b0681 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/pagination/pagination.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/pagination/pagination.component.ts
@@ -33,6 +33,16 @@ enum Ellipsis {
  * Controls navigation through paged data sets.
  *
  * Use this component to split large collections into manageable pages.
+ *
+ * @example
+ *   ```html
+ *   <fudis-pagination
+ *     [paginationAriaLabel]="'Search results'"
+ *     [pageCount]="10"
+ *     [pageIndex]="currentPage"
+ *     (pageChange)="onPageChange($event)">
+ *   </fudis-pagination>
+ *   ```;
  */
 @Component({
   selector: 'fudis-pagination',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section-content.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section-content.directive.ts
index c416b06a3f..6f8676d592 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section-content.directive.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section-content.directive.ts
@@ -4,6 +4,18 @@ import { Directive, HostBinding } from '@angular/core';
  * Identifies the actions area of a section.
  *
  * Use this directive to add buttons that affect the section as a whole.
+ *
+ * @example
+ *   ```html
+ *   <fudis-section [title]="'Users'" [level]="2">
+ *     <fudis-section-actions>
+ *       <fudis-button [label]="'Add user'" (handleClick)="addUser()"></fudis-button>
+ *     </fudis-section-actions>
+ *     <fudis-section-content>
+ *       <fudis-body-text>Section content goes here.</fudis-body-text>
+ *     </fudis-section-content>
+ *   </fudis-section>
+ *   ```;
  */
 @Directive({ selector: 'fudis-section-actions' })
 export class SectionActionsDirective {
@@ -14,6 +26,15 @@ export class SectionActionsDirective {
  * Identifies the main content area of a section.
  *
  * Use this directive to structure section content.
+ *
+ * @example
+ *   ```html
+ *   <fudis-section [title]="'Details'" [level]="2">
+ *     <fudis-section-content>
+ *       <fudis-body-text>Section content goes here.</fudis-body-text>
+ *     </fudis-section-content>
+ *   </fudis-section>
+ *   ```;
  */
 @Directive({ selector: 'fudis-section-content' })
 export class SectionContentDirective {
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts
index 3dc1345d86..1c78ed84ef 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/section/section.component.ts
@@ -27,6 +27,15 @@ import { AsyncPipe } from '@angular/common';
  * Defines a logical content section.
  *
  * Use this component to group related content and improve page structure.
+ *
+ * @example
+ *   ```html
+ *   <fudis-section [title]="'User information'" [level]="2">
+ *     <fudis-section-content>
+ *       <fudis-body-text>Section content goes here.</fudis-body-text>
+ *     </fudis-section-content>
+ *   </fudis-section>
+ *   ```;
  */
 @Component({
   selector: 'fudis-section',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/tab-navigation/tab-navigation-bar.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/tab-navigation/tab-navigation-bar.component.ts
index 20d4117253..ae7f72ba10 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/tab-navigation/tab-navigation-bar.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/tab-navigation/tab-navigation-bar.component.ts
@@ -18,6 +18,17 @@ import { IconComponent } from '../icon/icon.component';
  * Organizes content into selectable tabs.
  *
  * Use this component to switch between related views within the same context.
+ *
+ * @example
+ *   ```html
+ *   <fudis-tab-navigation-bar [id]="'tabs-1'" [panel]="tabPanel">
+ *     <button fudis-tab-navigation-tab [id]="'tab-1'" [active]="true">Overview</button>
+ *     <button fudis-tab-navigation-tab [id]="'tab-2'" [active]="false">Details</button>
+ *   </fudis-tab-navigation-bar>
+ *   <fudis-tab-navigation-panel [id]="'panel-1'" #tabPanel>
+ *     <fudis-body-text>Tab content goes here.</fudis-body-text>
+ *   </fudis-tab-navigation-panel>
+ *   ```;
  */
 @Component({
   selector: 'fudis-tab-navigation-bar',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/tab-navigation/tab-navigation-panel.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/tab-navigation/tab-navigation-panel.component.ts
index 9e4c12466f..12dbb32f5f 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/tab-navigation/tab-navigation-panel.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/tab-navigation/tab-navigation-panel.component.ts
@@ -2,6 +2,16 @@ import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@a
 
 /**
  * Navigation tab panel associated with the TabNavigationBarComponent.
+ *
+ * @example
+ *   ```html
+ *   <fudis-tab-navigation-bar [id]="'tabs-1'" [panel]="tabPanel">
+ *     <button fudis-tab-navigation-tab [id]="'tab-1'" [active]="true">Overview</button>
+ *   </fudis-tab-navigation-bar>
+ *   <fudis-tab-navigation-panel [id]="'panel-1'" #tabPanel>
+ *     <fudis-body-text>Tab panel content goes here.</fudis-body-text>
+ *   </fudis-tab-navigation-panel>
+ *   ```;
  */
 @Component({
   selector: 'fudis-tab-navigation-panel',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/tab-navigation/tab-navigation-tab.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/tab-navigation/tab-navigation-tab.component.ts
index 405a098123..b5b362d849 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/tab-navigation/tab-navigation-tab.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/tab-navigation/tab-navigation-tab.component.ts
@@ -11,6 +11,14 @@ import { TabNavigationBarComponent } from './tab-navigation-bar.component';
 
 /**
  * Button or a link inside a `fudis-tab-navigation-bar`.
+ *
+ * @example
+ *   ```html
+ *   <fudis-tab-navigation-bar [id]="'tabs-1'" [panel]="tabPanel">
+ *     <button fudis-tab-navigation-tab [id]="'tab-1'" [active]="true">Overview</button>
+ *     <button fudis-tab-navigation-tab [id]="'tab-2'" [active]="false">Details</button>
+ *   </fudis-tab-navigation-bar>
+ *   ```;
  */
 @Component({
   selector: '[fudis-tab-navigation-tab]',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.ts
index 5b8c187a2c..3156a76269 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/body-text/body-text.component.ts
@@ -19,6 +19,11 @@ import { BreadcrumbsItemComponent } from '../../breadcrumbs/breadcrumbs-item/bre
  *
  * Use this component to render paragraphs or informational text with consistent typography and
  * spacing. Use clear, simple, and inclusive language.
+ *
+ * @example
+ *   ```html
+ *   <fudis-body-text> Welcome to the application. </fudis-body-text>
+ *   ```;
  */
 @Component({
   selector: 'fudis-body-text',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts
index dc49e2f4f9..2ad6d5f13d 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/components/typography/heading/heading.component.ts
@@ -20,6 +20,11 @@ import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
  *
  * Use this component to structure content hierarchially and provide semantic information for all
  * users.
+ *
+ * @example
+ *   ```html
+ *   <fudis-heading [level]="2">Section heading</fudis-heading>
+ *   ```;
  */
 @Component({
   selector: 'fudis-heading',
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/directives/form/datepicker/datepicker.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/directives/form/datepicker/datepicker.directive.ts
index 6d8b00b7f2..9786656177 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/directives/form/datepicker/datepicker.directive.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/directives/form/datepicker/datepicker.directive.ts
@@ -6,6 +6,14 @@ import { DatepickerComponent } from '../../../components/form/date/datepicker/da
  *
  * Use this directive to associate the control with a date range and enable correct validation
  * behavior.
+ *
+ * @example
+ *   ```html
+ *   <fudis-date-range>
+ *     <fudis-datepicker fudisDateStart [label]="'Start date'" [control]="startControl"></fudis-datepicker>
+ *     <fudis-datepicker fudisDateEnd [label]="'End date'" [control]="endControl"></fudis-datepicker>
+ *   </fudis-date-range>
+ *   ```;
  */
 @Directive({ selector: '[fudisDateStart]' })
 export class DateStartDirective {
@@ -19,6 +27,14 @@ export class DateStartDirective {
  *
  * Use this directive to associate the control with a date range and enable correct validation
  * behavior.
+ *
+ * @example
+ *   ```html
+ *   <fudis-date-range>
+ *     <fudis-datepicker fudisDateStart [label]="'Start date'" [control]="startControl"></fudis-datepicker>
+ *     <fudis-datepicker fudisDateEnd [label]="'End date'" [control]="endControl"></fudis-datepicker>
+ *   </fudis-date-range>
+ *   ```;
  */
 @Directive({ selector: '[fudisDateEnd]' })
 export class DateEndDirective {
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid-item/grid-item.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid-item/grid-item.directive.ts
index 46f18c5867..9a07aa292a 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid-item/grid-item.directive.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid-item/grid-item.directive.ts
@@ -15,6 +15,15 @@ import { getBreakpointDataArray } from '../../../utilities/breakpoint/breakpoint
  * Applies grid item behavior within a grid container.
  *
  * Use this directive to control placement and span of child elements inside a grid container.
+ *
+ * @example
+ *   ```html
+ *   <div fudisGrid [columns]="3">
+ *     <div fudisGridItem [columns]="'1 / -1'">
+ *       <fudis-heading [level]="2">Full-width heading</fudis-heading>
+ *     </div>
+ *   </div>
+ *   ```;
  */
 @Directive({ selector: '[fudisGridItem]' })
 export class GridItemDirective implements OnInit, OnChanges {
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid/grid.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid/grid.directive.ts
index e9bac83a44..f5340d8e52 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid/grid.directive.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/directives/grid/grid/grid.directive.ts
@@ -25,6 +25,14 @@ import { FudisComponentChanges } from '../../../types/miscellaneous';
  * Applies grid layout behavior to a container element.
  *
  * Use this directive to define responsive columns.
+ *
+ * @example
+ *   ```html
+ *   <div fudisGrid [columns]="3">
+ *     <fudis-text-input [label]="'First name'" [control]="firstNameControl"></fudis-text-input>
+ *     <fudis-text-input [label]="'Last name'" [control]="lastNameControl"></fudis-text-input>
+ *   </div>
+ *   ```;
  */
 @Directive({ selector: '[fudisGrid]' })
 export class GridDirective extends GridApiDirective implements OnInit, OnChanges {
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/directives/link/link.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/directives/link/link.directive.ts
index d242896ddf..836e6a4c33 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/directives/link/link.directive.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/directives/link/link.directive.ts
@@ -23,6 +23,11 @@ import { IconComponent } from '../../components/icon/icon.component';
  * Adds link behavior to an element.
  *
  * Use this directive with anchor element and consider whether link is internal/external.
+ *
+ * @example
+ *   ```html
+ *   <a fudisLink [title]="'Go to homepage'" href="/"></a>
+ *   ```;
  */
 @Directive({ selector: '[fudisLink]' })
 export class LinkDirective implements OnInit, OnChanges, AfterViewInit {
diff --git a/ngx-fudis/projects/ngx-fudis/src/lib/directives/popover/popover.directive.ts b/ngx-fudis/projects/ngx-fudis/src/lib/directives/popover/popover.directive.ts
index 859e101d91..f59151575d 100644
--- a/ngx-fudis/projects/ngx-fudis/src/lib/directives/popover/popover.directive.ts
+++ b/ngx-fudis/projects/ngx-fudis/src/lib/directives/popover/popover.directive.ts
@@ -25,6 +25,15 @@ type PopoverPosition = {
  *
  * Use this directive to provide contextual information or tips without navigating away from the
  * current view. Keep popover content concise.
+ *
+ * @example
+ *   ```html
+ *   <fudis-button
+ *     fudisPopover
+ *     [popoverText]="'Helpful context about this action'"
+ *     [label]="'Info'">
+ *   </fudis-button>
+ *   ```;
  */
 @Directive({
   selector: '[fudisPopover]',