Images in Rise, List with icon bullets

bullet images in rise
<ul style="list-style-type:none;padding-left: 0;margin-left: 10px;"><li style="align-items:center;display:flex;padding-bottom: 15px;"><span style="height:65px;width:65px;background-size:cover;vertical-align:middle;min-width:65px;max-width:65px;color:transparent;margin-right:45px;display:inline-block;background-image:url(https://img.icons8.com/?size=96&amp;id=8DBS89APrKzN&amp;format=png);">dd</span><span style="display:inline-block;vertical-align:middle;">The future has yet to unfold. But the now is full of beauty simply waiting for our attention.</span></li><li style="display:flex;align-items:center;padding-bottom: 15px;"><span style="height:65px;width:65px;background-size:cover;vertical-align:middle;min-width:65px;max-width:65px;color:transparent;margin-right:45px;display:inline-block;background-image: url(https://img.icons8.com/?size=96&amp;id=JSaH7KL58PBO&amp;format=png);">dd</span><span style="display:inline-block;vertical-align:middle;">This custom list uses icons from icons8.com</span></li><li style="display:flex;align-items:center;"><span style="height:65px;width:65px;background-size:cover;vertical-align:middle;min-width:65px;max-width:65px;color:transparent;margin-right:45px;display:inline-block;background-image: url(https://img.icons8.com/?size=96&amp;id=iFp9uMOIBlB9&amp;format=png);">dd</span><span style="display:inline-block;vertical-align:middle;">The future has yet to unfold. But the now is full of beauty simply waiting for our attention.gjhgAsd asdf aasdfasd sdfasdf sf sa asdfasd sdfasdf sf sasfdasdfdafaDS</span></li><li style="display:flex;align-items:center;padding-bottom: 15px;"><br></li></ul>

https://youtu.be/dPKNFHaI6ws

Bulleted list with numbers, custom bullet colors

<ol style="list-style-type:none;padding-left:0;margin-left:10px;"><li style="align-items:center;display:flex;padding-bottom:15px;"><span style="height:45px;width:45px;vertical-align:middle;min-width:45px;max-width:45px;font-weight:bold;border-radius:50%;color:black;background:yellow;margin-right:45px;text-align:center;line-height:45px;display:inline-block;">1</span><span style="display:inline-block;vertical-align:middle;">The future has yet to unfold. But the now is full of beauty simply waiting for our attention.</span></li><li style="align-items:center;display:flex;padding-bottom:15px;"><span style="height:45px;width:45px;vertical-align:middle;min-width:45px;max-width:45px;font-weight:bold;border-radius:50%;color:black;background:yellow;margin-right:45px;text-align:center;line-height:45px;display:inline-block;">2</span><span style="display:inline-block;vertical-align:middle;">The future has yet to unfold. But the now is full of beauty simply waiting for our attention. But the now is full of beauty simply waiting for our attention.But the now is full of beauty simply waiting for our attention.But the now is full of beauty simply waiting for our attention.</span></li></ol>

Social Icons

<p style="text-align:center;position: relative;"><a href="http://x.com" rel="noopener noreferrer" target="_blank"><span style="background-image:url(https://img.icons8.com/?size=60&amp;id=01GWmP9aUoPj&amp;format=png);display: inline-block;width: 45px;color: transparent;height: 45px;line-height: 45px;vertical-align: middle;background-size: cover;">i</span></a><a href="http://facebook.com" rel="noopener noreferrer" target="_blank"><span style="background-image: url(https://img.icons8.com/?size=60&amp;id=118466&amp;format=png);display: inline-block;width: 45px;color: transparent;height: 45px;line-height: 45px;vertical-align: middle;background-size: cover;">i</span></a><a href="http://facebook.com" rel="noopener noreferrer" target="_blank"><span style="background-image: url(https://img.icons8.com/?size=60&amp;id=59813&amp;format=png);display: inline-block;width: 45px;color: transparent;height: 45px;line-height: 45px;vertical-align: middle;background-size: cover;">i</span></a><a href="http://twitter.com" rel="noopener noreferrer" target="_blank"><span style="background-image: url(https://img.icons8.com/?size=60&amp;id=98960&amp;format=png);display: inline-block;width: 45px;color: transparent;height: 45px;line-height: 45px;vertical-align: middle;background-size: cover;">i</span></a><a href="https://theme-360.com" rel="noopener noreferrer" target="_blank"><span style="background-image: url(https://img.icons8.com/?size=60&amp;id=59798&amp;format=png);display: inline-block;width: 45px;color: transparent;height: 45px;line-height: 45px;vertical-align: middle;background-size: cover;">i</span></a></p>

Social Icons with theme color

<p style="text-align:center;position: relative;"><span style="position:absolute;height:55px;background:red;width:100%;left:0px;color: transparent;pointer-events: none;mix-blend-mode: screen;top:0px;">overlay</span><a href="http://x.com" rel="noopener noreferrer" target="_blank"><span style="background-image:url(https://img.icons8.com/?size=60&amp;id=01GWmP9aUoPj&amp;format=png);display: inline-block;width: 45px;color: transparent;height: 45px;line-height: 45px;vertical-align: middle;background-size: cover;">i</span></a><a href="http://facebook.com" rel="noopener noreferrer" target="_blank"><span style="background-image: url(https://img.icons8.com/?size=60&amp;id=118466&amp;format=png);display: inline-block;width: 45px;color: transparent;height: 45px;line-height: 45px;vertical-align: middle;background-size: cover;">i</span></a><a href="http://facebook.com" rel="noopener noreferrer" target="_blank"><span style="background-image: url(https://img.icons8.com/?size=60&amp;id=59813&amp;format=png);display: inline-block;width: 45px;color: transparent;height: 45px;line-height: 45px;vertical-align: middle;background-size: cover;">i</span></a><a href="http://twitter.com" rel="noopener noreferrer" target="_blank"><span style="background-image: url(https://img.icons8.com/?size=60&amp;id=98960&amp;format=png);display: inline-block;width: 45px;color: transparent;height: 45px;line-height: 45px;vertical-align: middle;background-size: cover;">i</span></a><a href="https://theme-360.com" rel="noopener noreferrer" target="_blank"><span style="background-image: url(https://img.icons8.com/?size=60&amp;id=59798&amp;format=png);display: inline-block;width: 45px;color: transparent;height: 45px;line-height: 45px;vertical-align: middle;background-size: cover;">i</span></a></p>

Getting started with theme components? Download the blank theme component css file.
Watch: installing a theme component.


Posted

in