# Hero #4

### Component Structure

* **COPY WRAPPER (div)**: This foundational wrapper organizes the internal structure of Hero #4 without specific styling.
* **HR4 SECTION (section)**: Utilizing the `hr4__component` class, this section ensures that the hero content is centered and spans the full viewport height for maximum impact.
* **HR4 CONTAINER (container)**: Marked with the `hr4__container` class, it aligns and organizes the hero's content elements for optimal presentation.
  * **HR4 IMAGE (image)**: Styled with the `hr4__image` class, this element sets the visual tone, ensuring an engaging backdrop for the hero content.
  * **HR4 HEADING (heading)**: The core message of the hero, delivered boldly using the `hr4__headline` class to capture immediate attention.
  * **HR4 TEXT (text-basic)**: Provides additional context or details, complementing the headline with the `hr4__text` class.
  * **HR4 BUTTON (button)**: A distinct call-to-action, the `hr4__button` class makes this button stand out, guiding users towards the desired interaction.

### Animation Structure

The **"HR4 - Pageload"** timeline details the sequence of animations that enhance the entry of Hero #4's elements on the page, creating a compelling visual narrative:

1. **HR4 IMAGE**: Undergoes a height transition to fully reveal itself, accompanied by a border-radius animation for a softer appearance, creating an inviting visual entrance.
2. **HR4 HEADING**: Fades into view following the image setup, drawing the viewer's attention to the main message with strategic timing to maintain engagement.
3. **HR4 TEXT**: Emerges with additional information to support the headline, fading in to offer depth to the hero's narrative shortly after the heading appears.
4. **HR4 BUTTON**: The final touch in the sequence, this call-to-action button fades in to clearly and enticingly highlight the desired user action.


---

# 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/heroes/hero-4.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.