Image and text content in components.html()

Using Streamlit
1

I want to display an image and some text below it, using components.html(). But text is not getting displayed below the image. Following is the code:

import streamlit as st
import streamlit.components.v1 as components

components.html(
    '<html><body>' +
    '<a href="https://i.ibb.co/0j2mc7K/4-NPTEL.png" target="_blank" style="text-decoration: none;">' +
    '<img src="https://i.ibb.co/0j2mc7K/4-NPTEL.png" style="width:600px;">' +
    '<div style="color: rgb(81, 0, 12); font-size: 23px; font-family: \'Book Antiqua\';">Title</div>' +
    '<div style="margin-top: 15px; color: rgb(81, 0, 12); font-size: 17px; font-family: \'Book Antiqua\';">Some Description</div></a></body></html>'
)

The same structure works in plain html:

<html>
<body>
    <a href="https://i.ibb.co/0j2mc7K/4-NPTEL.png" target="_blank" style="text-decoration: none;">
        <img src="https://i.ibb.co/0j2mc7K/4-NPTEL.png" style="width:600px;">
        <div style="color: rgb(81, 0, 12); font-size: 23px; font-family: 'Book Antiqua';">
            Title
        </div>
        <div style="margin-top: 15px; color: rgb(81, 0, 12); font-size: 17px; font-family: 'Book Antiqua';">
            Some Description
        </div>
    </a>
</body>
</html>

What is the issue with the components.html() code above?

2

The issue can be solved using the “height” parameter of the components.html(). Follow this link for details.