(#4383) prototyping imageless card group

- digital platform ticket

Closes #4383

Author: dlescarbeau

packages/ncids-css/packages/nci-card-group/internal/_nci-card-group.scss

@@ -76,3 +76,44 @@
 		}
 	}
 }
+
+.nci-imageless-card-group {
+	ul {
+		@include u-margin-x('auto');
+		@include u-width('full');
+		@include u-display('flex');
+		@include u-flex('wrap');
+		row-gap: units(3);
+		@include at-media('tablet-lg') {
+			row-gap: units(4);
+		}
+		padding-inline-start: 0;
+		margin-block-start: 0;
+		margin-block-end: 0;
+		li {
+			@include u-display('flex');
+			flex: 0 0 100%;
+			@include at-media('tablet-lg') {
+				flex: 1 0;
+			}
+			@include u-margin-bottom(0);
+			@include u-padding-x(2);
+			&:last-child {
+				@include u-margin-bottom(0);
+			}
+		}
+		&:has(li:nth-child(3)) {
+			li {
+				flex: 0 0 100%;
+				@include at-media('tablet-lg') {
+					flex: 0 0 33%;
+				}
+			}
+			li:nth-child(3n + 2) {
+				@include at-media('tablet-lg') {
+					flex: 0 0 34%;
+				}
+			}
+		}
+	}
+}

testing/ncids-css-testing/stories/components/nci-card/nci-card.default.stories.jsx

@@ -20,48 +20,60 @@ export default {
 
 const Template = (args) => Component(args);
 
-export const Default = () => <TestCase css={css} html={Template.bind({})(
-	{
-    'title': 'CRCHD Diversity Training',
-	  'description': 'Treatment for severe COVID-19 with interferons decreased the viral load of SARS-CoV-2, a new study found.',
-    'imageSource' : img_news1_4x3,
-    'imageSrc' : img_news1_16x9,
-    'alt': 'CRCHD Diversity Training',
-    'ariaLabel': 'Card',
-    'url': 'http://cancer.gov',
-	},
-)} />;
+export const Default = () => (
+	<TestCase
+		css={css}
+		html={Template.bind({})({
+			title: 'CRCHD Diversity Training',
+			description:
+				'Treatment for severe COVID-19 with interferons decreased the viral load of SARS-CoV-2, a new study found.',
+			imageSource: img_news1_4x3,
+			imageSrc: img_news1_16x9,
+			alt: 'CRCHD Diversity Training',
+			ariaLabel: 'Card',
+			url: 'http://cancer.gov',
+		})}
+	/>
+);
 
 const TemplateGroup = (args) => ComponentGroup(args);
 
-export const CardGroup = () => <TestCase css={css} html={TemplateGroup.bind({})(
-	{ 'items': [
-      {
-        'title': 'CRCHD Diversity Training',
-        'description': 'Treatment for severe COVID-19 with interferons decreased the viral load of SARS-CoV-2, a new study found.',
-        'imageSource' : img_news1_4x3,
-        'imageSrc' : img_news1_16x9,
-	      'alt': 'CRCHD Diversity Training',
-        'ariaLabel': 'Card',
-        'url': 'http://cancer.gov',
-      },
-      {
-        'title': 'Grant Application Development, Submission, Review, & Award',
-        'description': 'In patients with certain variations in the OAS1 gene, treatment for severe COVID-19 with interferons decreased the viral load of SARS-CoV-2, a new study found.',
-        'imageSource' : img_news2_4x3,
-        'imageSrc' : img_news2_16x9,
-	      'alt': 'Grant Application Development, Submission, Review, & Award',
-        'ariaLabel': 'Card',
-        'url': 'http://cancer.gov',
-      },
-      {
-        'title': 'Capacitación en diversidad CRCHD',
-        'description': 'El tratamiento para la COVID-19 grave con interferones disminuyó la carga viral del SARS-CoV-2, según encontró un nuevo estudio.',
-        'imageSource' : img_news3_4x3,
-        'imageSrc' : img_news3_16x9,
-        'alt': 'Capacitación en diversidad CRCHD',
-        'ariaLabel': 'Card',
-        'url': 'http://cancer.gov',
-      },
-   ]},
-)} />;
+export const CardGroup = () => (
+	<TestCase
+		css={css}
+		html={TemplateGroup.bind({})({
+			items: [
+				{
+					title: 'CRCHD Diversity Training',
+					description:
+						'Treatment for severe COVID-19 with interferons decreased the viral load of SARS-CoV-2, a new study found.',
+					imageSource: img_news1_4x3,
+					imageSrc: img_news1_16x9,
+					alt: 'CRCHD Diversity Training',
+					ariaLabel: 'Card',
+					url: 'http://cancer.gov',
+				},
+				{
+					title: 'Grant Application Development, Submission, Review, & Award',
+					description:
+						'In patients with certain variations in the OAS1 gene, treatment for severe COVID-19 with interferons decreased the viral load of SARS-CoV-2, a new study found.',
+					imageSource: img_news2_4x3,
+					imageSrc: img_news2_16x9,
+					alt: 'Grant Application Development, Submission, Review, & Award',
+					ariaLabel: 'Card',
+					url: 'http://cancer.gov',
+				},
+				{
+					title: 'Capacitación en diversidad CRCHD',
+					description:
+						'El tratamiento para la COVID-19 grave con interferones disminuyó la carga viral del SARS-CoV-2, según encontró un nuevo estudio.',
+					imageSource: img_news3_4x3,
+					imageSrc: img_news3_16x9,
+					alt: 'Capacitación en diversidad CRCHD',
+					ariaLabel: 'Card',
+					url: 'http://cancer.gov',
+				},
+			],
+		})}
+	/>
+);