Make docs more consistent

docs/src/content/docs/elements/dialog.mdx

@@ -34,9 +34,6 @@ callback handler, so it can be handled from the native code: For example if ther
 a `cancel_clicked` callback will be added.
 Each of these automatically-generated callbacks is an alias for the `clicked` callback of the associated `StandardButton`.
 
-## Properties
-
-
 ### `icon`
 <SlintProperty propName="icon" typeName="image">  
 The window icon shown in the title bar or the task bar on window managers supporting it.

docs/src/content/docs/elements/flickable.mdx

@@ -55,7 +55,6 @@ interacting with `TouchArea` elements:
    a `TouchArea`, then `Flickable` will flick immediately on pointer move events when the euclidean distance
    to the coordinates of the press event exceeds 8 logical pixels.
 
-## Properties
 
 ### `interactive`
 <SlintProperty propName="icon" typeName="bool" defaultValue="true">

docs/src/content/docs/elements/gridlayout.mdx

@@ -8,7 +8,7 @@ import SlintProperty  from '../../../components/SlintProperty.astro';
 
 `GridLayout` covers its entire surface with cells. Cells are not aligned. The elements constituting the cells will be stretched inside their allocated space, unless their size constraints—like, e.g., `min-height` or `max-width`—work against this.
 
-## `spacing`
+## Spacing properties
 
 ### `spacing`
 <SlintProperty propName="spacing" typeName="length">
@@ -22,7 +22,7 @@ To target specific axis with different values use the following properties:
 ### `spacing-vertical`
 <SlintProperty propName="spacing-vertical" typeName="length"/>
 
-## `Padding`
+## Padding properties
 
 ### `padding`
 <SlintProperty propName="padding" typeName="length">

docs/src/content/docs/elements/image.mdx

@@ -70,7 +70,9 @@ Image {
 ### `rotation-origin-y`
 <SlintProperty propName="rotation-origin-y" typeName="length"/>
 
-## `source`
+## `source` properties
+
+### `source`
 <SlintProperty propName="source" typeName="image">
 
 The `image` type is a reference to an image. It's defined using the `@image-url("...")` construct.
@@ -96,7 +98,19 @@ export component Example inherits Window {
 }
 ```
 
-Use the [`@image-url("...")` macro](../language/syntax/types.md#images) to specify the location of the image.
+```slint title="nine-slice scaling"
+export component Example inherits Window {
+    width: 100px;
+    height: 150px;
+    VerticalLayout {
+        Image {
+            source: @image-url("https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png", nine-slice(30 30 30 30));
+        }
+    }
+}
+```
+
+Use the `@image-url("...")` macro to specify the location of the image.
 </SlintProperty>
 
 
@@ -109,19 +123,6 @@ Use the [`@image-url("...")` macro](../language/syntax/types.md#images) to speci
 ### `source-clip-height`  ** (_in_ _int_): Properties in source
 <SlintProperty propName="source-clip-height" typeName="int" defaultValue="source.height - source.clip-y"/>
 
-### `vertical-alignment`** (_in_ _enum [`ImageVerticalAlignment`](../language/builtins/enums.
+### `vertical-alignment`
 <SlintProperty propName="vertical-alignment" typeName="enum" enumName="ImageVerticalAlignment"/>
 
-## Example using nine-slice:
-
-```slint
-export component Example inherits Window {
-    width: 100px;
-    height: 150px;
-    VerticalLayout {
-        Image {
-            source: @image-url("https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png", nine-slice(30 30 30 30));
-        }
-    }
-}
-```

docs/src/content/docs/elements/path.mdx

@@ -50,7 +50,7 @@ If non-zero, the path will be scaled to fit into the specified width.
 If non-zero, the path will be scaled to fit into the specified height.
 </SlintProperty>
 
-## `Viewbox`
+## Viewbox properties
 
 ### `viewbox-x`
 <SlintProperty propName="viewbox-x" typeName="float"/>

docs/src/content/docs/elements/rectangle.mdx

@@ -0,0 +1,101 @@
+---
+title: Rectangle
+description: Rectangle element api.
+---
+import SlintProperty  from '../../../components/SlintProperty.astro';
+
+```slint
+export component Example inherits Window {
+    width: 270px;
+    height: 100px;
+
+    Rectangle {
+        x: 10px;
+        y: 10px;
+        width: 50px;
+        height: 50px;
+        background: blue;
+    }
+
+    // Rectangle with a border
+    Rectangle {
+        x: 70px;
+        y: 10px;
+        width: 50px;
+        height: 50px;
+        background: green;
+        border-width: 2px;
+        border-color: red;
+    }
+
+    // Transparent Rectangle with a border and a radius
+    Rectangle {
+        x: 140px;
+        y: 10px;
+        width: 50px;
+        height: 50px;
+        border-width: 4px;
+        border-color: black;
+        border-radius: 10px;
+    }
+
+    // A radius of width/2 makes it a circle
+    Rectangle {
+        x: 210px;
+        y: 10px;
+        width: 50px;
+        height: 50px;
+        background: yellow;
+        border-width: 2px;
+        border-color: blue;
+        border-radius: self.width/2;
+    }
+}
+```
+
+By default, a `Rectangle` is just an empty item that shows nothing. By setting a color or configuring a border,
+it's then possible to draw a rectangle on the screen.
+
+When not part of a layout, its width and height default to 100% of the parent element.
+
+### `background`
+<SlintProperty propName="background" typeName="brush" defaultValue="transparent">
+The background brush of this `Rectangle`, typically a color.
+</SlintProperty>
+
+### `border-color`
+<SlintProperty propName="border-color" typeName="brush" defaultValue="transparent">
+The color of the border.
+</SlintProperty>
+
+### `border-width`
+<SlintProperty propName="border-width" typeName="length" defaultValue="0">
+The width of the border.
+</SlintProperty>
+
+### `clip`
+<SlintProperty propName="clip" typeName="bool" defaultValue="false">
+By default, when an element is bigger or outside another element, it's still shown. When this property is set to `true`, the children of this `Rectangle` are clipped to the border of the rectangle.
+</SlintProperty>
+
+
+## Border Radius properties
+
+### `border-radius`
+<SlintProperty propName="border-radius" typeName="length" defaultValue="0">
+The size of the radius. This single value is applied to all four corners.
+</SlintProperty>
+
+To target specific corners with different values use the following properties:
+
+### `border-top-left-radius`
+<SlintProperty propName="border-top-left-radius" typeName="length"/>
+
+### `border-top-right-radius`
+<SlintProperty propName="border-top-right-radius" typeName="length"/>
+
+### `border-bottom-left-radius`
+<SlintProperty propName="border-bottom-left-radius" typeName="length"/>
+
+### `border-bottom-right-radius`
+

docs/src/content/docs/elements/text.mdx

@@ -33,8 +33,6 @@ be expand in a single line. If the `wrap` property is set along with
 a `width` and `height`, the text will be wrapped into multiple lines
 of text.
 
-## Properties
-
 ### `color`
 <SlintProperty propName="color" typeName="brush" defaultValue="<depends on theme>"> 
 The color of the text.