+
+
+
+
+
+ {title}
+
+ {description && }
+ {ctas?.length && }
+
+
+ )
+}
+
+export default SectionCardLogo
diff --git a/nextjs/src/components/sections/section-group.css b/nextjs/src/components/sections/section-group.css
new file mode 100644
index 0000000..ce0c195
--- /dev/null
+++ b/nextjs/src/components/sections/section-group.css
@@ -0,0 +1,8 @@
+.section-group-dividers>* {
+ /**
+ * Adds a vertical line between cards that are children.
+ */
+ @apply relative after:content-[''] after:absolute last:after:hidden after:bg-jumbo/35;
+ @apply after:top-auto after:-bottom-6 after:right-0 after:left-0 after:w-full after:h-[1px];
+ @apply after:lg:-bottom-8;
+}
\ No newline at end of file
diff --git a/nextjs/src/components/sections/section-group.tsx b/nextjs/src/components/sections/section-group.tsx
index 97a9f5a..486b098 100644
--- a/nextjs/src/components/sections/section-group.tsx
+++ b/nextjs/src/components/sections/section-group.tsx
@@ -3,13 +3,17 @@ import Title from "../title"
import Text from "../text"
import { cva, VariantProps } from "class-variance-authority"
import clsx from "clsx"
+import "./section-group.css"
-const sectionGroupStyles = cva(["grid gap-10 lg:gap-16"], {
+const sectionGroupStyles = cva(["grid gap-12 lg:gap-16"], {
variants: {
align: {
start: "",
center: "justify-start lg:justify-center",
},
+ hasDividers: {
+ true: "section-group-dividers",
+ },
},
defaultVariants: {
align: "start",
@@ -33,6 +37,7 @@ const SectionGroup: React.FC