Add class references to image docs

scss/_patterns_image.scss

@@ -1,3 +1,32 @@
+/*
+  @classreference
+  image-container:
+    Image container:
+      .p-image-container:
+        Main element of the image component.
+      "&.is-highlighted":
+        Highlighted variant, to be used to highlight contents.
+      .p-image-container--16-9:
+        Wraps contents in a container with an aspect ratio of 16:9.
+      .p-image-container--3-2:
+        Wraps contents in a container with an aspect ratio of 3:2.
+      .p-image-container--2-3:
+        Wraps contents in a container with an aspect ratio of 2:3.
+      .p-image-container--cinematic:
+        Wraps contents in a container with an aspect ratio of 2.4:1.
+      .p-image-container--square:
+        Wraps contents in a container with an aspect ratio of 1:1.
+    Image:
+      .p-image-container__image:
+        Image element within an image container.
+    Bordered (deprecated):
+      .p-image--bordered:
+        Adds a border around the image.
+    Shadowed (deprecated):
+      .p-image--shadowed:
+        Adds a shadow around the image.
+*/
+
 @import 'settings';
 
 @mixin vf-p-image {

templates/docs/patterns/images.md

@@ -23,13 +23,7 @@ This is useful for aligning images or other content with mismatching aspect rati
 All image containers center the `.p-image-container__image` element inside them by default.
 If you need to change image alignment within the image container, use the [image position utility](/docs/utilities/image-position).
 
-| CSS Class                      | Aspect ratio |
-| ------------------------------ | ------------ |
-| `p-image-container--16-9`      | 16:9         |
-| `p-image-container--3-2`       | 3:2          |
-| `p-image-container--2-3`       | 2:3          |
-| `p-image-container--cinematic` | 2.4:1        |
-| `p-image-container--square`    | 1:1          |
+See the [class references section](#class-reference) for more information on the available aspect ratio classes.
 
 <div class="embedded-example"><a href="/docs/examples/patterns/image/container/aspect-ratio/16-9" class="js-example">
 View example of image container with 16/9 aspect ratio
@@ -81,6 +75,10 @@ Adds spacing to the top of a media element. This is usually needed when image or
 View example of media element with spacing
 </a></div>
 
+## Class reference
+
+{{ class_reference("image-container") }}
+
 ## Import
 
 To import just this component into your project, copy the snippet below and include it in your main Sass file.