37 lines
886 B
Markdown
37 lines
886 B
Markdown
---
|
|
components:
|
|
- rx.chakra.Heading
|
|
---
|
|
|
|
```python exec
|
|
import reflex as rx
|
|
```
|
|
|
|
# Heading
|
|
|
|
The Heading component takes in a string and displays it as a heading.
|
|
|
|
```python demo
|
|
rx.chakra.heading("Hello World!")
|
|
```
|
|
|
|
The size can be changed using the `size` prop.
|
|
|
|
```python demo
|
|
rx.chakra.vstack(
|
|
rx.chakra.heading("Hello World!", size= "sm", color="red"),
|
|
rx.chakra.heading("Hello World!", size= "md", color="blue"),
|
|
rx.chakra.heading("Hello World!", size= "lg", color="green"),
|
|
rx.chakra.heading("Hello World!", size= "xl", color="blue"),
|
|
rx.chakra.heading("Hello World!", size= "2xl", color="red"),
|
|
rx.chakra.heading("Hello World!", size= "3xl", color="blue"),
|
|
rx.chakra.heading("Hello World!", size= "4xl", color="green"),
|
|
)
|
|
```
|
|
|
|
It can also be styled using regular CSS styles.
|
|
|
|
```python demo
|
|
rx.chakra.heading("Hello World!", font_size="2em")
|
|
```
|