# Hero #2

### Component Structure

**COPY WRAPPER (div)**: Serves as the top-level container for the hero section, encapsulating all its elements without any specific styling applied directly.

**HR2 SECTION (section)**: Acts as the main structural element of the hero component, with a CSS Class `hr2__component` applied to center the content and align items within the full viewport height.

**HR2 CONTAINER (container)**: A container within the section that further aligns and organizes the hero content, using the `hr2__container` class to center items.

**HR2 CONTENT (div)**: This div wraps the headline and button/text wrapper, employing a flex display to manage layout with responsiveness in mind, especially for tablet and mobile views.

**HR2 HEADLINE (heading)**: Displays the primary message of the hero section. It uses the `hr2__headline` class for styling and is an H1 tag, emphasizing its importance.

**HR2 WRAPPER (div)**: Contains the button and text elements, structured with flexbox to ensure proper alignment and spacing, adapting for mobile portrait orientations.

**HR2 BUTTON (button)**: A call-to-action button labeled "Button," styled with a `hr2__button` class, indicating its dark style and importance in mobile portrait order.

**HR2 TEXT (text-basic)**: Provides additional descriptive text using the `hr2__text` class to manage margins and maximum width for readability.

**HR2 IMAGE GRID (div)**: Organizes images in a grid layout, applying the `hr2__image-grid` class to define grid columns, gaps, and top margin adjustments.

**HR2 IMAGE WRAPPER and HR2 IMAGE (div and image)**: Multiple wrappers and image elements each using the `hr2__image-wrapper` and `hr2__image` classes respectively. These elements display various placeholder images, with specific classes (`hr2__down`, `hr2__up`) to manipulate their initial animation states.

### Animation Structure

**HR2 - Pageload (Timeline/Event)**: This timeline triggers animations for the hero component on page load, targeting elements with specific classes to animate properties such as opacity and vertical position. Key animations include:

**.hr2\_\_headline**: Animated to fade in and move up slightly, creating a welcoming effect for the headline.

**.hr2\_\_button**: Appears with a fade and upward movement, drawing attention shortly after the headline.

**.hr2\_\_text**: Fades in with a slight horizontal movement, adding to the sequential reveal of content.

**.hr2\_\_down and .hr2\_\_up**: These selectors target the image elements, animating them differently based on their class to create a layered effect, enhancing the visual appeal on page load.


---

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