CTA

Composable call-to-action panel for a kicker, title, description, checklist, feature cards, and actions.

Quick Preview

Your Next Step

Buy Your Home With Us.

Glad you made it this far. Pick the path that suits you — we'll take care of the rest.

Chat on WhatsApp

Talk to a Closing Partner now and get answers in less than 45 minutes during work hours.

Recommended

Create an Account

Save homes, track your purchase, and move at your own pace.

Create Account

Fill Ideal Property Form

Skip the search — tell us what you want and our agents find it.

Skip the stress of house hunting — let our professionally trained agents handle it.

Composition

Use the public subpath import and compose only the slots you need. CTA does not set a max-width or a fixed layout — it's a flex container, so arrange CTAContent, feature CTACards, or any custom panel inside it directly.

CTA
├── CTAContent
│   ├── CTATag
│   ├── CTATitle
│   ├── CTADescription
│   └── CTAList
│       └── CTAListItem
└── CTACard
    ├── CTACardIcon
    ├── CTACardTitle
    ├── CTACardDescription
		└── CTAButton|CTAButtonLink

Usage

import {
	CTA,
	CTAButton,
	CTAContent,
	CTADescription,
	CTAList,
	CTAListItem,
	CTATag,
	CTATitle,
} from "@giddaa-housing/ui/cta";

<CTA variant="subtle">
	<CTAContent>
		<CTATag>Your Next Step</CTATag>
		<CTATitle>Own your first home sooner</CTATitle>
		<CTADescription>
			Shari'ah-compliant financing built around how you actually get paid.
		</CTADescription>
		<CTAList>
			<CTAListItem>No interest, ever</CTAListItem>
			<CTAListItem>Approval in 48 hours</CTAListItem>
		</CTAList>
	</CTAContent>
	<CTAButton>Get started</CTAButton>
</CTA>;

Examples

Default CTA

Centered header paired with a grid of feature cards — CTACard with variant="brand" calls out a recommended option, and every CTAButton and CTACardIcon tone adapts automatically.

Your Next Step

Buy Your Home With Us.

Glad you made it this far. Pick the path that suits you — we'll take care of the rest.

Chat on WhatsApp

Talk to a Closing Partner now and get answers in less than 45 minutes during work hours.

Recommended

Create an Account

Save homes, track your purchase, and move at your own pace.

Create Account

Fill Ideal Property Form

Skip the search — tell us what you want and our agents find it.

Skip the stress of house hunting — let our professionally trained agents handle it.

Split Layout

Pair CTAContent with a custom panel — here a plain card with a stacked list of CTAButtons — for a two-column "pick your path" layout. CTA itself doesn't prescribe the second column; compose it from any markup.

Your Next Step

Buy Your Home With Us.

Glad you made it this far — take the next step to owning your home, your way.

  • Verified, inspected listings only
  • Flexible financing & payment plans
  • A dedicated Closing Partner with you
  • Serving investors, diaspora and first time home buyers

Choose how to begin

Or

Skip the stress of searching — let our agents handle it.

Props

Prop/APITypeDefaultDescription
CTA.variant"default" | "subtle""default"Switches the panel surface between bg-surface and bg-surface-brand-subtle.
CTATagspan props-Uppercase brand-colored kicker/eyebrow, typically the first child of CTAContent. Override className for contrast when reused on a non-default background (e.g. inside a variant="brand" card).
CTAListItem.iconReactNode<CircleCheck />Overrides the default leading list marker.
CTACard.variant"default" | "brand""default"Switches the card between a bordered canvas surface and a filled brand surface; CTACardTitle, CTACardDescription, and CTAButton all adapt contrast automatically.
CTACardIcon.variant"subtle-brand" | "subtle-accent" | "surface""subtle-brand"Tints the icon circle background and foreground.
CTAButtonButton props-Thin wrapper over Button that stays legible inside a variant="brand" CTACard; all Button props (variant, size, isLoading, render, …) still work.
CTAButtonLinkButtonLink props-Thin wrapper over ButtonLink that stays legible inside a variant="brand" CTACard; all ButtonLink props (href, size, variant, render, …) still work.
renderBase UI render prop-Changes the rendered element while preserving styles.
classNamestring-Local layout or spacing overrides.
native/root propsReact component props-Passed through to the underlying slot element.

Accessibility

  • Keep CTA semantic as a section unless the consuming context requires a different element via render.
  • CTATitle renders an h2 and CTACardTitle renders an h3 — make sure they fit the surrounding heading hierarchy, or override with render.
  • CTAButton renders visible text by default; when using an icon-only button, provide an explicit aria-label.
  • Keep product routing and analytics in the consuming app. Use CTAButton with render={<a href="..." />} (or the app's link component) when the action navigates.

Collapsible

Disclosure primitive for hiding and revealing a single content region.

DetailsCard

Composable read-only card for structured label-value data.

On this page

Quick PreviewCompositionUsageExamplesDefault CTASplit LayoutPropsAccessibility