Component with custom News Sidebar.
The code to generate the component is this:
<div class="container">
<div class="row">
<div class="col-12 col-lg-4">
<div class="most-popular">
<!-- noticias -->
<ul itemscope itemtype="http://schema.org/Article">
<li>
<a href="#" title="Click here to access this news" itemprop="url" class="ui-box topBottom-leftRightCorner">
<span class="ui-border-element">
<img src="http://placehold.it/640x440" alt="Descrição da Imagem" itemprop="image" class="img-fluid">
</span>
</a>
<div class="title-date">
<h3 itemprop="headline"><a href="#" title="News 01" itemprop="url">News 01</a></h3>
<a class="time" href="#" title="News 01" itemprop="url">19/09/2018</a>
</div>
</li>
<li>
<a href="#" title="Click here to access this news" itemprop="url" class="ui-box topBottom-leftRightCorner">
<span class="ui-border-element">
<img src="http://placehold.it/640x440" alt="Descrição da Imagem" itemprop="image" class="img-fluid">
</span>
</a>
<div class="title-date">
<h3 itemprop="headline"><a href="#" title="Other News" itemprop="url">Other News</a></h3>
<a class="time" href="#" title="Other News" itemprop="url">19/09/2018</a>
</div>
</li>
<li>
<a href="#" title="Click here to access this news" itemprop="url" class="ui-box topBottom-leftRightCorner">
<span class="ui-border-element">
<img src="http://placehold.it/640x440" alt="Descrição da Imagem" itemprop="image" class="img-fluid">
</span>
</a>
<div class="title-date">
<h3 itemprop="headline"><a href="#" title="News 01" itemprop="url">News 01</a></h3>
<a class="time" href="#" title="News 01" itemprop="url">19/09/2018</a>
</div>
</li>
<li>
<a href="#" title="Click here to access this news" itemprop="url" class="ui-box topBottom-leftRightCorner">
<span class="ui-border-element">
<img src="http://placehold.it/640x440" alt="Descrição da Imagem" itemprop="image" class="img-fluid">
</span>
</a>
<div class="title-date">
<h3 itemprop="headline"><a href="#" title="Other News" itemprop="url">Other News</a></h3>
<a class="time" href="#" title="Other News" itemprop="url">19/09/2018</a>
</div>
</li>
<li>
<a href="#" title="Click here to access this news" itemprop="url" class="ui-box topBottom-leftRightCorner">
<span class="ui-border-element">
<img src="http://placehold.it/640x440" alt="Descrição da Imagem" itemprop="image" class="img-fluid">
</span>
</a>
<div class="title-date">
<h3 itemprop="headline"><a href="#" title="News 01" itemprop="url">News 01</a></h3>
<a class="time" href="#" title="News 01" itemprop="url">19/09/2018</a>
</div>
</li>
<li>
<a href="#" title="Click here to access this news" itemprop="url" class="ui-box topBottom-leftRightCorner">
<span class="ui-border-element">
<img src="http://placehold.it/640x440" alt="Descrição da Imagem" itemprop="image" class="img-fluid">
</span>
</a>
<div class="title-date">
<h3 itemprop="headline"><a href="#" title="Other News" itemprop="url">Other News</a></h3>
<a class="time" href="#" title="Other News" itemprop="url">19/09/2018</a>
</div>
</li>
</ul>
<!-- /noticias -->
<!-- dropdown -->
<div class="dropdown dropdownscroll">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="menu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select one choice
</button>
<div class="dropdown-menu" aria-labelledby="menu2" role="menu">
<input type="text" class="form-control" placeholder="Search" aria-label="Search">
<a class="dropdown-item" href="#">Theme 01</a>
<a class="dropdown-item" href="#">Theme 02</a>
<a class="dropdown-item" href="#">Theme 03</a>
<a class="dropdown-item" href="#">Theme 04</a>
<a class="dropdown-item" href="#">Theme 05</a>
<a class="dropdown-item" href="#">Theme 06</a>
<a class="dropdown-item" href="#">Theme 07</a>
<a class="dropdown-item" href="#">Theme 08</a>
<a class="dropdown-item" href="#">Theme 09</a>
<a class="dropdown-item" href="#">Theme 10</a>
<a class="dropdown-item" href="#">Theme 11</a>
<a class="dropdown-item" href="#">Theme 12</a>
</div>
</div>
<!-- /dropdown -->
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-4">
<ul class="article-sidebar" itemscope itemtype="http://schema.org/Article">
<li>
<a href="#" title="" itemprop="url" class="ui-box topBottom-leftRightCorner">
<span class="ui-border-element">
<img src="http://placehold.it/640x440" alt="" itemprop="image" class="img-fluid">
</span>
</a>
<h3 itemprop="headline"><a href="#" title="" itemprop="url">Why tech accelerators may soon be as irrelevant as an MBA</a></h3>
<p><a href="" title="">The model is talking about booking her latest gig, modeling WordPress underwear in the brand latest Perfectly Fit campaign, which was shot by Lachian...</a></p>
</li>
<li>
<a href="#" title="" itemprop="url" class="ui-box topBottom-leftRightCorner">
<span class="ui-border-element">
<img src="http://placehold.it/640x440" alt="" itemprop="image" class="img-fluid">
</span>
</a>
<h3 itemprop="headline"><a href="#" title="" itemprop="url">Why tech accelerators may soon be as irrelevant as an MBA</a></h3>
<p><a href="" title="">The model is talking about booking her latest gig, modeling WordPress underwear in the brand latest Perfectly Fit campaign, which was shot by Lachian...</a></p>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-4">
<ul class="images-article-sidebar" itemscope itemtype="http://schema.org/Article">
<li>
<a href="#" title="" itemprop="url" class="ui-box topBottom-leftRightCorner">
<span class="ui-border-element">
<img src="http://placehold.it/640x440" alt="" itemprop="image" class="img-fluid">
</span>
</a>
<h3 itemprop="headline"><a href="#" title="" itemprop="url">Why tech accelerators may soon be as irrelevant as an MBA</a></h3>
</li>
<li>
<a href="#" title="" itemprop="url" class="ui-box topBottom-leftRightCorner">
<span class="ui-border-element">
<img src="http://placehold.it/640x440" alt="" itemprop="image" class="img-fluid">
</span>
</a>
<h3 itemprop="headline"><a href="#" title="" itemprop="url">Why tech accelerators may soon be as irrelevant as an MBA</a></h3>
</li>
<li>
<a href="#" title="" itemprop="url" class="ui-box topBottom-leftRightCorner">
<span class="ui-border-element">
<img src="http://placehold.it/640x440" alt="" itemprop="image" class="img-fluid">
</span>
</a>
<h3 itemprop="headline"><a href="#" title="" itemprop="url">Why tech accelerators may soon be as irrelevant as an MBA</a></h3>
</li>
<li>
<a href="#" title="" itemprop="url" class="ui-box topBottom-leftRightCorner">
<span class="ui-border-element">
<img src="http://placehold.it/640x440" alt="" itemprop="image" class="img-fluid">
</span>
</a>
<h3 itemprop="headline"><a href="#" title="" itemprop="url">Why tech accelerators may soon be as irrelevant as an MBA</a></h3>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-4">
<ul class="banners-sidebar">
<li>
<a href="#" title="" itemprop="url">
<img src="http://placehold.it/350x185" alt="" itemprop="image" class="img-fluid">
</a>
<span>Banner 01</span>
<h3 itemprop="headline"><a href="#" title="" itemprop="url">Banner 01</a></h3>
</li>
<li>
<a href="#" title="" itemprop="url">
<img src="http://placehold.it/350x185" alt="" itemprop="image" class="img-fluid">
</a>
<span>Banner 02</span>
<h3 itemprop="headline"><a href="#" title="" itemprop="url">Banner 02</a></h3>
</li>
</ul>
</div>
</div>
</div>