diff --git a/source/components/state/log.mjs b/source/components/state/log.mjs
index 9a4a408749a54cce55373071552d1cdf71746e06..edfb98dbb5aa40b419837b44625b73a1e5a83ab0 100644
--- a/source/components/state/log.mjs
+++ b/source/components/state/log.mjs
@@ -81,6 +81,8 @@ class Log extends CustomElement {
      * @property {string} templates.main Main template
      * @property {Object} labels Labels
      * @property {string} labels.nothingToReport Label for empty state
+     * @property {Object} classes Classes
+     * @property {string} classes.direction Direction of the log: ascending or descending
      * @property {number} updateFrequency Update frequency in milliseconds for the timestamp
      */
     get defaults() {
@@ -93,8 +95,8 @@ class Log extends CustomElement {
                 nothingToReport: "There is nothing to report yet.",
             },
 
-            classes: {
-                direction: "vertical",
+            features: {
+                direction: "ascending",
             },
 
             updateFrequency: 10000,
@@ -123,8 +125,7 @@ class Log extends CustomElement {
      * @return {Log}
      */
     clear() {
-        this[logElementSymbol].innerHTML = "";
-        this[emptyStateElementSymbol].style.display = "block";
+        this[logElementSymbol].setOption("entries", []);
         return this;
     }
 
@@ -141,7 +142,11 @@ class Log extends CustomElement {
         }
 
         const entries = this.getOption("entries");
-        entries.push(entry);
+        if (this.getOption("features.direction") === "ascending") {
+            entries.unshift(entry);
+        } else {
+            entries.push(entry);
+        }
 
         /** this field is not used, but triggers a change event */
         this.setOption("length", entries.length - 1);
diff --git a/source/components/state/state.mjs b/source/components/state/state.mjs
index 199fdd0b3bdda51e0f7576d829189ea092727efc..657b91f12ce37ccb376c62e3dccdcf38be3fb85a 100644
--- a/source/components/state/state.mjs
+++ b/source/components/state/state.mjs
@@ -25,7 +25,7 @@ export { State };
 /**
  * A state component
  *
- * @fragments /fragments/components/state/state/
+ * @fragments /fragments/components/state/state
  *
  * @example /examples/components/state/state-simple
  *