🖌️  Color ya Headers

Submitted by Johannes Rieke / Tyler Richards

Summary

This function makes headers much prettier in Streamlit. Note that this now accessible in native Streamlit in st.header with parameter divider!

Functions

colored_header

Shows a header with a colored underline and an optional description.

Parameters:

Name	Type	Description	Default
label	str	Header label. Defaults to "Nice title".	'Nice title'
description	str	Description shown under the header. Defaults to "Cool description".	'Cool description'
color_name	_SUPPORTED_COLORS	Color of the underline. Defaults to "red-70". Supported colors are "light-blue-70", "orange-70", "blue-green-70", "blue-70", "violet-70", "red-70", "green-70", "yellow-80".	'red-70'

Source code in src/streamlit_extras/colored_header/__init__.py

@extra
def colored_header(
    label: str = "Nice title",
    description: str = "Cool description",
    color_name: _SUPPORTED_COLORS = "red-70",
):
    """
    Shows a header with a colored underline and an optional description.

    Args:
        label (str, optional): Header label. Defaults to "Nice title".
        description (str, optional): Description shown under the header. Defaults to "Cool description".
        color_name (_SUPPORTED_COLORS, optional): Color of the underline. Defaults to "red-70".
            Supported colors are "light-blue-70", "orange-70", "blue-green-70", "blue-70", "violet-70",
            "red-70", "green-70", "yellow-80".
    """
    if color_name is None:
        color_name = next(HEADER_COLOR_CYCLE)
    st.subheader(label)
    st.write(
        f'<hr style="background-color: {color(color_name)}; margin-top: 0;'
        ' margin-bottom: 0; height: 3px; border: none; border-radius: 3px;">',
        unsafe_allow_html=True,
    )
    if description:
        st.caption(description)

Import:

from streamlit_extras.colored_header import colored_header # (1)!

1. You should add this to the top of your .py file

Examples

example

def example():
    colored_header(
        label="My New Pretty Colored Header",
        description="This is a description",
        color_name="violet-70",
    )

Output (beta)

🎈 Powered by stlite