first commit

examples/cms-payload/components/Blocks/CallToAction/index.module.scss

@@ -0,0 +1,34 @@
+@use "../.../../../../css/queries.scss" as *;
+
+$spacer-h: calc(var(--block-padding) / 2);
+
+.callToAction {
+  padding-left: $spacer-h;
+  padding-right: $spacer-h;
+}
+
+.background--white {
+  background-color: var(--color-base-1000);
+  color: var(--color-base-0);
+}
+
+.richText {
+  :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.linkGroup {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+
+  :last-child {
+    margin-bottom: 0;
+  }
+
+  @include mid-break {
+    margin-top: 20px;
+  }
+}

examples/cms-payload/components/Blocks/CallToAction/index.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { Cell, Grid } from "@faceless-ui/css-grid";
+import { Page } from "../../../payload-types";
+import { BackgroundColor } from "../../BackgroundColor";
+import { Gutter } from "../../Gutter";
+import { CMSLink } from "../../Link";
+import RichText from "../../RichText";
+
+import classes from "./index.module.scss";
+
+type Props = {
+  ctaBackgroundColor?: "white" | "black";
+  richText: {
+    [k: string]: unknown;
+  }[];
+  links: {
+    link: {
+      type?: "reference" | "custom";
+      newTab?: boolean;
+      reference: {
+        value: string | Page;
+        relationTo: "pages";
+      };
+      url: string;
+      label: string;
+    };
+    id?: string;
+  }[];
+  id?: string;
+  blockName?: string;
+  blockType: "cta";
+};
+export const CallToActionBlock: React.FC<Props> = ({
+  ctaBackgroundColor,
+  links,
+  richText,
+}) => {
+  const oppositeBackgroundColor =
+    ctaBackgroundColor === "white" ? "black" : "white";
+
+  return (
+    <Gutter>
+      <BackgroundColor color={oppositeBackgroundColor}>
+        <div className={classes.callToAction}>
+          <Grid>
+            <Cell cols={8} colsL={7} colsM={12}>
+              <div>
+                <RichText className={classes.richText} content={richText} />
+              </div>
+            </Cell>
+
+            <Cell
+              start={10}
+              cols={3}
+              startL={9}
+              colsL={4}
+              startM={1}
+              colsM={12}
+            >
+              <div className={classes.linkGroup}>
+                {(links || []).map(({ link }, i) => {
+                  return <CMSLink key={i} {...link} />;
+                })}
+              </div>
+            </Cell>
+          </Grid>
+        </div>
+      </BackgroundColor>
+    </Gutter>
+  );
+};