diff --git a/.storybook/themes/news.scss b/.storybook/themes/news.scss index afac881460..0b464db20a 100644 --- a/.storybook/themes/news.scss +++ b/.storybook/themes/news.scss @@ -3417,6 +3417,9 @@ "triple-chain-child-item": ( "gap": var(--global-spacing-6) 0 ), + "triple-chain-child-item-grid": ( + "display": "grid" + ), "triple-chain-child-item-empty": ( "display": contents ), @@ -4511,6 +4514,9 @@ "triple-chain-child-item-empty": ( "display": initial ), + "triple-chain-child-item-grid": ( + "display": "flex" + ), "triple-chain-children-grid": ( "grid-template-columns": 1fr 1fr 1fr, "gap": 0 var(--global-spacing-5) diff --git a/blocks/triple-chain-block/_index.scss b/blocks/triple-chain-block/_index.scss index 8ca377071c..74da7ee70e 100644 --- a/blocks/triple-chain-block/_index.scss +++ b/blocks/triple-chain-block/_index.scss @@ -16,6 +16,11 @@ @include scss.block-components("quad-chain-child-item-empty"); @include scss.block-properties("quad-chain-child-item-empty"); } + + .c-grid { + @include scss.block-components("triple-chain-child-item-grid"); + @include scss.block-properties("triple-chain-child-item-grid"); + } @include scss.block-components("triple-chain-child-item"); @include scss.block-properties("triple-chain-child-item"); diff --git a/blocks/triple-chain-block/themes/news.json b/blocks/triple-chain-block/themes/news.json index e0e017a990..9b765cc87a 100644 --- a/blocks/triple-chain-block/themes/news.json +++ b/blocks/triple-chain-block/themes/news.json @@ -30,6 +30,16 @@ "desktop": {} } }, + "triple-chain-child-item-grid": { + "styles": { + "default": { + "display": "grid" + }, + "desktop": { + "display": "flex" + } + } + }, "triple-chain-child-item-empty": { "styles": { "default": {