Skip to content

🖌️  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 
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
@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)