diff --git a/docs/src/content/docs/guides/prop-access.md b/docs/src/content/docs/guides/prop-access.mdx
similarity index 72%
rename from docs/src/content/docs/guides/prop-access.md
rename to docs/src/content/docs/guides/prop-access.mdx
index cee5adb..70fb22d 100644
--- a/docs/src/content/docs/guides/prop-access.md
+++ b/docs/src/content/docs/guides/prop-access.mdx
@@ -3,6 +3,8 @@ title: Prop Access
 slug: prop-access
 ---
 
+import { Aside } from '@astrojs/starlight/components'
+
 The `props` property of the `WebComponent` interface is provided for easy read/write access to a camelCase counterpart of _any_ observed attribute.
 
 ```js
@@ -32,9 +34,11 @@ this.setAttribute('my-name','hello');
 
 Therefore, this will tell the browser that the UI needs a render if the attribute is one of the component's observed attributes we explicitly provided with `static props`;
 
-> [!NOTE]
-> The `props` property of `WebComponent` works like `HTMLElement.dataset`, except `dataset` is only for attributes prefixed with `data-`. A camelCase counterpart using `props` will give read/write access to any attribute, with or without the `data-` prefix.
-> Another advantage over `HTMLElement.dataset` is that `WebComponent.props` can hold primitive types 'number', 'boolean', 'object' and 'string'.
+<Aside type="note">
+The `props` property of `WebComponent` works like `HTMLElement.dataset`, except `dataset` is only for attributes prefixed with `data-`. A camelCase counterpart using `props` will give read/write access to any attribute, with or without the `data-` prefix.
+
+Another advantage over `HTMLElement.dataset` is that `WebComponent.props` can hold primitive types 'number', 'boolean', 'object' and 'string'.
+</Aside>
 
 ### Alternatives