diff --git a/articles/components/details/index.adoc b/articles/components/details/index.adoc
index 6f7afce7e0..48dac4d7c1 100644
--- a/articles/components/details/index.adoc
+++ b/articles/components/details/index.adoc
@@ -111,101 +111,6 @@ endif::[]
 --
 
 
-
-== Theme Variants
-
-Details has three theme variants: `filled`, `small`, and `reverse`. These variants can be combined with each other. For example, all three theme variants can be applied to the same Details component.
-
-
-=== Filled
-
-The `filled` theme variant makes the component's boundaries visible, which helps tie its content together visually and distinguishes it from the surrounding UI.
-
-[.example]
---
-ifdef::lit[]
-[source,typescript]
-----
-include::{root}/frontend/demo/component/details/details-filled.ts[render,tags=snippet,indent=0,group=Lit]
-----
-endif::[]
-
-ifdef::flow[]
-[source,java]
-----
-include::{root}/src/main/java/com/vaadin/demo/component/details/DetailsFilled.java[render,tags=snippet,indent=0,group=Flow]
-----
-endif::[]
-
-ifdef::react[]
-[source,tsx]
-----
-include::{root}/frontend/demo/component/details/react/details-filled.tsx[render,tags=snippet,indent=0,group=React]
-----
-endif::[]
---
-
-
-=== Small
-
-Use the `small` theme variant for compact UIs.
-
-[.example]
---
-ifdef::lit[]
-[source,typescript]
-----
-include::{root}/frontend/demo/component/details/details-small.ts[render,tags=snippet,indent=0,group=Lit]
-----
-endif::[]
-
-ifdef::flow[]
-[source,java]
-----
-include::{root}/src/main/java/com/vaadin/demo/component/details/DetailsSmall.java[render,tags=snippet,indent=0,group=Flow]
-----
-endif::[]
-
-ifdef::react[]
-[source,tsx]
-----
-include::{root}/frontend/demo/component/details/react/details-small.tsx[render,tags=snippet,indent=0,group=React]
-----
-endif::[]
---
-
-
-=== Reverse
-
-The reverse theme variant places the toggle icon after the summary contents, which can be useful for visually aligning the summary with other content.
-
-[.example]
---
-
-ifdef::lit[]
-[source,typescript]
-----
-include::{root}/frontend/demo/component/details/details-reverse.ts[render,tags=snippet,indent=0,group=Lit]
-----
-endif::[]
-
-ifdef::flow[]
-[source,java]
-----
-include::{root}/src/main/java/com/vaadin/demo/component/details/DetailsReverse.java[render,tags=snippet,indent=0,group=Flow]
-----
-endif::[]
-
-
-ifdef::react[]
-[source,tsx]
-----
-include::{root}/frontend/demo/component/details/react/details-reverse.tsx[render,tags=snippet,indent=0,group=React]
-----
-endif::[]
---
-
-
 === Disabling
 
 Details can be disabled to prevent them from being expanded or collapsed. Components inside a disabled expanded Details are automatically disabled as well.
diff --git a/articles/components/details/styling.adoc b/articles/components/details/styling.adoc
index 4cc1cb6d95..243d772714 100644
--- a/articles/components/details/styling.adoc
+++ b/articles/components/details/styling.adoc
@@ -7,6 +7,159 @@ order: 50
 ---
 = Details Styling
 
+== Style Variants
+
+The following style variants are supported by Details:
+
+[cols="1,3,1"]
+|===
+| Variant | Description | Supported by
+
+|`filled`
+|Makes the component’s boundaries visible
+|Aura, Lumo
+
+|`no-padding`
+|Removes the padding from the content area
+|Aura
+
+|`small`
+|Used for compact UIs
+|Lumo
+
+|`reverse`
+|Places the toggle icon after the summary contents
+|Aura, Lumo
+
+|===
+
+=== Filled
+
+The `filled` variant makes the component's boundaries visible, which helps tie its content together visually and distinguishes it from the surrounding UI.
+
+[.example]
+--
+ifdef::lit[]
+[source,typescript]
+----
+include::{root}/frontend/demo/component/details/details-filled.ts[render,tags=snippet,indent=0,group=Lit]
+----
+endif::[]
+
+ifdef::flow[]
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/details/DetailsFilled.java[render,tags=snippet,indent=0,group=Flow]
+----
+endif::[]
+
+ifdef::react[]
+[source,tsx]
+----
+include::{root}/frontend/demo/component/details/react/details-filled.tsx[render,tags=snippet,indent=0,group=React]
+----
+endif::[]
+
+--
+
+=== Small
+
+Use the `small` variant for compact UIs.
+
+[.example]
+--
+ifdef::lit[]
+[source,typescript]
+----
+include::{root}/frontend/demo/component/details/details-small.ts[render,tags=snippet,indent=0,group=Lit]
+----
+endif::[]
+
+ifdef::flow[]
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/details/DetailsSmall.java[render,tags=snippet,indent=0,group=Flow]
+----
+endif::[]
+
+ifdef::react[]
+[source,tsx]
+----
+include::{root}/frontend/demo/component/details/react/details-small.tsx[render,tags=snippet,indent=0,group=React]
+----
+endif::[]
+
+--
+
+=== Reverse
+
+The `reverse` variant places the toggle icon after the summary contents, which can be useful for visually aligning the summary with other content.
+
+[.example]
+--
+
+ifdef::lit[]
+[source,typescript]
+----
+include::{root}/frontend/demo/component/details/details-reverse.ts[render,tags=snippet,indent=0,group=Lit]
+----
+endif::[]
+
+ifdef::flow[]
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/details/DetailsReverse.java[render,tags=snippet,indent=0,group=Flow]
+----
+endif::[]
+
+
+ifdef::react[]
+[source,tsx]
+----
+include::{root}/frontend/demo/component/details/react/details-reverse.tsx[render,tags=snippet,indent=0,group=React]
+----
+endif::[]
+
+--
+
+include::../_styling-section-theming-props.adoc[tag=style-properties]
+
+[cols="2,1"]
+|===
+| Property | Supported by
+
+|`--vaadin-details-summary-background`
+|Aura
+
+|`--vaadin-details-summary-border-color`
+|Aura
+
+|`--vaadin-details-summary-border-radius`
+|Aura
+
+|`--vaadin-details-summary-border-width`
+|Aura
+
+|`--vaadin-details-summary-font-size`
+|Aura
+
+|`--vaadin-details-summary-font-weight`
+|Aura
+
+|`--vaadin-details-summary-gap`
+|Aura
+
+|`--vaadin-details-summary-height`
+|Aura
+
+|`--vaadin-details-summary-padding`
+|Aura
+
+|`--vaadin-details-summary-text-color`
+|Aura
+
+|===
+
 include::../_styling-section-intros.adoc[tag=selectors]