# Cards #2

#### Component Structure

* **CD2 COMPONENT (section):** This is the main container for the cards, designed to ensure the cards are displayed in a grid layout that adapts to various screen sizes.
* **CD2 CONTAINER (container):** It holds the individual card elements and is responsible for the grid display, utilizing CSS classes for responsiveness.
* **CD2 CARD (div):** Each card within the container, featuring a combination of image, text, and button elements. Cards are styled to stand out on hover.
  * **CD2 CARD TOP (div):** Contains the card number and image. It's designed to visually transform when users interact with the card.
  * **CD2 CARD BOT (div):** Holds the card's heading and content, including a descriptive text and a call-to-action button.

#### Animation Structure

**CD2 - HOVER:** This timeline animation targets the `.cd2__card` class, revealing additional content and altering the card's appearance upon hover.

* **Card Content Expansion:** Increases the content wrapper's height to reveal hidden text smoothly.
* **Color Transition:** Changes the card bottom section's background color to enhance the hover effect visually.

#### Interactive Events

**CD2 - MOUSENTER FLIP & CD2 - MOUSELEAVE FLIP:** These events trigger animations that create a flip effect for the card's image and number, adding a dynamic visual cue to indicate interactivity.

* **Image Flip:** On mouse enter, the card image flips, changing its styling to indicate it's clickable. The reverse occurs on mouse leave.
* **Number Styling Change:** Similarly, the card number undergoes a styling change on hover, further emphasizing the interactive nature of the card.


---

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