> For the complete documentation index, see [llms.txt](https://modernpress-io.gitbook.io/modernpress/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modernpress-io.gitbook.io/modernpress/widgets/cards.md).

# Cards

### Introduction

The **Cards Widget** in **ModernPress** allows you to showcase information in a stylish and visually appealing way. Whether you need to display services, portfolio items, or blog highlights, this widget provides flexible layouts with extensive customization options.

***

**Key Features:**

\
✅ 5 Unique Layouts

✅ Fully Responsive Design

✅ Customizable Colors, Typography, and Spacing 

✅ Image, Title, Description, and Button Options 

✅ Hover Effects and Animations

***

### Adding the Cards Widget

{% stepper %}
{% step %}
Open your WordPress Dashboard.

{% endstep %}

{% step %}
Edit a page with **Elementor**.

{% endstep %}

{% step %}
Search for **"Cards"** in the **ModernPress Widgets** panel.

<figure><img src="/files/FO0DZXxTKMXccdRv8cvw" alt=""><figcaption></figcaption></figure>

{% endstep %}

{% step %}
Drag and drop the widget into your section.

<figure><img src="/files/SbBKc8JJ7ml9S0gxPcrC" alt=""><figcaption></figcaption></figure>

{% endstep %}
{% endstepper %}

***

### Layouts Overview

The **Cards Widget** comes with 5 different layouts, each designed for various use cases.

#### Layout 1 - Classic Card

📌 Image at the top, followed by title, description, and button.\
🎨 Best for **services, portfolio items, and blog previews**.

<figure><img src="/files/LA1EB4GMIZ9nA65E5gYt" alt=""><figcaption></figcaption></figure>

#### Layout 2 - Side by Side

📌 Image on one side, content on the other.\
🎨 Perfect for **team members, testimonials, or featured content**.

<figure><img src="/files/qwknOKa99jou5zDw5Pdy" alt=""><figcaption></figcaption></figure>

#### Layout 3 - Image Overlay

📌 Background image with text overlay.\
🎨 Ideal for **highlighting key content with a modern touch**.

<figure><img src="/files/pSSD3Dn309uSRL1qBnyT" alt=""><figcaption></figcaption></figure>

#### Layout 4 - Minimalist Card

📌 Simple design with focus on text and CTA button.\
🎨 Works well for **pricing tables, features, and announcements**.

<figure><img src="/files/BIUZb7JkAEKbKzmpdnM7" alt=""><figcaption></figcaption></figure>

***

### Customization Options

#### Content Settings

📝 **Title & Description** – Add and format the main text.\
📸 **Image** – Upload an image for the card.\
🔗 **Button** – Set the button text, link, and styling.

<figure><img src="/files/x4R7tu6U4n6d8O1cJZ7L" alt=""><figcaption></figcaption></figure>

#### Style Settings

🎨 **Colors** – Customize text, background, and hover colors.\
🔠 **Typography** – Adjust font size, weight, and spacing.\
📏 **Spacing** – Control margins and paddings for perfect alignment.

<figure><img src="/files/Nzlqfx9s6rNQlEs0N16N" alt=""><figcaption></figcaption></figure>

#### Advanced Features

✨ **Hover Effects** – Choose from multiple hover animations.\
📱 **Responsive Controls** – Adjust styles for mobile, tablet, and desktop.

***

### FAQs

<details>

<summary>Can I use different layouts on the same page?</summary>

Yes! You can add multiple instances of the **Cards Widget**, each with a different layout.

</details>

<details>

<summary>How do I change the hover effect?</summary>

In the **Style** tab, look for **Hover Effects** and select your preferred effect.

</details>

***

### Need Help?

If you have any questions or need support, feel free to reach out at <support@modernpress.com>.