# Banner with image and action

A banner component with image and action built with Mantine.

By Mantine. Categories: framework, interface, language, library.

[Demo](https://mantine-image-action-banner.preview.croct.live) · [Deploy](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcroct-tech%2Fvercel-template&project-name=mantine-image-action-banner&repository-name=mantine-image-action-banner&demo-title=Banner+with+image+and+action&demo-description=A+banner+component+with+image+and+action+built+with+Mantine.&demo-image=https%3A%2F%2Fcdn.croct.io%2Fassets%2Ftemplates%2Fcovers%2Flibrary-mantine-image-action-banner.png&external-id=mantine%3A%2F%2Fcomponent%2Fimage-action-banner&integration-ids=oac_cTQZ22CIXn5XgZXYk2nBwFdU&demo-url=https%3A%2F%2Fmantine-image-action-banner.preview.croct.live) · [Source](https://github.com/croct-tech/templates/blob/master/templates/mantine/component/image-action-banner/)

## Installation

```sh
npx croct@latest use mantine://component/image-action-banner
```

# Introduction

This template adds the [banner component with image and action](https://ui.mantine.dev/category/banners/?utm_source=croct#image-action-banner) from Mantine to your project.

It comes fully integrated with Croct, giving you CMS, AB testing, and personalization out of the box.

## Usage

To create a new project using this template, run:

```croct-cmd
croct use mantine://component/image-action-banner
```

You can customize the template by specifying options:

```croct-cmd
croct use mantine://component/image-action-banner --router=page
```

## Options

The following options are available for this template:

| Option        | Description                                      | Required | Default  |
|---------------|--------------------------------------------------|----------|----------|
| `projectName` | The name of the project.                         | No       | `my-app` |
| `version`     | The Next.js version to use.                      | No       | `latest` |
| `router`      | The router to use (`app` or `page`).             | No       | `app`    |
| `javascript`  | Whether to use JavaScript instead of TypeScript. | No       | `false`  |