Add p-media-container class

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.8.1",
+  "version": "4.9.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

releases.yml

@@ -1,3 +1,9 @@
+- version: 4.9.0
+  features:
+    - component: Images
+      url: /docs/patterns/images#media-element-with-spacing
+      status: New
+      notes: We've introduced a way to add spacing above a media element.
 - version: 4.8.0
   features:
     - component: Themes

scss/_patterns_media-container.scss

@@ -0,0 +1,5 @@
+@mixin vf-p-media-container {
+  .p-media-container {
+    margin-top: $spv--small;
+  }
+}

scss/_vanilla.scss

@@ -27,6 +27,7 @@
 @import 'patterns_lists';
 @import 'patterns_logo-section';
 @import 'patterns_matrix';
+@import 'patterns_media-container';
 @import 'patterns_media-object';
 @import 'patterns_modal';
 @import 'patterns_muted-heading';
@@ -119,6 +120,7 @@
   @include vf-p-lists;
   @include vf-p-logo-section;
   @include vf-p-matrix;
+  @include vf-p-media-container;
   @include vf-p-media-object;
   @include vf-p-modal;
   @include vf-p-muted-heading;

scss/standalone/patterns_media-container.scss

@@ -0,0 +1,5 @@
+@import '../vanilla';
+@include vf-base;
+
+@include vf-p-rule;
+@include vf-p-media-container;

templates/docs/examples/patterns/image/spacing.html

@@ -0,0 +1,11 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Image / Spacing{% endblock %}
+
+{% block standalone_css %}base{% endblock %}
+
+{% block content %}
+<hr class="p-rule">
+<div class="p-media-container">
+  <img src="https://assets.ubuntu.com/v1/584903f3-iot-drone.png" alt="">
+</div>
+{% endblock %}

templates/docs/patterns/images.md

@@ -30,6 +30,14 @@ When an image needs a caption, it can be wrapped in a `<figure>` element, along
 View example of image with a caption
 </a></div>
 
+## Media element with spacing
+
+Adds spacing to the top of a media element. This is usually needed when image or video is placed below the horizontal rule component to avoid media touching the line.
+
+<div class="embedded-example"><a href="/docs/examples/patterns/image/spacing/" class="js-example">
+View example of media element with spacing
+</a></div>
+
 ## Import
 
 To import just this component into your project, copy the snippet below and include it in your main Sass file.