> For the complete documentation index, see [llms.txt](https://bricksmotion.gitbook.io/bricksmotion-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bricksmotion.gitbook.io/bricksmotion-components/components/cta/cta-2.md).

# CTA #2

### Component Structure

* **CTA2 COMPONENT (Section)**: This section acts as the primary wrapper, using the `cta2__component` CSS class. It sets the stage for the entire CTA, defining the background and other visual elements that make the CTA stand out.
* **CTA2 CONTAINER (Container)**: Nested within the CTA2 COMPONENT, this container, styled with `cta2__container`, organizes the content of the CTA, ensuring proper alignment and distribution.
* **CTA2 WRAPPER (Block)**: Within the container, the CTA2 WRAPPER holds the heading, text, button, and image. It uses the `cta2__wrapper` class to apply a unique clip-path animation, background color, and styling to center its content.
* **CTA2 HEADING (Heading)**: The headline of the CTA, crucial for capturing the user's interest. Styled with `cta2__heading`, it ensures the text is visually appealing against the component's background.
* **CTA2 TEXT (Text-basic)**: Provides additional information or persuasive content beneath the heading. The `cta2__text` class is used for styling, focusing on text color, alignment, and readability.
* **CTA2 BUTTON (Button)**: The action element of the CTA, encouraging users to take a specified action. It's styled with `cta2__button` for prominence and alignment with the component's visual hierarchy.
* **CTA2 IMAGE (Image)**: Enhances the CTA with visual imagery, using the `cta2__image` class for styling. It's positioned within the wrapper for optimal visual integration with the text and button.

### Animation Structure

* **CTA2 - In View**: This animation sequence is triggered when the CTA component comes into the viewport, consisting of:
  * An animation that adjusts the `--clip-width` custom property from `50%` to `0%`, revealing the `.cta2__wrapper` content in a visually engaging manner by expanding the clip-path.
  * A subsequent animation targets the child elements within `.cta2__wrapper`, bringing them into view with a vertical movement and fade-in effect, enhancing the reveal with staggered timing for each element.