# App-promotion


## Examples


```html
<m-app-promotion>
      <h3 slot="heading">Heading</h3>
      <p>Default content in default slot</p>
      <m-button slot="actions">Action</m-button>
    </m-app-promotion>
```

### WithImage

```html
<m-app-promotion>
      <h3 slot="heading">Try our new feature</h3>
      <img slot="image" src="/illustrations/ai.svg" alt="AI illustration" />
      <p>
        Check out this amazing new capability that will boost your productivity.
      </p>
      <m-button slot="actions" variant="default">Get Started</m-button>
    </m-app-promotion>
```

### LongContent

```html
<div style="width: 400px; border: 1px dashed #ccc; padding: 16px;">
      <m-app-promotion>
        <h2 slot="heading">Heading</h2>
        <img slot="image" src="/illustrations/ai.svg" alt="AI illustration" />
        <p>
          This is a much longer promotional message that demonstrates how the
          banner handles extended content and wrapping behavior within a
          constrained container width. This is a much longer promotional message
          that demonstrates how the banner handles extended content and wrapping
          behavior within a constrained container width.
        </p>
        <m-button-group alignment="right" slot="actions">
          <m-button variant="plain">Learn More</m-button>
          <m-button variant="default">Try Now</m-button>
        </m-button-group>
      </m-app-promotion>
    </div>
```