# MUIPrimary Card

A primary card by ModularUI with an image, title, description, and optional buttons.

### Properties

* `title`: The title of the card.
* `titleStyle`: Text style of the title, default: `TextStyle(fontSize: 24, fontWeight: FontWeight.bold)`.
* `description`: The description of the card.
* `descriptionStyle`: Text style of the description, default: `TextStyle(fontSize: 16, color: Colors.grey)`.
* `image`: Image widget to display in the card.
* `bgColor`: The background color of the card, default: `Colors.white`.
* `borderRadius`: The border radius of the card, default: `8`.
* `imageRadius`: Border radius of the image, default: `8`.
* `horizontalMargin`: Outer horizontal margin for the card, default: `0`.
* `verticalMargin`: Outer vertical margin for the card, default: `0`.
* `aspectRatio`: Aspect ratio of the image to be shown, default: `16/9`.
* `buttons`: List of Flutter Widgets or ModularUI Widgets used as buttons for MUIPrimaryCard, default: `[]`.
* `maxWidth`: Maximum width of the card, default: `430`. If the screen width is less than `maxWidth`, the widget will be responsive; otherwise, it will be equal to `maxWidth`.

### Example Usage

{% embed url="<https://verdant-lokum-9bd5c2.netlify.app/#/primarycard>" %}
Primary Card
{% endembed %}

```dart
MUIPrimaryCard(
            title: 'This is MUIPrimaryCard Title',
            description: 'This is MUIPrimaryCardTitle',
            image: Image.network(
              'https://images.unsplash.com/photo-1706527048236-c5e9183b9e8d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8fA%3D%3D',
              fit: BoxFit.cover,
            ),
            buttons: [MUIPrimaryButton(text: 'Button', onPressed: () {})],
          ),
```

### **Notes**

* The card adjusts its width based on the screen size but won't exceed **`maxWidth`**.
* You can customize the appearance and layout of the card using various properties.
* Buttons can be added to the card for interactive actions.
* The card provides an elegant way to display information with an image and optional buttons.