# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bricksmotion.gitbook.io/bricksmotion-components/components/cta/cta-2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.