Panel

Creates a ribbon with a symbol, text and a button with a link embedded.

WARNING avoid special symbols such as (, ), [, ] and similar in the texts of this component because it could break the look&feel

Input variables:

href: str
text: str
button_panel: str
symbol_name: str = ‘insights’

Example of use:

s.plt.html(
    order=0,
    html=s.html_components.panel(
        href='https://docs.shimoku.com/development/',
        text='Attention, this is a link to the documentation you need',
        button_panel='Read more',
        symbol_name='insights'
    )
)

symbol_name is a fixed small drawing at the left, you can add an explanatory text and the link is accessed on the button to open it in a new window.

You can customize it using other symbols and text, and changing its size.

This is an example:

s.plt.html(
    order=0, cols_size=4,
    html=s.html_components.panel(
        href='https://docs.shimoku.com/development/',
        text='Warning: Connect the equipment to the right Voltage Source: 220V',
        button_panel='Read more',
        symbol_name='safety'
    )
)

You can change the small symbol at the left:

s.plt.html(
    order=0, cols_size=4,
    html=s.html_components.panel(
        href='https://docs.shimoku.com/development/',
        text='Warning: Connect the equipment to the right Voltage Source: 220V',
        button_panel='Read more',
        symbol_name='warning'
    )
)

The text in the button and other symbols (Google Material Symbols) can be added, and the position is modified too:

s.plt.html(
    order=0, cols_size=4, padding='1,0,0,8',
    html = s.html_components.panel(
        href='https://docs.shimoku.com/development/',
        text='Warning: Connect the equipment to the right Voltage Source: 220V',
        button_panel='User Guide',
        symbol_name='safety_check'
    ) 
)

The use of padding='1,0,0,8' moves down one space and 8 to the left.

More on how to use the Grid.

Video demonstration