diff --git a/docs/concepts/html.md b/docs/concepts/html.md
index f60a730f812..e893173a047 100644
--- a/docs/concepts/html.md
+++ b/docs/concepts/html.md
@@ -1,5 +1,5 @@
---
-title: html!
+title: HTML
sidebar_label: Introduction
description: The procedural macro for generating HTML and SVG
---
diff --git a/docs/concepts/html/classes.md b/docs/concepts/html/classes.md
new file mode 100644
index 00000000000..2d8f2f05199
--- /dev/null
+++ b/docs/concepts/html/classes.md
@@ -0,0 +1,122 @@
+---
+title: Classes
+description: A handy macro to handle classes
+---
+
+## Classes
+
+The struct `Classes` can be used to deal with HTML classes.
+
+When pushing a string to the set, `Classes` ensures that there is one element
+for every class even if a single string might contain multiple classes.
+
+`Classes` can also be merged by using `Extend` (i.e.
+`classes1.extend(classes2)`) or `push()` (i.e. `classes1.push(classes2)`). In
+fact, anything that implements `Into` can be used to push new classes
+to the set.
+
+The macro `classes!` is a convenient macro that creates one single `Classes`.
+Its input accepts a comma separated list of expressions. The only requirement
+is that every expression implements `Into`.
+
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+let my_classes = String::from("class-1 class-2");
+
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+html! {
+
+}
+```
+
+
+
+```rust
+let my_classes = ["class-1", "class-2"];
+
+html! {
+
+}
+```
+
+
+
+## Components that accept classes
+
+```rust
+use boolinator::Boolinator;
+
+#[derive(Clone, Properties)]
+struct Props {
+ #[prop_or_default]
+ class: Classes,
+ fill: bool,
+ children: Children,
+}
+
+struct MyComponent {
+ props: Props,
+}
+
+impl Component for MyComponent {
+ type Properties = Props;
+
+ // ...
+
+ fn view(&self) -> Html {
+ let Props {
+ class,
+ fill,
+ children,
+ } = &self.props;
+ html! {
+
+ { children.clone() }
+
+ }
+ }
+}
+```
+
+The example makes use of the [boolinator](https://crates.io/crates/boolinator)
+crate to conditionally add the "my-fill-class" class based on the `fill`
+boolean attribute.
diff --git a/docs/concepts/html/elements.md b/docs/concepts/html/elements.md
index b0e58be3035..dba75480f91 100644
--- a/docs/concepts/html/elements.md
+++ b/docs/concepts/html/elements.md
@@ -35,53 +35,6 @@ html! {
If the attribute is set to `None`, the attribute won't be set in the DOM.
-## Classes
-
-There are a number of convenient ways to specify classes for an element:
-
-
-
-
-```rust
-html! {
-
-}
-```
-
-
-
-```rust
-html! {
-
-}
-```
-
-
-
-```rust
-html! {
-
-}
-```
-
-
-
-```rust
-html! {
-
-}
-```
-
-
-
-```rust
-html! {
-
-}
-```
-
-
-
## Listeners
Listener attributes need to be passed a `Callback` which is a wrapper around a closure. How you create your callback depends on how you wish your app to react to a listener event:
diff --git a/examples/crm/src/add_client.rs b/examples/crm/src/add_client.rs
index fcd55671edf..ed2683092cf 100644
--- a/examples/crm/src/add_client.rs
+++ b/examples/crm/src/add_client.rs
@@ -1,5 +1,7 @@
use crate::Client;
-use yew::{html, Callback, Component, ComponentLink, Html, InputData, Properties, ShouldRender};
+use yew::{
+ classes, html, Callback, Component, ComponentLink, Html, InputData, Properties, ShouldRender,
+};
#[derive(Debug)]
pub enum Msg {
@@ -74,19 +76,19 @@ impl Component for AddClientForm {
<>