Call-To-Action
Description
The Call-To-Action component is a flexible and visually appealing section designed to grab user attention and prompt action. It features a customizable background, optional foreground content, and an overlay color option. The component is built with a responsive layout and includes a particle effect background for added visual interest.
Installation
bash
sabaccui add callToAction
Usage
Here's an example of how to use the Call-To-Action component:
Preview
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
background | bloks | Allows for a single background component (e.g., background, image or video) | None |
foreground | bloks | Content to be displayed on top of the background | None |
overlay | option | Optional color overlay for the background | None |
background
- Type:
bloks - Maximum: 1
- Description: Accepts a single component to serve as the background (e.g., an image or video component).
foreground
- Type:
bloks - Description: Optional content to be displayed on top of the background. Can include multiple nested components such as headlines, paragraphs, or buttons.
overlay
- Type:
option - Options:
- Primary (
primary) - Secondary (
secondary) - Light (
light) - Dark (
dark) - White (
white) - Black (
black)
- Primary (
- Description: Specifies the color overlay to be applied to the background, allowing for better contrast with foreground content.
Notes
- The component uses a particle effect background, which is rendered using the
<BackgroundNetwork>component. - The layout is responsive, using Tailwind CSS classes for spacing and sizing.
- The component is editable within the Storyblok editor using the
v-editabledirective.
Best Practices:
- Choose background and overlay combinations that provide sufficient contrast for foreground content.
- Keep the call-to-action concise and focused on a single, clear action.
- Test the component across different screen sizes to ensure responsiveness.
- Consider accessibility when selecting colors and contrast levels.