> 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/cards/cards-2.md).

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