Schema-only template for a callout component.

Introduction

A callout highlights key information or actions within a page, using contrasting styles to emphasize limited-time offers, important updates, feature highlights, or next steps in a user journey. It breaks the flow intentionally to ensure critical content stands out.

Personalizing callouts, such as showing different messages based on user stage or referral source, and AB testing variations in copy, placement, or design can improve visibility, relevance, and engagement.

Usage

To add this component to your workspace, run:

npx croct@latest use croct://ui/component/callout
Other templates from
CroctCroct
An announcement bar with a location-based message.
Geomarketing strategy

An announcement bar with a location-based message.

CroctCroct
Component template for a carousel section.
Carousel section

Component template for a carousel section.

CroctCroct
A personalized experience based on marketing campaigns.
Marketing campaign experience

A personalized experience based on marketing campaigns.

CroctCroct
Component template for an announcement bar.
Announcement bar

Component template for an announcement bar.

CroctCroct

Start building in seconds

Paste the following command in your terminal and let the CLI do the rest.

npx croct@latest init