How to remove the "paper clip" anchor icon from certain custom components

Using Streamlit
,
1

Hello!

Anybody knows how to remove the paper clip anchor icon (see image) ? I created a custom component and the title is a bit off to the left because of this hidden icon that appears when hovering, which I do not need and to be quite honest, it is rather annoying… any help would be super appreciated.

image
image1600×790 225 KB

def custom_scorecard(
    title,
    value,
    delta_val=None,
    title_color="#000000",
    value_color="#000000",
    delta_color_pos="green",
    delta_color_neg="red",
    bg_light_color1="#3374A3",
    bg_dark_color1="#174C7E",
    title_font_size="1rem",
    value_font_size="1.5rem",
    delta_font_size="0.875rem",
    border_radius="10px",
    heading="h4",
    border=True,
    height=160,  # Default with Delta is 160, otherwise you may use 124
    num_decimals=2,  # Specifies the number of decimals for non-formatted numbers
    value_format="plain",  # Can be 'currency', 'percentage', or 'plain' for no specific format
):
    """
    Creates a customized scorecard widget with a title, value, and optional delta value display.

    This function generates a scorecard with customizable styles including colors, fonts, and formatting options.
    It's designed to display key metrics in a visually appealing and informative way. The scorecard can show changes
    (delta) in the metric, formatted according to specified preferences.

    Parameters:
    - title (str): The title of the scorecard.
    - value (float): The main value to display in the scorecard.
    - delta_val (float, optional): The change in the value since the last measurement. Default is None.
    - title_color (str): Hex code for the title color. Default is black.
    - value_color (str): Hex code for the value color. Default is black.
    - delta_color_pos (str): Color for a positive change (delta). Default is green.
    - delta_color_neg (str): Color for a negative change (delta). Default is red.
    - bg_light_color (str): Hex code for the light color in the gradient background.
    - bg_dark_color (str): Hex code for the dark color in the gradient background.
    - title_font_size (str): Font size for the title. Default is "1rem".
    - value_font_size (str): Font size for the value. Default is "1.5rem".
    - delta_font_size (str): Font size for the delta value. Default is "0.875rem".
    - border_radius (str): CSS value for border radius. Default is "10px".
    - heading (str): HTML heading tag for the title (e.g., h1, h2, h3, h4). Default is "h4".
    - border (bool): Whether to display a border around the scorecard. Default is True.
    - height (int): Height of the scorecard in pixels. Default is 160.
    - num_decimals (int): Number of decimal places for formatting values. Default is 2.
    - value_format (str): Formatting style for the value and delta. Options are 'currency', 'percentage', or 'plain'.

    Note:
    This function should be used within a Streamlit application to inject custom HTML and CSS for styling scorecards.
    It uses `unsafe_allow_html=True` to enable HTML content, which should be used with caution.
    """
    # Formatting the value based on the specified format
    if value_format == "currency":
        value_formatted = f"${value:,.{num_decimals}f}"
    elif value_format == "percentage":
        value_formatted = f"{value:.{num_decimals}f}%"
    else:  # Default 'plain' formatting with specified decimals
        value_formatted = f"{value:,.{num_decimals}f}"

    delta_html = ""
    if delta_val is not None and delta_val != 0:
        delta_color_css = (
            f"color: {delta_color_pos};"
            if delta_val > 0
            else f"color: {delta_color_neg};"
        )
        delta_symbol = "↑" if delta_val > 0 else "↓"
        # Formatting delta based on the value_format
        if value_format == "currency":
            delta_val_formatted = f"${abs(delta_val):,.{num_decimals}f}"
        elif value_format == "percentage":
            delta_val_formatted = f"{abs(delta_val):.{num_decimals}f}%"
        else:
            delta_val_formatted = f"{abs(delta_val):,.{num_decimals}f}"
        delta_html = f"<div style='text-align: center; font-size: {delta_font_size}; {delta_color_css}'>{delta_symbol} {delta_val_formatted}</div>"

    container_style = f"background: linear-gradient(to bottom, {bg_light_color1}, {bg_dark_color1}); border-radius: {border_radius};"
    if border:
        container_style += " border: 1px solid #ddd;"

    st.markdown(
        f"""
        <div style='{container_style} padding: 1rem; height: {height}px;'>
            <div style='text-align: center; margin-bottom: 0rem;'><{heading} style='color: {title_color}; font-size: {title_font_size};'>{title}</{heading}></div>
            <div style='text-align: center; font-size: {value_font_size}; color: {value_color};'>{value_formatted}</div>
            {delta_html}
        </div>
        """,
        unsafe_allow_html=True,
    )
2

Hey @eurojourney, they are automatically added for all <h> tags, e.g. h4 which you seem to use for your heading variable.
You could either use something else than the h tags and style them accordingly, or you hide the anchor button for headings by adding this style-tag to your st.markdown content:

[data-testid='stHeaderActionElements'] {
  display: none;
}