> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/marimo-team/marimo/llms.txt
> Use this file to discover all available pages before exploring further.

# Html

A wrapper around HTML text that can be used as an output.

Output an `Html` object as the last expression of a cell to render it in your app.

## Usage

```python theme={null}
hello_world = mo.Html("<h2>Hello, World</h2>")
mo.Html(
    f'''
    <h1>Hello, Universe!</h1>
    {hello_world}
    '''
)
```

## Signature

```python theme={null}
mo.Html(text: str)
```

## Parameters

<ParamField path="text" type="str" required>
  A string of HTML.
</ParamField>

## Attributes

<ParamField path="text" type="str">
  A string of HTML representing this element.
</ParamField>

## Methods

### batch

Convert an HTML object with templated text into a UI element.

This method lets you create custom UI elements that are represented by arbitrary HTML.

```python theme={null}
user_info = mo.md(
    '''
    - What's your name?: {name}
    - When were you born?: {birthday}
    '''
).batch(name=mo.ui.text(), birthday=mo.ui.date())
```

In this example, `user_info` is a UI Element whose output is markdown and whose value is a dict with keys `'name'` and `'birthday'` (and values equal to the values of their corresponding elements).

**Parameters:**

* `**elements`: the UI elements to interpolate into the HTML template.

### center

Center an item.

```python theme={null}
mo.md("# Hello, world").center()
```

**Returns:** An `Html` object.

### right

Right-justify.

```python theme={null}
mo.md("# Hello, world").right()
```

**Returns:** An `Html` object.

### left

Left-justify.

```python theme={null}
mo.md("# Hello, world").left()
```

**Returns:** An `Html` object.

### callout

Create a callout containing this HTML element.

A callout wraps your HTML element in a raised box, emphasizing its importance. You can style the callout for different situations with the `kind` argument.

```python theme={null}
mo.md("Hooray, you did it!").callout(kind="success")
```

```python theme={null}
mo.md("It's dangerous to go alone!").callout(kind="warn")
```

**Parameters:**

* `kind` (Literal\["neutral", "danger", "warn", "success", "info"]): The kind of callout. Defaults to "neutral".

**Returns:** An `Html` object.

### style

Wrap an object in a styled container.

```python theme={null}
mo.md("...").style({"max-height": "300px", "overflow": "auto"})
mo.md("...").style(max_height="300px", overflow="auto")
```

**Parameters:**

* `style` (Optional\[dict\[str, Any]]): An optional dict of CSS styles, keyed by property name.
* `**kwargs`: CSS styles as keyword arguments.

**Returns:** An `Html` object.