Add o-container__pad class

.changeset/cyan-lies-arrive.md

@@ -0,0 +1,5 @@
+---
+"@cloudfour/patterns": minor
+---
+
+Add `o-container__pad` class

src/objects/container/container.scss

@@ -40,6 +40,17 @@
   }
 }
 
+/**
+ * Child elements that need a bit of inline padding to avoid the viewport edge.
+ */
+
+.o-container__pad {
+  .o-container--pad &,
+  .o-container--pad-inline & {
+    @include spacing.fluid-padding-inline;
+  }
+}
+
 /**
  * Child elements intended to "fill" the container width. This negates any
  * inline padding and border radii.

src/objects/container/container.stories.mdx

@@ -136,6 +136,7 @@ There are times when a child element should attempt to fill the container conten
 
 Two child element classes exist for this purpose:
 
+- `o-container__pad`: Adds the standard container padding to a child element.
 - `o-container__fill`: Negates any inline padding so the element will reach the edges of the content container's padding.
 - `o-container__fill-pad`: Also applies padding to the element so its content will align with that of the container.
 

src/objects/container/demo/fill.twig

@@ -12,6 +12,14 @@
             <p>.c-card.c-card--contained</p>
           {% endblock %}
         {% endembed %}
+        <p>This card gains the default container padding:</p>
+        {% embed '@cloudfour/components/card/card.twig' with {
+          class: 'c-card--contained o-container__pad'
+        } only %}
+          {% block content %}
+            <p>.c-card.c-card--contained.o-container__pad</p>
+          {% endblock %}
+        {% endembed %}
         <p>This card attempts to fill the container, padding included:</p>
         {% embed '@cloudfour/components/card/card.twig' with {
           class: 'c-card--contained o-container__fill'