diff --git a/.changeset/cyan-lies-arrive.md b/.changeset/cyan-lies-arrive.md new file mode 100644 index 000000000..b82525ffa --- /dev/null +++ b/.changeset/cyan-lies-arrive.md @@ -0,0 +1,5 @@ +--- +"@cloudfour/patterns": minor +--- + +Add `o-container__pad` class diff --git a/src/objects/container/container.scss b/src/objects/container/container.scss index 6d40f2efe..d21afd15c 100644 --- a/src/objects/container/container.scss +++ b/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. diff --git a/src/objects/container/container.stories.mdx b/src/objects/container/container.stories.mdx index 1669f7155..fa42e08a0 100644 --- a/src/objects/container/container.stories.mdx +++ b/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. diff --git a/src/objects/container/demo/fill.twig b/src/objects/container/demo/fill.twig index 9f65a150e..709945a79 100644 --- a/src/objects/container/demo/fill.twig +++ b/src/objects/container/demo/fill.twig @@ -12,6 +12,14 @@
.c-card.c-card--contained
{% endblock %} {% endembed %} +This card gains the default container padding:
+ {% embed '@cloudfour/components/card/card.twig' with { + class: 'c-card--contained o-container__pad' + } only %} + {% block content %} +.c-card.c-card--contained.o-container__pad
+ {% endblock %} + {% endembed %}This card attempts to fill the container, padding included:
{% embed '@cloudfour/components/card/card.twig' with { class: 'c-card--contained o-container__fill'