diff --git a/src/components/card/Card.stories.js b/src/components/card/Card.stories.js
index 9789ecacf8..ab003d308f 100644
--- a/src/components/card/Card.stories.js
+++ b/src/components/card/Card.stories.js
@@ -176,6 +176,35 @@ export default {
category: 'Container',
},
},
+ grid_type: {
+ name: 'Grid',
+ options: [
+ 'onecol',
+ 'onecol__narrow',
+ 'twocol--50-50',
+ 'threecol--33-34-33',
+ 'fourcol--25',
+ ],
+ control: {
+ type: 'select',
+ labels: {
+ 'onecol': 'One column',
+ 'onecol__narrow': 'One column (narrow)',
+ 'twocol--50-50': 'Two columns',
+ 'threecol--33-34-33': 'Three columns',
+ 'fourcol--25': 'Four columns',
+ }
+ },
+ table: {
+ category: 'Container',
+ },
+ },
+ record_count: {
+ name: '# of records',
+ table: {
+ category: 'Container',
+ },
+ }
},
};
@@ -346,8 +375,8 @@ const GridTemplate = (args) => ({
// And then the `args` are bound to your component with `v-bind="args"`
template: `
-
-
+
+
({
`,
})
-export const Grid3Columns = GridTemplate.bind({})
-Grid3Columns.args = {
+export const Grid = GridTemplate.bind({})
+Grid.args = {
...Default.args,
- type: 'threecol--33-34-33',
- records: 3,
+ grid_type: 'threecol--33-34-33',
+ record_count: 3,
}
diff --git a/src/scss/components/card.scss b/src/scss/components/card.scss
index baa99125b7..d03f7438f8 100755
--- a/src/scss/components/card.scss
+++ b/src/scss/components/card.scss
@@ -2,6 +2,20 @@
@import '../abstracts/utilities';
@import 'border';
+
+@mixin container-query() {
+ @supports (contain: inline-size) {
+ @container column (min-width: #{$break-xxsm}) {
+ @content
+ }
+ }
+ @supports not (contain: inline-size) {
+ @include breakpoint(sm) {
+ @content
+ }
+ }
+}
+
// === Card === //
.card {
position: relative;
@@ -96,7 +110,7 @@
> .media {
margin-top: 0;
text-align: center;
- min-width: 9.375rem;
+ min-width: 7.7rem;
img {
width: 100%;
@@ -228,7 +242,7 @@
&.card--layout-left {
.media__inner {
- @include breakpoint(sm) {
+ @include container-query() {
margin-right: 2rem;
}
}
@@ -236,7 +250,7 @@
&.card--layout-right {
.media__inner {
- @include breakpoint(sm) {
+ @include container-query() {
margin-left: 2rem;
}
}
@@ -285,10 +299,7 @@
// === Layout left and layout right shared === //
.card--layout-left,
.card--layout-right {
- .media__inner {
-
- }
- @include breakpoint(sm) {
+ @include container-query() {
display: flex;
flex-direction: row;
width: 100%;
@@ -310,21 +321,23 @@
}
.media--small.media--square {
- @include breakpoint(sm) {
+ @include container-query() {
max-width: 11.375rem;
}
}
.media--small.media--widescreen {
- @include breakpoint(sm) {
+ @include container-query() {
max-width: 15.625rem;
}
}
.media--medium {
&.media--circle {
- @include breakpoint(sm) {
- max-width: none;
+ @supports not (contain: inline-size) {
+ @include breakpoint(sm) {
+ max-width: none;
+ }
}
}
@include breakpoint(sm) {
@@ -342,11 +355,11 @@
// === Layout left === //
.card--layout-left {
- @include breakpoint(sm) {
+ @include container-query() {
flex-direction: row;
.media__inner,
- // Add margin back in for media--circle since we removed it before.
+ // Add margin back in for media--circle since we removed it before.
.media--circle .media__inner {
margin-right: 2rem;
}
@@ -356,11 +369,10 @@
// === Layout right === //
.card--layout-right {
- @include breakpoint(sm) {
+ @include container-query() {
flex-direction: row-reverse;
-
.media__inner,
- // Add margin back in for media--circle since we removed it before.
+ // Add margin back in for media--circle since we removed it before.
.media--circle .media__inner {
margin-left: 2rem;
}
diff --git a/src/scss/layout/_grid.scss b/src/scss/layout/_grid.scss
index 93ab839bb2..ccf54d8632 100644
--- a/src/scss/layout/_grid.scss
+++ b/src/scss/layout/_grid.scss
@@ -1,22 +1,36 @@
@import '../abstracts/variables';
@import '../abstracts/utilities';
-.grid--threecol--33-34-33 {
+.grid--onecol {
+ .list-container__inner {
+ max-width: 81.875em;
+ margin: 0 auto;
+ }
+}
+
+.grid--onecol__narrow {
+ .list-container__inner {
+ max-width: 63.75em;
+ margin: 0 auto;
+ }
+}
+
+.grid--twocol--50-50 {
.list-container__inner {
gap: $mobile-height-gutter;
@include grid-base;
@include breakpoint(sm) {
- @include threecol-grid;
+ @include twocol-grid;
}
}
}
-.grid--twocol--50-50 {
+.grid--threecol--33-34-33 {
.list-container__inner {
gap: $mobile-height-gutter;
@include grid-base;
@include breakpoint(sm) {
- @include twocol-grid;
+ @include threecol-grid;
}
}
}
@@ -43,23 +57,20 @@
}
}
-.grid--onecol {
- .list-container__inner {
- max-width: 81.875em;
- margin: 0 auto;
- }
-}
-
-.grid--onecol__narrow {
+.grid--fourcol--25 {
.list-container__inner {
- max-width: 63.75em;
- margin: 0 auto;
+ gap: $mobile-height-gutter;
+ @include grid-base;
+ @include breakpoint(sm) {
+ @include fourcol-grid;
+ }
}
}
// Declare which containers to query.
@supports (contain: inline-size) {
- .grid__column {
+ .grid__column,
+ .column-container {
container-type: inline-size;
container-name: column;
}