The Callout Section is a component designed to highlight important information and prompt action from visitors. It consists of a prominent headline and a call-to-action (CTA) button, making it perfect for drawing attention to key messages. The component offers limited styling options, primarily focusing on spacing adjustments above and below.
Example Callout Section
This is a CTAContent Options
This component requires inputs for two pieces of content:
- A headline
- A button
If you only need one of these elements, consider using a different component for a better fit.
Layout and Styling Options
Although the Callout Section has limited styling options, you can combine it with Gloss Sections of different colors to create various visual effects.
Gloss Section with Muted Background
This is a CTAGloss Section with Primary Background
This is a CTAGloss Section with Secondary Background
This is a CTAGloss Section with Tertiary Background
This is a CTAUsage
Do
- Ensure the headline is clear and concise to effectively capture attention.
- Use the CTA button to prompt a specific action that aligns with your goals.
- Adjust the spacing to maintain visual balance and harmony with other page elements.
- Place the Callout Section in a prominent location where it is easily noticeable by visitors.
Don't
- Don’t use the Callout Section for trivial announcements or non-essential information.
- Avoid placing the Callout Section in areas with low visibility, such as the bottom of the page.
- Don’t use overly complex or technical language in the headline or button text.
- Refrain from using the component if it disrupts the flow and readability of your page content.