Skip to content

🖌️  Color ya Headers

Submitted by Johannes Rieke / Tyler Richards

Summary

This function makes headers much prettier in Streamlit. Note: this is 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'

Deprecated

This function is deprecated. Use the divider parameter in st.header, st.title, or st.subheader instead.

Source code in src/streamlit_extras/colored_header/__init__.py 
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
@extra
def colored_header(
    label: str = "Nice title",
    description: str = "Cool description",
    color_name: _SUPPORTED_COLORS = "red-70",
) -> None:
    """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".

    !!! warning "Deprecated"
        This function is deprecated. Use the
        [`divider`](https://docs.streamlit.io/develop/api-reference/text/st.header)
        parameter in `st.header`, `st.title`, or `st.subheader` instead.
    """
    show_deprecation_warning(
        "colored_header is deprecated. Use the `divider` parameter in `st.header`, "
        "`st.title`, or `st.subheader` instead. "
        "See https://docs.streamlit.io/develop/api-reference/text/st.header",
        show_once=True,
    )
    if color_name is None:
        color_name = next(HEADER_COLOR_CYCLE)
    st.subheader(label)
    st.html(
        f'<hr style="background-color: {color(color_name)}; margin-top: 0;'
        ' margin-bottom: 0; height: 3px; border: none; border-radius: 3px;">'
    )
    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() -> None:
    colored_header(
        label="My New Pretty Colored Header",
        description="This is a description",
        color_name="violet-70",
    )
Output (beta)