Cta Block

The CTA Block is a simple, composable call-to-action section.
It renders a heading, optional description, and a primary action button.

npx shadcn@latest add @rokkit200-ui/cta-block

Preview

Cta Block Heading

Cta Block Main Body

Google

Code

import mockedCtaBlock from "@/data/mock/optimizely/cta/cta-block.json";
import { CtaBlock } from "@/registry/rokkit200-ui/blocks/cta-block/cta-block";
import { ctaBlockCmsMappers } from "@/registry/rokkit200-ui/blocks/cta-block/cta-block-mapping";
import { mapCmsType } from "@/registry/rokkit200-ui/lib/content-mapper/content-mapper-util";

export default function CtaBlockDefaultDemo() {
  const properties = mapCmsType(ctaBlockCmsMappers, mockedCtaBlock);

  return <CtaBlock {...properties} />;
}

Code Model

[SiteContentType(
    GroupName = "Common",
    GUID = "9481bec8-d1b6-4ded-9bf7-9ff8ec483c74a",
    DisplayName = "Call To Action block",
    Description = "Element representing a call to action"
)]
public class CtaBlockDto
{
    [CultureSpecific]
    public virtual string Heading { get; set; }
    [CultureSpecific]
    public virtual XhtmlString MainBody { set; get; }
    [UIHint(UIHint.Image)]
    public virtual ContentReference Image { set; get; }
    // Would usually be a LinkItemCollection instead
    public virtual IList<CtaLinkDto> Links { get; set; }
}

[SiteContentType(
    GroupName = "Common",
    GUID = "9fe09aca-6537-48b6-9a97-acfbe777f127",
    DisplayName = "Call To Action link block",
    Description = "Element representing a call to action block's link"
)]
public class CtaLinkDto
{
    [CultureSpecific]
    public virtual string Title { get; set; }
    [CultureSpecific]
    public virtual string Url { get; set; }
}

GraphQL Query

query MyQuery {
  CtaBlock {
    item {
      Heading
      Links {
        target
        text
        title
        url {
          default
        }
      }
      MainBody {
        json
      }
      Media {
        _metadata {
          url {
            default
          }
        }
        ... on ImageMedia {
          AltText
        }
      }
    }
  }
}

Usage

Below is an example of how to use the CtaBlock in your site.

import { CtaBlock } from "@/rokkit200-ui/blocks/cta-block/cta-block";

<CtaBlock
    heading="Lorem ipsum dolor sit amet",
    mainBody="Mauris sit amet faucibus ligula, iaculis accumsan enim. Vivamus placerat tincidunt neque at tincidunt. Pellentesque eget tristique mauris, non dictum nunc.",
/>