diff --git a/content/components/carousel.md b/content/components/carousel.md
index 3b34e7b..f16659e 100644
--- a/content/components/carousel.md
+++ b/content/components/carousel.md
@@ -28,6 +28,24 @@ Set the `ratio` to `1x1` for a square aspect ratio.
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+### 3x1 ratio
+
+{{< release version="v2.0.0" >}}
+
+Set the `ratio` to `3x1` for a landscape aspect ratio.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* carousel id="carousel-3x1" ratio="3x1" class="col-sm-12 col-lg-8 mx-auto" */>}}
+  {{</* img src="img/placeholder.png" caption="slide 1" */>}}
+  {{</* img src="img/placeholder.png" caption="slide 2" */>}}
+  {{</* img src="img/placeholder.png" caption="slide 3" */>}}
+{{</* /carousel */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
+### 3x2 ratio
+
 Set the `ratio` to `3x2` for a landscape aspect ratio.
 
 <!-- markdownlint-disable MD037 -->
diff --git a/content/components/image.md b/content/components/image.md
index 5e8e82e..b99b1a5 100644
--- a/content/components/image.md
+++ b/content/components/image.md
@@ -26,6 +26,16 @@ Set the `ratio` to `1x1` for a square aspect ratio.
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+Set the `ratio` to `3x1` for a landscape aspect ratio.
+
+{{< release version="v2.0.0" >}}
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+{{</* image src="img/placeholder.png" ratio="3x1" wrapper="col-6 mx-auto" */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 Set the `ratio` to `3x2` for a landscape aspect ratio.
 
 <!-- markdownlint-disable MD037 -->