Heading

The Heading component is used to create different levels of headings.

By default, it creates a level 3 (<h3>) heading.

Example

from deephaven import ui

my_heading_basic = ui.heading("Hello world")

Heading Basic Example

UI recommendations

Consider using a text component if the content does not require a specific heading level or semantic importance, such as for paragraphs or inline text.

Content

The heading component represents a header that inherits styling from its parent container.

from deephaven import ui


@ui.component
def ui_heading_content_examples():
    return [
        ui.heading("Heading 1", level=1),
        ui.heading("Heading 2", level=2),
        ui.heading("Heading 3", level=3),
        ui.heading("Heading 4", level=4),
        ui.heading("Heading 5", level=5),
        ui.heading("Heading 6", level=6),
        ui.time_field(
            label="Sample Label",
            contextual_help=ui.contextual_help(ui.heading("Content tips")),
        ),
    ]


my_heading_content_examples = ui_heading_content_examples()

Color

The color prop sets the text color for the heading component.

from deephaven import ui


my_heading_color_example = ui.flex(
    ui.heading("Faded heading", color="gray-500"),
    ui.heading("Negative heading", color="negative"),
    ui.heading("Positive heading", color="positive"),
    ui.heading("Hex color", color="#FA8072"),
    ui.heading("Nested ", ui.text("example", color="green"), "!"),
    direction="column",
)

API Reference

A layout container using CSS grid. Supports Spectrum dimensions as values to ensure consistent and adaptive sizing and spacing.

Returns: Element The rendered heading element.

ParametersTypeDefaultDescription
*childrenAnyThe content to render within the container.
levelLiteral[1, 2, 3, 4, 5, 6]3Sets heading level, h1 through h6. Defaults to 3.
keystr |
None
NoneA unique identifier used by React to render elements in a list.