# Bento MathML
Renders a MathML formula in an iframe.
## Web Component
You must include each Bento component's required CSS library to guarantee proper loading and before adding custom styles. Or use the light-weight pre-upgrade styles available inline. See [Layout and style](#layout-and-style).
### Import via npm
```sh
npm install @bentoproject/mathml
```
```javascript
import {defineElement as defineBentoMathml} from '@bentoproject/mathml';
defineBentoMathml();
```
### Include via `
```
### Example
```html
The Quadratic Formula
Inline formula
This is an example of a formula,
placed inline in the middle of a block of text.
```
### Layout and style
Each Bento component has a small CSS library you must include to guarantee proper loading without [content shifts](https://web.dev/cls/). Because of order-based specificity, you must manually ensure that stylesheets are included before any custom styles.
```html
```
Alternatively, you may also make the light-weight pre-upgrade styles available inline:
```html
```
### Attributes
#### `data-formula` (required)
Specifies the formula to render.
#### `inline` (optional)
If specified, the component renders inline (`inline-block` in CSS).
#### `title` (optional)
Define a `title` attribute for the component to propagate to the underlying `