Call to action

Call To Action (CTA)

The cta component is a prominent “call to action” section (usually near the bottom of a landing page) to convert readers into signups, demo views, or purchases.

RailsFast UI - CTA

This component intentionally has no background and doesn’t hardcode text colors — style the parent container and it will inherit.

Use it like:

<div class="bg-white text-neutral-900">
  <%= render "components/railsfast/marketing/cta",
      title: "Ready to get started?",
      subtitle: "This is the perfect spot for your first major call-to-action (CTA). Users have just finished reading about your product's main benefits and are primed to take the next step. Use this CTA to convert interest into action: invite them to get started or explore a live demo.",
      primary_button: {
        text: "Get started now",
        url: new_user_registration_path,
        style: "solid",
        size: "medium"
      },
      secondary_button: {
        text: "View Demo",
        url: "#",
        style: "outline",
        show_arrow: true
      },
      layout: "centered",
      icon: "rocket-launch",
      stats: [
        { value: "10K+", label: "Customers" },
        { value: "+40%", label: "Revenue" },
        { value: "99.9%", label: "Uptime" }
      ]
  %>
</div>

Parameters:

title: main heading text (default: "Ready to get started?")
subtitle: supporting text (optional)
layout: "centered" (default), "split", "offset"
container: "normal" (default), "wide", "full"
icon: optional Heroicon name (example: "rocket-launch")
stats: optional array of { value:, label: }
primary_button: hash with:
- text, url
- style: "solid" (default), "outline", "ghost"
- size: "small", "medium", "large" (default), "xlarge"
- icon: optional Heroicon name
- color, text_color: optional hex/CSS colors (example: "#df430d")
- data: optional Rails data: hash
secondary_button (optional): hash with:
- text, url
- style: "outline" (default), "solid", "ghost"
- icon: optional Heroicon name
- show_arrow: true/false
- data: optional Rails data: hash

Call To Action Card (CTA Card)

The cta_card component is an attention grabber: a single CTA inside a card, with optional gradients, patterns, and a featured image.

RailsFast UI - CTA Card

Use it like:

<div class="py-16 px-4 sm:px-6 lg:px-8">
  <div class="mx-auto max-w-6xl">
    <%= render "components/railsfast/marketing/cta_card",
        title: "Another catchy CTA in a card",
        subtitle: "Use eye-catching gradients to grab users' attention and drive them to your CTA.",
        button: {
          text: "Start now",
          url: new_user_registration_path,
          style: "solid",
          icon: "arrow-right",
          color: "white",
          data: { turbo: false }
        },
        image: {
          url: "https://placehold.co/600x400/e4e4e4/c4c4c4?text=Your+featured+image+here",
          alt: "RailsFast dashboard screenshot",
          position: "right"
        },
        background: "gradient",
        gradient_colors: ["#00b09b", "#96c93d"],
        image_effects: "tilted" %>
  </div>
</div>

Parameters:

title: main heading text
subtitle: supporting text
button: hash with text, url, style ("solid", "outline", "ghost"), optional icon, optional color/text_color, optional data
image (optional): hash with url, alt, position ("right", "left", "background")
background: "gradient" (default), "solid", "pattern"
gradient_colors: array of 2–3 colors (Tailwind names or hex/CSS colors)
background_color: base color for "solid" / "pattern"
decorative_blobs: true/false (default: true)
card_style: "elevated" (default), "bordered", "minimal"
image_effects: "tilted" (default), "shadow", "glow", "none"