Results summary component using SASS/SCSS

You usually use UL when you gonna put inside a list of uknown number of elements that are similar, each one shares the same structure but different information.

<ul>
<li>
<span class='left-side'><img src="user-456.png" alt="user-image" /></span>
<span class='right-side'>Username-1234</span>
</li>
<li>
<span class='left-side'><img src="user-456.png" alt="user-image" /></span>
<span class='right-side'>Username-456</span>
</li>
<li>
<span class='left-side'><img src="user-789.png" alt="user-image" /></span>
<span class='right-side'>Username-789</span>
</li>
</ul>

As you see, the all follows the same content format, but the information content is diferent. You can actually use Div or UL, but as good practice you follow the this criteria.

If you want to use ul/ol and li, you certainly could. However, you would have to add some extra steps to your css/sass like:

margin: 0 padding: 0 list-style: none

Like you, I am using not the pro Version, so it is much more difficult to really get it on point. nonetheless I am using like gradient generator to get gradient as close as the picture. Just google it. i hope my comment was useful for you.