Skip to content

Text Elements

Text elements are the foundation of content display in Streamlit applications. st_yled enhances these elements with comprehensive typography controls, color options, and layout capabilities.

Available Elements

  • title - Main page titles
  • header - Section headers
  • subheader - Subsection headers
  • text - General text content
  • markdown - Markdown content with styling
  • caption - Small text and footnotes
  • code - Code display with syntax highlighting
  • latex - Mathematical expressions

title

Streamlit equivalent: st.title()

Display main page titles with customizable typography and styling.

st_yled.title("Page Title",
            color="#2c3e50",
            font_size="2.5rem")

Supported Styling Properties:

  • color - Text color (hex, rgb, named colors)
  • font_size - Font size (px, rem, em, %, or integer as px)


Streamlit equivalent: st.header()

Section headers for organizing content with clear visual hierarchy.

st_yled.header("Section Header", color="#34495e", font_size="2rem")

Supported Styling Properties:

  • color - Text color (hex, rgb, named colors)
  • font_size - Font size (px, rem, em, %, or integer as px)


subheader

Streamlit equivalent: st.subheader()

Subsection headers for detailed content organization.

st_yled.subheader("Subsection Title", color="#7f8c8d", font_size="1.3rem")

Supported Styling Properties:

  • color - Text color (hex, rgb, named colors)
  • font_size - Font size (px, rem, em, %, or integer as px)


text

Streamlit equivalent: st.text() or st.write()

General text content with comprehensive formatting options.

st_yled.text("Body text content", color="#2c3e50", font_size="16px")

Supported Styling Properties:

  • color - Text color (hex, rgb, named colors)
  • font_size - Font size (px, rem, em, %, or integer as px)


markdown

Streamlit equivalent: st.markdown()

Render markdown content with enhanced styling options.

st_yled.markdown("**Bold text** with *emphasis*", color="#2c3e50", font_size="16px")

Supported Styling Properties:

  • color - Text color (hex, rgb, named colors)
  • font_size - Font size (px, rem, em, %, or integer as px)


caption

Streamlit equivalent: st.caption()

Small text for captions, footnotes, and secondary information.

st_yled.caption("Figure 1: Sales data over time", color="#6c757d", font_size="12px")

Supported Styling Properties:

  • color - Text color (hex, rgb, named colors)
  • font_size - Font size (px, rem, em, %, or integer as px)


code

Streamlit equivalent: st.code()

Display code with syntax highlighting and custom styling.

st_yled.code("print('Hello, World!')", language="python",
             background_color="#f8f9fa", color="#2c3e50")

Supported Styling Properties:

  • color - Text color (hex, rgb, named colors)
  • background_color - Background color (hex, rgb, named colors)
  • font_size - Font size (px, rem, em, %, or integer as px)
  • border_style - Border style (solid, dashed, dotted, none)
  • border_color - Border color (hex, rgb, named colors)
  • border_width - Border width (px, rem, em, or integer as px)


latex

Streamlit equivalent: st.latex()

Render mathematical expressions with styling options.

st_yled.latex(r"\sum_{i=1}^{n} x_i = \mu", color="#2c3e50")

Supported Styling Properties:

  • color - Text color (hex, rgb, named colors)

Next Steps

Explore more component categories:

Or dive deeper into text styling: