Several ways. Depends what else is on the screen. You can use an image component and then style it. I’m using a round tile component, setting it to 2 tiles per row and then creating a Rich text box with this CSS:
.fdeRBK {
grid-template-columns: repeat(1, 1fr);
width: 200px;
margin: auto;
}
If you want the colored background, I placed the rich text box with the CSS at the very top and included this CSS:
<pre>
<span><style>
[data-test=app-markdown-view] {
background-image: url("https://www.colorbook.io/imagecreator.php?hex=ff5723&width=1054&height=548");
position: absolute;
height:100px;
width: 100%;
}
So the entire code in the Rich text box is
<pre>
<span><style>
.fdeRBK {
grid-template-columns: repeat(1, 1fr);
width: 200px;
margin: auto;
}
[data-test=app-markdown-view] {
background-image: url("https://www.colorbook.io/imagecreator.php?hex=ff5723&width=1054&height=548");
position: absolute;
height:100px;
width: 100%;
}
Note, you can change the background image to whatever you want. The one I included, you can change the hexcode to match your theme!
Variations:
