<mk-box-info header="Header text" footer="Footer text" progressWidth="70" backgroundColor="yellow" iconStyleClass="fa fa-comments-o">
Content text
</mk-box-info>
<mk-box-info progressWidth="70" backgroundColor="yellow" iconStyleClass="fa fa-comments-o">
<mk-box-info-header>Header HTML</mk-box-info-header>
<mk-box-info-content>Content HTML</mk-box-info-content>
<mk-box-info-footer>Footer HTML</mk-box-info-footer>
</mk-box-info>
| Name | Type | Default | Description |
|---|---|---|---|
| backgroundColor | string (aqua | green | red | yellow) | null | The box background color. |
| contentStyleClass | string | info-box-number | The box content style classes. |
| contentColor | string (green | aqua | light-blue | red | yellow | mutted | rgb | rgba | hex) | null | The box content font color. |
| footer | string | null |
Footer text of the panel. Note: You can use <mk-box-info-footer> for HTML footer. |
| footerColor | string (green | aqua | light-blue | red | yellow | mutted | rgb | rgba | hex) | null | The box footer font color. |
| footerStyleClass | string | progress-description | The box footer style classes. |
| header | string | null |
Header text of the box. Note: You can use <mk-box-info-header> for HTML header. |
| headerColor | string (green | aqua | light-blue | red | yellow | mutted | rgb | rgba | hex) | null | The box header font color. |
| headerStyleClass | string | info-box-text | The box header style classes. |
| iconBackgroundColor | string (aqua | green | red | yellow) | null | The box icon background color. |
| iconColor | string (green | aqua | light-blue | red | yellow | mutted | rgb | rgba | hex) | null | The box icon font color. |
| iconStyleClass | string | ion ion-bag | The box icon style classes. |
| progressWidth | number | null | The progress bar width of the box in percentage. |
| styleClass | string | info-box | The box style classes. |