CTA

Centered call-to-action section with markdown supporting text and one primary link.

CTA is the minimal proof Set for the Phase 2 pipeline: the docs page, page-builder demo, fieldset YAML, fields table, source blocks, and live preview all render from the same fieldset + demo entry data.

Preview

Build Statamic pages from copy-paste Sets

Ship sections with their fieldsets attached. Kern Sets keep the template and editor contract together, so page-builder work starts from accessible markup instead of a blank canvas.

Start building

Fields

Handle	Type	Display	Instructions
`heading`	`text`	Heading	Short headline for the call-to-action section.
`text`	`markdown`	Text	Supporting copy. Markdown allows emphasis and links without a Bard renderer contract.
`link`	`link`	Link	Destination for the primary action.
`link_label`	`text`	Link Label	Visible text for the primary action button.

Source

 1{{#
 2    @name CTA
 3    @desc Centered call-to-action section with markdown supporting text and one primary link.
 4    @set cta
 5#}}
 6<section class="border-border bg-background border-y py-16 sm:py-20">
 7    {{ partial:components/primitives/container size="narrow" class="text-center" }}
 8        {{# Edit copy or add eyebrow/media elements here after copying into your project. #}}
 9        {{ if heading }}
10            <h2 class="h2">{{ heading }}</h2>
11        {{ /if }}
12        {{ if text }}
13            {{ partial:components/primitives/prose class="prose-sm mx-auto mt-4 max-w-xl" }}
14                {{ text | markdown }}
15            {{ /partial:components/primitives/prose }}
16        {{ /if }}
17        {{ if link && link_label }}
18            <div class="mt-8 flex justify-center">
19                {{ partial:components/primitives/button href="{link}" label="{link_label}" intent="primary" size="lg" /}}
20            </div>
21        {{ /if }}
22    {{ /partial:components/primitives/container }}
23</section>

{{#
    @name CTA
    @desc Centered call-to-action section with markdown supporting text and one primary link.
    @set cta
#}}
<section class="border-border bg-background border-y py-16 sm:py-20">
    {{ partial:components/primitives/container size="narrow" class="text-center" }}
        {{# Edit copy or add eyebrow/media elements here after copying into your project. #}}
        {{ if heading }}
            <h2 class="h2">{{ heading }}</h2>
        {{ /if }}
        {{ if text }}
            {{ partial:components/primitives/prose class="prose-sm mx-auto mt-4 max-w-xl" }}
                {{ text | markdown }}
            {{ /partial:components/primitives/prose }}
        {{ /if }}
        {{ if link && link_label }}
            <div class="mt-8 flex justify-center">
                {{ partial:components/primitives/button href="{link}" label="{link_label}" intent="primary" size="lg" /}}
            </div>
        {{ /if }}
    {{ /partial:components/primitives/container }}
</section>

Fieldset YAML

 1title: CTA
 2fields:
 3  - handle: heading
 4    field:
 5      type: text
 6      display: Heading
 7      instructions: Short headline for the call-to-action section.
 8      validate:
 9        - required
10  - handle: text
11    field:
12      type: markdown
13      display: Text
14      instructions: Supporting copy. Markdown allows emphasis and links without a Bard renderer contract.
15  - handle: link
16    field:
17      type: link
18      display: Link
19      instructions: Destination for the primary action.
20  - handle: link_label
21    field:
22      type: text
23      display: Link Label
24      instructions: Visible text for the primary action button.

title: CTA
fields:
  - handle: heading
    field:
      type: text
      display: Heading
      instructions: Short headline for the call-to-action section.
      validate:
        - required
  - handle: text
    field:
      type: markdown
      display: Text
      instructions: Supporting copy. Markdown allows emphasis and links without a Bard renderer contract.
  - handle: link
    field:
      type: link
      display: Link
      instructions: Destination for the primary action.
  - handle: link_label
    field:
      type: text
      display: Link Label
      instructions: Visible text for the primary action button.

Dependencies

Packages

@tailwindcss/typography

1npm install @tailwindcss/typography

npm install @tailwindcss/typography

marcorieser/tailwind-merge-statamic

1composer require marcorieser/tailwind-merge-statamic

composer require marcorieser/tailwind-merge-statamic