google · chalin · Aug 7, 2024 · Jun 6, 2023 · Jun 6, 2023 · Jun 6, 2023
diff --git a/userguide/content/en/docs/adding-content/lookandfeel.md b/userguide/content/en/docs/adding-content/lookandfeel.md
@@ -527,4 +527,48 @@ which is used by all the other page templates:
 </html>
 ```
 
+## Adding custom class to the body element
+
+By default, Docsy adds the `td-{{ .Kind }}` class, where the kind is the kind of
+the page, like section, blog, and so on. For example:
+
+<!-- prettier-ignore -->
+```html
+<body class="td-section">
+```
+
+Sometimes it's useful to assign custom classes to a page, or to an entire
+section, for example, to apply custom styling. To do so, add the `body_class`
+parameter to the frontmatter of your page. The value of the parameter will then
+be added to the class attribute of your page's body element.
+
+To add the classes `myclass` and `anotherclass`, add the following line to the
+frontmatter of the page:
+
+<!-- prettier-ignore -->
+{{< tabpane persistLang=false >}}
+{{< tab header="Configuration file:" disabled=true />}}
+{{< tab header="hugo.toml" lang="toml" >}}
+body_class = "myclass anotherclass"
+{{< /tab >}}
+{{< tab header="hugo.yaml" lang="yaml" >}}
+body_class : myclass anotherclass
+{{< /tab >}}
+{{< tab header="hugo.json" lang="json" >}}
+"body_class" : "myclass anotherclass"
+{{< /tab >}}
+{{< /tabpane >}}
+
+The page's opening body tag will look like this (assuming it is a section page):
+
+<!-- prettier-ignore -->
+```html
+<body class="td-section myclass anotherclass">
+```
+
+To apply the custom class to every page of a section or a directory, use the
+[Front Matter Cascade](https://gohugo.io/content-management/front-matter/#front-matter-cascade)
+feature of Hugo in your configuration file, or in the frontmatter of the
+highest-level page you want to modify.
+
 [bs-docs]: https://getbootstrap.com/docs/